update connection settings (#2614)

airbyte-e2e-testing/cypress/integration/connection.spec.js

@@ -17,7 +17,7 @@ describe("Connection main actions", () => {
 
     cy.get("div[data-id='settings-step']").click();
 
-    cy.get("div[role=combobox]").last().click();
+    cy.get("div[data-test-id='frequency']").click();
     cy.get("div[data-id='5m']").click();
     cy.submit();
     cy.wait("@updateConnection");

airbyte-e2e-testing/cypress/support/commands/connection.js

@@ -16,7 +16,7 @@ Cypress.Commands.add("createTestConnection", (sourceName, destinationName) => {
 
   cy.wait("@discoverSchema");
 
-  cy.get("div[role=combobox]").last().click();
+  cy.get("div[data-test-id='frequency']").click();
   cy.get("div[data-id='manual']").click();
   cy.submit();
 

airbyte-webapp/src/components/CheckBox/CheckBox.tsx

@@ -26,20 +26,13 @@ const CheckBoxContainer = styled.label`
 
 const CheckBox: React.FC<React.InputHTMLAttributes<HTMLInputElement>> = (
   props
-) => {
-  return (
-    <CheckBoxContainer
-      onClick={(event: React.SyntheticEvent) => event.stopPropagation()}
-    >
-      <CheckBoxInput
-        {...props}
-        type="checkbox"
-        checked={props.checked}
-        onChange={props.onChange}
-      />
-      {props.checked && <FontAwesomeIcon icon={faCheck} />}
-    </CheckBoxContainer>
-  );
-};
+) => (
+  <CheckBoxContainer
+    onClick={(event: React.SyntheticEvent) => event.stopPropagation()}
+  >
+    <CheckBoxInput {...props} type="checkbox" />
+    {props.checked && <FontAwesomeIcon icon={faCheck} />}
+  </CheckBoxContainer>
+);
 
 export default CheckBox;

airbyte-webapp/src/components/ConnectionBlock/ConnectionBlock.tsx

@@ -4,7 +4,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faChevronRight } from "@fortawesome/free-solid-svg-icons";
 
 import ContentCard from "../ContentCard";
-import Item from "./components/Item";
+import { ConnectionBlockItem } from "./components/ConnectionBlockItem";
 
 type IProps = {
   className?: string;
@@ -34,9 +34,13 @@ const ExtraBlock = styled.div`
 
 const ConnectionBlock: React.FC<IProps> = (props) => (
   <LightContentCard className={props.className}>
-    {props.itemFrom ? <Item {...props.itemFrom} /> : <ExtraBlock />}
+    {props.itemFrom ? (
+      <ConnectionBlockItem {...props.itemFrom} />
+    ) : (
+      <ExtraBlock />
+    )}
     <Arrow icon={faChevronRight} />
-    {props.itemTo ? <Item {...props.itemTo} /> : <ExtraBlock />}
+    {props.itemTo ? <ConnectionBlockItem {...props.itemTo} /> : <ExtraBlock />}
   </LightContentCard>
 );
 

airbyte-webapp/src/components/ConnectionBlock/components/Item.tsx → airbyte-webapp/src/components/ConnectionBlock/components/ConnectionBlockItem.tsx

@@ -27,11 +27,11 @@ const Name = styled.div`
   margin-left: 6px;
 `;
 
-const Item: React.FC<IProps> = (props) => (
+const ConnectionBlockItem: React.FC<IProps> = (props) => (
   <Content>
     <ImageBlock img={props.img} />
     <Name>{props.name}</Name>
   </Content>
 );
 
-export default Item;
+export { ConnectionBlockItem };

airbyte-webapp/src/components/CreateConnectionContent/CreateConnectionContent.tsx

@@ -5,7 +5,7 @@ import styled from "styled-components";
 import LoadingSchema from "components/LoadingSchema";
 import ContentCard from "components/ContentCard";
 import { JobsLogItem } from "components/JobItem";
-import FrequencyForm from "components/FrequencyForm";
+import FrequencyForm from "views/Connector/FrequencyForm";
 import { createFormErrorMessage } from "utils/errorStatusMessage";
 
 import TryAfterErrorBlock from "./components/TryAfterErrorBlock";
@@ -125,6 +125,8 @@ const CreateConnectionContent: React.FC<IProps> = ({
           onSubmit={onSubmitConnectionStep}
           errorMessage={createFormErrorMessage({ status: errorStatusRequest })}
           schema={schema}
+          source={source}
+          destination={destination}
         />
       </Suspense>
     </ContentCard>

airbyte-webapp/src/components/DropDown/DropDown.tsx

@@ -13,18 +13,14 @@ type DropdownProps = {
   disabled?: boolean;
   hasFilter?: boolean;
   fullText?: boolean;
-  placeholder?: string;
   filterPlaceholder?: string;
-  value?: string;
-  data: IDataItem[];
-  onSelect?: (item: IDataItem) => void;
   withButton?: boolean;
   withBorder?: boolean;
   error?: boolean;
   textButton?: string;
   className?: string;
-  groupBy?: string;
-};
+  name?: string;
+} & DropdownList.DropdownListProps;
 
 const StyledDropdownList = styled(DropdownList)<{
   disabled?: boolean;
@@ -192,6 +188,7 @@ const DropDown: React.FC<DropdownProps> = (props) => {
 
   return (
     <StyledDropdownList
+      data-test-id={props.name}
       error={props.error}
       withBorder={props.withBorder}
       containerClassName={className}

airbyte-webapp/src/components/RadioButton/RadioButton.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import styled from "styled-components";
+
+const RadioButtonInput = styled.input`
+  opacity: 0;
+  width: 0;
+  height: 0;
+  margin: 0;
+`;
+
+const Check = styled.div`
+  height: 100%;
+  width: 100%;
+  border-radius: 50%;
+  background: ${({ theme }) => theme.primaryColor};
+`;
+
+const RadioButtonContainer = styled.label`
+  height: 16px;
+  width: 16px;
+  background: ${({ theme }) => theme.greyColor20};
+  color: ${({ theme }) => theme.primaryColor};
+  text-align: center;
+  border-radius: 50%;
+  display: inline-block;
+  padding: 4px;
+  cursor: pointer;
+`;
+
+const RadioButton: React.FC<React.InputHTMLAttributes<HTMLInputElement>> = (
+  props
+) => {
+  return (
+    <RadioButtonContainer
+      className={props.className}
+      onClick={(event: React.SyntheticEvent) => event.stopPropagation()}
+    >
+      {props.checked && <Check />}
+      <RadioButtonInput
+        {...props}
+        type="radio"
+        checked={props.checked}
+        onChange={props.onChange}
+      />
+    </RadioButtonContainer>
+  );
+};
+
+export default RadioButton;

airbyte-webapp/src/components/RadioButton/index.tsx

@@ -0,0 +1,4 @@
+import RadioButton from "./RadioButton";
+
+export default RadioButton;
+export { RadioButton };

airbyte-webapp/src/components/SideBar/SideBar.tsx

@@ -127,7 +127,7 @@ const SideBar: React.FC = () => {
             <MenuItem to={Routes.Destination} activeClassName="active">
               <Destination />
               <Text>
-                <FormattedMessage id="sidebar.destination" />
+                <FormattedMessage id="sidebar.destinations" />
               </Text>
             </MenuItem>
           </li>

airbyte-webapp/src/components/SourceAndDestinationsBlocks/FormPageContent.tsx

@@ -1,7 +1,7 @@
 import styled from "styled-components";
 
-const FormPageContent = styled.div`
-  max-width: 813px;
+const FormPageContent = styled.div<{ big?: boolean }>`
+  max-width: ${({ big }) => (big ? 1140 : 813)}px;
   margin: 13px auto;
 `;
 

airbyte-webapp/src/components/TreeView/TreeView.tsx

@@ -1,22 +1,13 @@
 import React, { useCallback, useMemo } from "react";
-import { FormattedMessage } from "react-intl";
-import styled from "styled-components";
 
-import { Button } from "components";
-import TreeViewRow from "./components/TreeViewRow";
+import { TreeViewSection } from "./components/TreeViewSection";
 import { SyncSchema, AirbyteStreamConfiguration } from "core/domain/catalog";
 
 type IProps = {
   schema: SyncSchema;
   onChangeSchema: (schema: SyncSchema) => void;
 };
 
-const SelectButton = styled(Button)`
-  margin: 10px 17px 3px;
-  padding: 3px;
-  min-width: 90px;
-`;
-
 function compareByName<T extends { name: string }>(o1: T, o2: T): -1 | 0 | 1 {
   if (o1.name === o2.name) {
     return 0;
@@ -41,24 +32,6 @@ const TreeView: React.FC<IProps> = ({ schema, onChangeSchema }) => {
     [schema, onChangeSchema]
   );
 
-  const hasSelectedItem = useMemo(
-    () => schema.streams.some((streamNode) => streamNode.config.selected),
-    [schema.streams]
-  );
-
-  const onCheckAll = useCallback(() => {
-    const allSelectedValues = !hasSelectedItem;
-
-    const newSchema = schema.streams.map((streamNode) => {
-      return {
-        ...streamNode,
-        config: { ...streamNode.config, selected: allSelectedValues },
-      };
-    });
-
-    onChangeSchema({ streams: newSchema });
-  }, [hasSelectedItem, onChangeSchema, schema.streams]);
-
   // TODO: there is no need to sort schema everytime. We need to do it only once as streams[].stream is const
   const sortedSchema = useMemo(
     () => ({
@@ -70,22 +43,15 @@ const TreeView: React.FC<IProps> = ({ schema, onChangeSchema }) => {
   );
 
   return (
-    <div>
-      <SelectButton onClick={onCheckAll} type="button">
-        {hasSelectedItem ? (
-          <FormattedMessage id="sources.schemaUnselectAll" />
-        ) : (
-          <FormattedMessage id="sources.schemaSelectAll" />
-        )}
-      </SelectButton>
+    <>
       {sortedSchema.streams.map((streamNode) => (
-        <TreeViewRow
+        <TreeViewSection
           key={streamNode.stream.name}
           streamNode={streamNode}
           updateItem={onUpdateItem}
         />
       ))}
-    </div>
+    </>
   );
 };