diff --git a/airbyte-webapp/src/components/CreateConnection/CreateConnectionForm.test.tsx b/airbyte-webapp/src/components/CreateConnection/CreateConnectionForm.test.tsx index b55dde8ab39f..7be178b5a9ff 100644 --- a/airbyte-webapp/src/components/CreateConnection/CreateConnectionForm.test.tsx +++ b/airbyte-webapp/src/components/CreateConnection/CreateConnectionForm.test.tsx @@ -44,7 +44,7 @@ describe("CreateConnectionForm", () => { it("should render", async () => { jest.spyOn(sourceHook, "useDiscoverSchema").mockImplementationOnce(() => baseUseDiscoverSchema); const renderResult = await render(); - expect(renderResult.container).toMatchSnapshot(); + expect(renderResult).toMatchSnapshot(); expect(renderResult.queryByText("Please wait a little bit more…")).toBeFalsy(); }); @@ -54,7 +54,7 @@ describe("CreateConnectionForm", () => { .mockImplementationOnce(() => ({ ...baseUseDiscoverSchema, isLoading: true })); const renderResult = await render(); - expect(renderResult.container).toMatchSnapshot(); + expect(renderResult).toMatchSnapshot(); }); it("should render with an error", async () => { @@ -64,6 +64,6 @@ describe("CreateConnectionForm", () => { })); const renderResult = await render(); - expect(renderResult.container).toMatchSnapshot(); + expect(renderResult).toMatchSnapshot(); }); }); diff --git a/airbyte-webapp/src/components/CreateConnection/__snapshots__/CreateConnectionForm.test.tsx.snap b/airbyte-webapp/src/components/CreateConnection/__snapshots__/CreateConnectionForm.test.tsx.snap index f32652563982..4bd204d77b07 100644 --- a/airbyte-webapp/src/components/CreateConnection/__snapshots__/CreateConnectionForm.test.tsx.snap +++ b/airbyte-webapp/src/components/CreateConnection/__snapshots__/CreateConnectionForm.test.tsx.snap @@ -1,184 +1,61 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`CreateConnectionForm should render 1`] = ` -
-
-
+
+
-
-
-
-
-
- -
-
-
-
- -
-
-
-
-
-
-
- Transfer -
- - -
-
-
-
-
- Every 24 hours -
-
-
- -
-
- -
-
@@ -186,77 +63,78 @@ exports[`CreateConnectionForm should render 1`] = `
-
- Streams -
- +
+ Transfer +
- Mirror source structure + Every 24 hours
@@ -265,8 +143,8 @@ exports[`CreateConnectionForm should render 1`] = ` aria-expanded="false" aria-haspopup="true" aria-readonly="true" - class="css-mohuvp-dummyInput-DummyInput" - id="react-select-3-input" + class="" + id="react-select-2-input" inputmode="none" role="combobox" tabindex="0" @@ -274,11 +152,11 @@ exports[`CreateConnectionForm should render 1`] = ` />
- +
+
+
-
+ Streams + +
-
+
+
+ +
- Add a prefix to stream names (ex. “airbyte_” causes “projects” => “airbyte_projects”) - - - +
+
+
+
+ Mirror source structure +
+
+
+ +
+
+ +
+
+ +
+
-
+
- +
+ +
+
+
+
+ +
-
-
-
- Activate the streams you want to sync -
- -
-
-
- + + Refresh source schema +
+
-
-
- -
-
-
- Sync +
- Source
+ +
+
+
+ Sync +
+
+ Source
- - - + + + +
-
-
-
- Sync mode
+
+ Sync mode
- - - + + + +
-
-
- Cursor field
+ Cursor field
- - - + + + +
-
-
- Primary key
+ Primary key
- - - + + + +
-
-
- Destination
+ Destination
- - - + + + +
+
-
-
-
- Namespace -
-
- Stream name -
-
- Source | Destination -
-
-
-
- Namespace -
-
- Stream name +
+ Namespace +
+
+ Stream name +
+
+ Source | Destination +
+
+
+
+ Namespace +
+
+ Stream name +
-
-
- -
-
- - - -
-
- No namespace +
- pokemon -
-
+ +
+
- + class="" + > + No namespace + +
+
+ pokemon +
+
+ +
-
- Full refresh -
- | -
-
- Overwrite +
+ Full refresh +
+
+ | +
+
+ Overwrite +
+
- -
-
-
-
-
-
- '<source schema> -
-
- pokemon +
+
+
+ '<source schema> +
+
+ pokemon +
@@ -802,205 +804,209 @@ exports[`CreateConnectionForm should render 1`] = `
-
-
-
- Normalization & Transformation -
-
-
-
-
-
-
-
- +
+ Set up connection +
+ +
-
- + +
-
+ `; exports[`CreateConnectionForm should render when loading 1`] = ` -
-
+ +
-
- Please wait a little bit more… +
+
+ Please wait a little bit more… +
-
-
- We are fetching the schema of your data source. +
+ We are fetching the schema of your data source. This should take less than a minute, but may take a few minutes on slow internet connections or data sources with a large amount of tables. +
-
+ `; exports[`CreateConnectionForm should render with an error 1`] = ` -
-
+ +
- -
-

- Failed to fetch schema. Please try again -

- +

+ Failed to fetch schema. Please try again +

+ +
-
+ `; diff --git a/airbyte-webapp/src/components/ui/DropDown/CustomSelect.tsx b/airbyte-webapp/src/components/ui/DropDown/CustomSelect.tsx index 95af34eead81..7482c87af1f6 100644 --- a/airbyte-webapp/src/components/ui/DropDown/CustomSelect.tsx +++ b/airbyte-webapp/src/components/ui/DropDown/CustomSelect.tsx @@ -25,7 +25,8 @@ export const CustomSelect = styled(Select)< border-color: ${({ theme, $error }) => ($error ? theme.dangerColor : theme.greyColor10)}; } - &.react-select__control--menu-is-open { + &.react-select__control--menu-is-open, + &:focus-within { border: 1px solid ${({ theme }) => theme.primaryColor}; box-shadow: none; } diff --git a/airbyte-webapp/src/components/ui/DropDown/components/Option.tsx b/airbyte-webapp/src/components/ui/DropDown/components/Option.tsx index 5de3503e106c..175d7669b676 100644 --- a/airbyte-webapp/src/components/ui/DropDown/components/Option.tsx +++ b/airbyte-webapp/src/components/ui/DropDown/components/Option.tsx @@ -25,6 +25,7 @@ export interface DropDownOptionDataItem { } export const OptionView = styled.div<{ + isFocused?: boolean; isSelected?: boolean; isDisabled?: boolean; }>` @@ -34,14 +35,15 @@ export const OptionView = styled.div<{ align-items: center; cursor: pointer; color: ${({ isSelected, theme }) => (isSelected ? theme.primaryColor : theme.textColor)}; - background: ${({ isSelected, theme }) => (isSelected ? theme.primaryColor12 : theme.whiteColor)}; + background: ${({ isSelected, isFocused, theme }) => + isSelected ? theme.primaryColor12 : isFocused ? theme.grey100 : theme.whiteColor}; border: none; padding: 10px 16px; font-size: 14px; line-height: 19px; &:hover { - background: ${({ isSelected, theme }) => (isSelected ? theme.primaryColor12 : theme.greyColor0)}; + background: ${({ isSelected, theme }) => (isSelected ? theme.primaryColor12 : theme.grey100)}; } `; @@ -58,6 +60,7 @@ export const DropDownOption: React.FC = (props) => { data-testid={dataTestId} isSelected={props.isSelected && !props.isMulti} isDisabled={props.isDisabled} + isFocused={props.isFocused} > {props.isMulti && ( diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionReplicationTab.test.tsx b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionReplicationTab.test.tsx index 87a355ee8f37..a110635e8c6c 100644 --- a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionReplicationTab.test.tsx +++ b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionReplicationTab.test.tsx @@ -57,7 +57,7 @@ describe("ConnectionReplicationTab", () => { setupSpies(); const renderResult = await render(); - expect(renderResult.container).toMatchSnapshot(); + expect(renderResult).toMatchSnapshot(); }); it("should show an error if there is a schemaError", async () => { @@ -68,7 +68,7 @@ describe("ConnectionReplicationTab", () => { await act(async () => { renderResult.queryByText("Refresh source schema")?.click(); }); - expect(renderResult.container).toMatchSnapshot(); + expect(renderResult).toMatchSnapshot(); }); it("should show loading if the schema is refreshing", async () => { diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/__snapshots__/ConnectionReplicationTab.test.tsx.snap b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/__snapshots__/ConnectionReplicationTab.test.tsx.snap index cbe0bbfc3187..39598ee8fa73 100644 --- a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/__snapshots__/ConnectionReplicationTab.test.tsx.snap +++ b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/__snapshots__/ConnectionReplicationTab.test.tsx.snap @@ -1,209 +1,87 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`ConnectionReplicationTab should render 1`] = ` -
-
-
+
+
-
-
- Transfer -
-
-
- -
-
+ Transfer +
- -
-
-
-
-
- Manual -
-
-
- -
-
- -
-
- -
-
-
-
-
-
-
-
- Streams -
- -
-
-
- Mirror source structure + Manual
@@ -212,8 +90,8 @@ exports[`ConnectionReplicationTab should render 1`] = ` aria-expanded="false" aria-haspopup="true" aria-readonly="true" - class="css-mohuvp-dummyInput-DummyInput" - id="react-select-3-input" + class="" + id="react-select-2-input" inputmode="none" role="combobox" tabindex="0" @@ -221,11 +99,11 @@ exports[`ConnectionReplicationTab should render 1`] = ` />
- +
+
+
-
+ Streams + +
-
+
+
+ +
- Add a prefix to stream names (ex. “airbyte_” causes “projects” => “airbyte_projects”) - - - +
+
+
+
+ Mirror source structure +
+
+
+ +
+
+ +
+
+ +
+
-
+
- +
+ +
+
+
+
+ +
-
-
-
- Activate the streams you want to sync -
- -
-
-
- + + Refresh source schema +
+
-
-
- -
-
-
- Sync +
- Source
+ +
+
+
+ Sync +
+
+ Source
- - - + + + +
-
-
-
- Sync mode
+
+ Sync mode
- - - + + + +
-
-
- Cursor field
+ Cursor field
- - - + + + +
-
-
- Primary key
+ Primary key
- - - + + + +
-
-
- Destination
+ Destination
- - - + + + +
+
-
-
-
- Namespace -
-
- Stream name -
-
- Source | Destination -
-
-
-
- Namespace -
-
- Stream name +
+ Namespace +
+
+ Stream name +
+
+ Source | Destination +
+
+
+
+ Namespace +
+
+ Stream name +
-
-
- -
-
- - - -
-
- No namespace +
- pokemon -
-
+ +
+
- + class="" + > + No namespace + +
+
+ pokemon +
+
+ +
-
- Full refresh -
- | -
-
- Append +
+ Full refresh +
+
+ | +
+
+ Append +
+
- -
-
-
-
-
-
- '<source schema> -
-
- pokemon +
+
+
+ '<source schema> +
+
+ pokemon +
@@ -749,88 +751,90 @@ exports[`ConnectionReplicationTab should render 1`] = `
-
-
- - +
- +
+ Save changes +
+ +
-
- + +
-
+ `; exports[`ConnectionReplicationTab should show an error if there is a schemaError 1`] = ` -
-
+ +
- -
-

- Failed to fetch schema. Please try again -

- +

+ Failed to fetch schema. Please try again +

+ +
-
+ `; diff --git a/airbyte-webapp/src/views/Connector/ServiceForm/components/Controls/ConnectorServiceTypeControl.tsx b/airbyte-webapp/src/views/Connector/ServiceForm/components/Controls/ConnectorServiceTypeControl.tsx index 3fe8921b2db1..9b8c3ebd7e16 100644 --- a/airbyte-webapp/src/views/Connector/ServiceForm/components/Controls/ConnectorServiceTypeControl.tsx +++ b/airbyte-webapp/src/views/Connector/ServiceForm/components/Controls/ConnectorServiceTypeControl.tsx @@ -130,7 +130,12 @@ const StageLabel: React.FC<{ releaseStage?: ReleaseStage }> = ({ releaseStage }) const Option: React.FC = (props) => { return ( - + {props.data.img || null}