Address issue with icon in onboarding (#3437)

airbytehq · May 17, 2021 · 2e35fa4 · 2e35fa4
1 parent 5f4485a
commit 2e35fa4
Show file tree

Hide file tree

Showing 21 changed files with 118 additions and 136 deletions.
diff --git a/airbyte-webapp/src/components/DropDown/DropDown.tsx b/airbyte-webapp/src/components/DropDown/DropDown.tsx
@@ -216,8 +216,8 @@ const DropDown: React.FC<DropdownProps> = (props) => {
           <ValueInput item={item} />
         )
       }
-      itemComponent={(item) => (
-        <ListItem item={item} fullText={props.fullText} />
+      itemComponent={({ item }) => (
+        <ListItem {...item} item={item} fullText={props.fullText} />
       )}
       onSelect={props.onSelect}
       // @ts-ignore wrong typing

diff --git a/airbyte-webapp/src/components/DropDown/components/ListItem.tsx b/airbyte-webapp/src/components/DropDown/components/ListItem.tsx
@@ -4,13 +4,10 @@ import styled from "styled-components";
 import Text from "./Text";
 
 export type IProps = {
-  item: {
-    disabled: boolean;
-    index: number;
-    item: IDataItem;
-  } & IDataItem;
+  disabled: boolean;
+  index: number;
   fullText?: boolean;
-};
+} & IDataItem;
 
 export type IDataItem = {
   text: string;
@@ -29,17 +26,20 @@ const ItemView = styled.div`
   align-items: center;
 `;
 
-const ListItem: React.FC<IProps> = ({ item, fullText }) => {
+const ListItem: React.FC<IProps> = ({
+  value,
+  primary,
+  secondary,
+  text,
+  img,
+  fullText,
+}) => {
   return (
-    <ItemView data-id={item.value}>
-      <Text
-        primary={item.primary}
-        secondary={item.secondary}
-        fullText={fullText}
-      >
-        {item.text}
+    <ItemView data-id={value}>
+      <Text primary={primary} secondary={secondary} fullText={fullText}>
+        {text}
       </Text>
-      {item.item.img || null}
+      {img || null}
     </ItemView>
   );
 };

diff --git a/airbyte-webapp/src/components/ImageBlock/ImageBlock.tsx b/airbyte-webapp/src/components/ImageBlock/ImageBlock.tsx
@@ -1,6 +1,6 @@
 import styled from "styled-components";
 import React from "react";
-import { getIcon } from "../../utils/imageUtils";
+import { getIcon } from "utils/imageUtils";
 
 type IProps = {
   img?: string;
@@ -36,3 +36,4 @@ const ImageBlock: React.FC<IProps> = ({ img, className, num, small }) => (
 );
 
 export default ImageBlock;
+export { ImageBlock };
diff --git a/airbyte-webapp/src/components/ImageBlock/index.tsx b/airbyte-webapp/src/components/ImageBlock/index.tsx
@@ -1,3 +1,5 @@
 import ImageBlock from "./ImageBlock";
 
+export * from "./ImageBlock";
+
 export default ImageBlock;
diff --git a/airbyte-webapp/src/components/ServiceForm/ServiceForm.test.tsx b/airbyte-webapp/src/components/ServiceForm/ServiceForm.test.tsx
@@ -98,7 +98,7 @@ describe("Service Form", () => {
           formType="source"
           onSubmit={handleSubmit}
           specifications={schema}
-          dropDownData={[]}
+          availableServices={[]}
         />
       );
       container = renderResult.container;
@@ -199,7 +199,7 @@ describe("Service Form", () => {
           formValues={{ name: "test-name", serviceType: "test-service-type" }}
           onSubmit={(values) => (result = values)}
           specifications={schema}
-          dropDownData={[]}
+          availableServices={[]}
         />
       );
       container = renderResult.container;

diff --git a/airbyte-webapp/src/components/ServiceForm/ServiceForm.tsx b/airbyte-webapp/src/components/ServiceForm/ServiceForm.tsx
@@ -2,7 +2,7 @@ import React, { useCallback, useMemo } from "react";
 import { Formik } from "formik";
 import { JSONSchema7 } from "json-schema";
 
-import { DropDownRow } from "components";
+import { ImageBlock } from "components";
 
 import {
   useBuildForm,
@@ -27,7 +27,7 @@ type ServiceFormProps = {
   additionBottomControls?: React.ReactNode;
   errorMessage?: React.ReactNode;
   successMessage?: React.ReactNode;
-  dropDownData: Array<DropDownRow.IDataItem>;
+  availableServices: { value: string; text: string; icon: string }[];
   onDropDownSelect?: (id: string) => void;
   documentationUrl?: string;
 };
@@ -56,6 +56,15 @@ const ServiceForm: React.FC<ServiceFormProps> = (props) => {
     [isLoading, specifications]
   );
 
+  const dropDownData = useMemo(
+    () =>
+      props.availableServices.map((item) => ({
+        ...item,
+        img: <ImageBlock img={item.icon} />,
+      })),
+    [props.availableServices]
+  );
+
   const { formFields, initialValues } = useBuildForm(jsonSchema, formValues);
 
   const { uiWidgetsInfo, setUiWidgetsInfo } = useBuildUiWidgets(
@@ -101,7 +110,7 @@ const ServiceForm: React.FC<ServiceFormProps> = (props) => {
       allowChangeConnector={props.allowChangeConnector}
       isLoadingSchema={props.isLoading}
       onChangeServiceType={props.onDropDownSelect}
-      dropDownData={props.dropDownData}
+      dropDownData={dropDownData}
       documentationUrl={props.documentationUrl}
     >
       <Formik
@@ -123,9 +132,8 @@ const ServiceForm: React.FC<ServiceFormProps> = (props) => {
               }}
               formFields={formFields}
               connector={
-                props.dropDownData?.find(
-                  (item) => item.value === values.serviceType
-                )?.text
+                dropDownData?.find((item) => item.value === values.serviceType)
+                  ?.text
               }
             />
           </>

diff --git a/...yte-webapp/src/components/ServiceForm/components/Controls/ConnectorServiceTypeControl.tsx b/...yte-webapp/src/components/ServiceForm/components/Controls/ConnectorServiceTypeControl.tsx
@@ -66,7 +66,7 @@ const ConnectorServiceTypeControl: React.FC<{ property: FormBaseItem }> = ({
       {/*{field.value && includeInstruction && (*/}
       {/*  <Instruction*/}
       {/*    serviceId={field.value}*/}
-      {/*    dropDownData={dropDownData}*/}
+      {/*    availableServices={availableServices}*/}
       {/*    documentationUrl={documentationUrl}*/}
       {/*  />*/}
       {/*)}*/}

diff --git a/airbyte-webapp/src/components/Table/Table.tsx b/airbyte-webapp/src/components/Table/Table.tsx
@@ -126,31 +126,29 @@ const Table: React.FC<IProps> = ({
         {rows.map((row) => {
           prepareRow(row);
           return (
-            <>
-              <Tr
-                {...row.getRowProps()}
-                key={`table-row-${row.id}`}
-                hasClick={!!onClickRow}
-                onClick={() => onClickRow?.(row.original)}
-                erroredRows={erroredRows && !!row.original.error}
-              >
-                {
-                  // @ts-ignore needs to address proper types for table
-                  row.cells.map((cell: ICellProps, key) => {
-                    return (
-                      <Td
-                        {...cell.getCellProps()}
-                        collapse={cell.column.collapse}
-                        customWidth={cell.column.customWidth}
-                        key={`table-cell-${row.id}-${key}`}
-                      >
-                        {cell.render("Cell")}
-                      </Td>
-                    );
-                  })
-                }
-              </Tr>
-            </>
+            <Tr
+              {...row.getRowProps()}
+              key={`table-row-${row.id}`}
+              hasClick={!!onClickRow}
+              onClick={() => onClickRow?.(row.original)}
+              erroredRows={erroredRows && !!row.original.error}
+            >
+              {
+                // @ts-ignore needs to address proper types for table
+                row.cells.map((cell: ICellProps, key) => {
+                  return (
+                    <Td
+                      {...cell.getCellProps()}
+                      collapse={cell.column.collapse}
+                      customWidth={cell.column.customWidth}
+                      key={`table-cell-${row.id}-${key}`}
+                    >
+                      {cell.render("Cell")}
+                    </Td>
+                  );
+                })
+              }
+            </Tr>
           );
         })}
       </tbody>

diff --git a/airbyte-webapp/src/components/index.tsx b/airbyte-webapp/src/components/index.tsx
@@ -24,3 +24,4 @@ export * from "./ContentCard";
 export * from "./PreferencesForm";
 export * from "./DefaultLogoCatalog";
 export * from "./ContentCard";
+export * from "./ImageBlock";
diff --git a/...yte-webapp/src/pages/ConnectionPage/pages/CreationFormPage/components/DestinationForm.tsx b/...yte-webapp/src/pages/ConnectionPage/pages/CreationFormPage/components/DestinationForm.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from "react";
+import React, { useState } from "react";
 import { useResource } from "rest-hooks";
 
 import useRouter from "components/hooks/useRouterHook";
@@ -7,7 +7,7 @@ import DestinationDefinitionResource from "core/resources/DestinationDefinition"
 import useDestination from "components/hooks/services/useDestinationHook";
 
 // TODO: create separate component for source and destinations forms
-import DestinationForm from "../../../../DestinationPage/pages/CreateDestinationPage/components/DestinationForm";
+import DestinationForm from "pages/DestinationPage/pages/CreateDestinationPage/components/DestinationForm";
 import { ConnectionConfiguration } from "core/domain/connection";
 
 type IProps = {
@@ -27,16 +27,6 @@ const CreateDestinationPage: React.FC<IProps> = ({ afterSubmit }) => {
   );
   const { createDestination } = useDestination();
 
-  const destinationsDropDownData = useMemo(
-    () =>
-      destinationDefinitions.map((item) => ({
-        text: item.name,
-        value: item.destinationDefinitionId,
-        img: item.icon,
-      })),
-    [destinationDefinitions]
-  );
-
   const onSubmitDestinationForm = async (values: {
     name: string;
     serviceType: string;
@@ -70,7 +60,7 @@ const CreateDestinationPage: React.FC<IProps> = ({ afterSubmit }) => {
   return (
     <DestinationForm
       onSubmit={onSubmitDestinationForm}
-      dropDownData={destinationsDropDownData}
+      destinationDefinitions={destinationDefinitions}
       hasSuccess={successRequest}
       error={errorStatusRequest}
     />

diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/CreationFormPage/components/SourceForm.tsx b/airbyte-webapp/src/pages/ConnectionPage/pages/CreationFormPage/components/SourceForm.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from "react";
+import React, { useState } from "react";
 import { useResource } from "rest-hooks";
 
 import useRouter from "components/hooks/useRouterHook";
@@ -7,7 +7,7 @@ import SourceDefinitionResource from "core/resources/SourceDefinition";
 import useSource from "components/hooks/services/useSourceHook";
 
 // TODO: create separate component for source and destinations forms
-import SourceForm from "../../../../SourcesPage/pages/CreateSourcePage/components/SourceForm";
+import SourceForm from "pages/SourcesPage/pages/CreateSourcePage/components/SourceForm";
 import { ConnectionConfiguration } from "core/domain/connection";
 
 type IProps = {
@@ -27,16 +27,6 @@ const SourceFormComponent: React.FC<IProps> = ({ afterSubmit }) => {
   );
   const { createSource } = useSource();
 
-  const sourcesDropDownData = useMemo(
-    () =>
-      sourceDefinitions.map((item) => ({
-        text: item.name,
-        value: item.sourceDefinitionId,
-        img: item.icon,
-      })),
-    [sourceDefinitions]
-  );
-
   const onSubmitSourceStep = async (values: {
     name: string;
     serviceType: string;
@@ -67,7 +57,7 @@ const SourceFormComponent: React.FC<IProps> = ({ afterSubmit }) => {
   return (
     <SourceForm
       onSubmit={onSubmitSourceStep}
-      dropDownData={sourcesDropDownData}
+      sourceDefinitions={sourceDefinitions}
       hasSuccess={successRequest}
       error={errorStatusRequest}
     />

diff --git a/...te-webapp/src/pages/DestinationPage/pages/CreateDestinationPage/CreateDestinationPage.tsx b/...te-webapp/src/pages/DestinationPage/pages/CreateDestinationPage/CreateDestinationPage.tsx
@@ -1,18 +1,17 @@
-import React, { useMemo, useState } from "react";
+import React, { useState } from "react";
 import { FormattedMessage } from "react-intl";
 import { useResource } from "rest-hooks";
 
+import { Routes } from "../../../routes";
 import PageTitle from "components/PageTitle";
 import DestinationForm from "./components/DestinationForm";
-import { Routes } from "../../../routes";
 import useRouter from "components/hooks/useRouterHook";
 import config from "config";
 import DestinationDefinitionResource from "core/resources/DestinationDefinition";
 import useDestination from "components/hooks/services/useDestinationHook";
 import { FormPageContent } from "components/SourceAndDestinationsBlocks";
 import { JobInfo } from "core/resources/Scheduler";
 import { ConnectionConfiguration } from "core/domain/connection";
-import ImageBlock from "components/ImageBlock";
 
 const CreateDestinationPage: React.FC = () => {
   const { push } = useRouter();
@@ -30,16 +29,6 @@ const CreateDestinationPage: React.FC = () => {
   );
   const { createDestination } = useDestination();
 
-  const destinationsDropDownData = useMemo(
-    () =>
-      destinationDefinitions.map((item) => ({
-        text: item.name,
-        value: item.destinationDefinitionId,
-        img: <ImageBlock img={item.icon} />,
-      })),
-    [destinationDefinitions]
-  );
-
   const onSubmitDestinationForm = async (values: {
     name: string;
     serviceType: string;
@@ -74,7 +63,7 @@ const CreateDestinationPage: React.FC = () => {
         <DestinationForm
           afterSelectConnector={() => setErrorStatusRequest(null)}
           onSubmit={onSubmitDestinationForm}
-          dropDownData={destinationsDropDownData}
+          destinationDefinitions={destinationDefinitions}
           hasSuccess={successRequest}
           error={errorStatusRequest}
           jobInfo={errorStatusRequest?.response}