Display icons

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

@@ -8,8 +8,8 @@ import { ConnectionBlockItem } from "./components/ConnectionBlockItem";
 
 type IProps = {
   className?: string;
-  itemFrom?: { name: string; img?: string };
-  itemTo?: { name: string; img?: string };
+  itemFrom?: { name: string; icon?: string };
+  itemTo?: { name: string; icon?: string };
 };
 
 const LightContentCard = styled(ContentCard)`

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

@@ -4,7 +4,7 @@ import ImageBlock from "components/ImageBlock";
 
 type IProps = {
   name: string;
-  img?: string;
+  icon?: string;
 };
 
 const Content = styled.div`
@@ -27,11 +27,13 @@ const Name = styled.div`
   margin-left: 6px;
 `;
 
-const ConnectionBlockItem: React.FC<IProps> = (props) => (
-  <Content>
-    <ImageBlock img={props.img} />
-    <Name>{props.name}</Name>
-  </Content>
-);
+const ConnectionBlockItem: React.FC<IProps> = (props) => {
+  return (
+    <Content>
+      <ImageBlock img={props.icon} />
+      <Name>{props.name}</Name>
+    </Content>
+  );
+};
 
 export { ConnectionBlockItem };

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

@@ -3,6 +3,7 @@ import { FormattedMessage } from "react-intl";
 import styled from "styled-components";
 import { faRedoAlt } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useResource } from "rest-hooks";
 
 import LoadingSchema from "components/LoadingSchema";
 import ContentCard from "components/ContentCard";
@@ -23,6 +24,8 @@ import { SyncSchema } from "core/domain/catalog";
 import useConnection from "components/hooks/services/useConnectionHook";
 import { useDiscoverSchema } from "components/hooks/services/useSchemaHook";
 import { useDestinationDefinitionSpecificationLoad } from "components/hooks/services/useDestinationHook";
+import SourceDefinitionResource from "core/resources/SourceDefinition";
+import DestinationDefinitionResource from "core/resources/DestinationDefinition";
 
 const SkipButton = styled.div`
   margin-top: 6px;
@@ -60,10 +63,20 @@ const CreateConnectionContent: React.FC<IProps> = ({
     onDiscoverSchema,
   } = useDiscoverSchema(source?.sourceId);
 
+  const sourceDefinition = useResource(SourceDefinitionResource.detailShape(), {
+    sourceDefinitionId: source.sourceDefinitionId,
+  });
+  const destinationDefinition = useResource(
+    DestinationDefinitionResource.detailShape(),
+    {
+      destinationDefinitionId: destination.destinationDefinitionId,
+    }
+  );
+
   const {
     isLoading: loadingDestination,
   } = useDestinationDefinitionSpecificationLoad(
-    destination.destinationDefinitionId
+    destination?.destinationDefinitionId
   );
 
   if (isLoading || loadingDestination) {
@@ -152,6 +165,8 @@ const CreateConnectionContent: React.FC<IProps> = ({
           schema={schema}
           source={source}
           destination={destination}
+          sourceIcon={sourceDefinition?.icon}
+          destinationIcon={destinationDefinition?.icon}
         />
       </Suspense>
     </ContentCard>

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

@@ -0,0 +1,16 @@
+const DefaultLogoCatalog = (): JSX.Element => (
+  <svg
+    width="18"
+    height="18"
+    viewBox="0 0 61 61"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M59.8281 46.2031L45.2969 31.5547C43.4219 29.7969 41.0781 28.8594 38.6172 28.8594C36.8594 28.8594 34.9844 29.3281 33.4609 30.3828L23.5 20.4219V11.75L8.5 0.5L1 8L12.25 23H20.8047L30.7656 33.0781C28.4219 36.7109 28.7734 41.6328 32.0547 44.9141L46.5859 59.4453C47.2891 60.1484 48.3438 60.6172 49.2812 60.6172C50.2188 60.6172 51.1562 60.1484 51.8594 59.4453L59.8281 51.4766C61.3516 50.0703 61.3516 47.6094 59.8281 46.2031ZM19.75 19.1328V19.25H14.125L5.92188 8.35156L8.85156 5.53906L19.75 13.625V19.1328ZM49.2812 56.75L34.6328 42.2188C33.5781 41.1641 32.9922 39.7578 32.9922 38.2344C32.9922 36.7109 33.5781 35.3047 34.6328 34.25C35.6875 33.1953 37.0938 32.6094 38.6172 32.6094C40.1406 32.6094 41.5469 33.1953 42.6016 34.25L57.25 48.8984L49.2812 56.75ZM8.5 51.125C8.5 52.1797 9.32031 53 10.375 53C11.3125 53 12.25 52.1797 12.25 51.125C12.25 50.1875 11.3125 49.25 10.375 49.25C9.32031 49.25 8.5 50.1875 8.5 51.125ZM33.3438 8.35156C36.0391 5.77344 39.5547 4.25 43.1875 4.25C44.0078 4.25 44.8281 4.36719 45.6484 4.48438L37.5625 12.6875L39.0859 22.4141L48.8125 23.9375L57.0156 15.8516C57.7188 20.3047 56.3125 24.875 53.1484 28.1562C52.0938 29.2109 50.9219 30.0312 49.6328 30.6172L52.3281 33.4297C53.6172 32.7266 54.6719 31.7891 55.7266 30.7344C60.1797 26.2812 61.9375 20.0703 60.4141 13.9766C60.1797 12.8047 59.2422 11.9844 58.1875 11.6328C57.0156 11.3984 55.8438 11.6328 55.0234 12.4531L47.5234 19.9531L42.3672 19.1328L41.5469 13.9766L49.0469 6.47656C49.75 5.65625 50.1016 4.48438 49.8672 3.3125C49.5156 2.25781 48.5781 1.32031 47.5234 1.08594C41.4297 -0.4375 35.2188 1.32031 30.7656 5.77344C29.2422 7.29688 28.0703 9.05469 27.25 10.9297V18.8984L29.8281 21.4766C28.6562 16.6719 29.9453 11.75 33.3438 8.35156ZM13.5391 55.3438C11.5469 57.2188 8.14844 57.2188 6.15625 55.3438C4.16406 53.2344 4.16406 49.9531 6.15625 47.9609L23.2656 30.8516L20.6875 28.2734L3.57812 45.3828C0.0625 48.7812 0.0625 54.5234 3.57812 57.9219C5.21875 59.6797 7.44531 60.5 9.78906 60.5C12.25 60.5 14.4766 59.6797 16.1172 57.9219L28.0703 45.9688C27.25 44.9141 26.6641 43.7422 26.1953 42.5703L13.5391 55.3438Z"
+      fill="#DBDAFF"
+    />
+  </svg>
+);
+
+export default DefaultLogoCatalog;

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

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

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

@@ -2,10 +2,13 @@ import React from "react";
 import styled from "styled-components";
 
 import Text from "./Text";
-import ImageBlock from "components/ImageBlock";
 
 export type IProps = {
-  item: IDataItem;
+  item: {
+    disabled: boolean;
+    index: number;
+    item: IDataItem;
+  } & IDataItem;
   fullText?: boolean;
 };
 
@@ -14,7 +17,7 @@ export type IDataItem = {
   value: string;
   groupValue?: string;
   groupValueText?: string;
-  img?: string;
+  img?: React.ReactNode;
   primary?: boolean;
   secondary?: boolean;
 };
@@ -36,7 +39,7 @@ const ListItem: React.FC<IProps> = ({ item, fullText }) => {
       >
         {item.text}
       </Text>
-      {item.img ? <ImageBlock img={item.img} /> : null}
+      {item.item.img || null}
     </ItemView>
   );
 };

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

@@ -3,7 +3,6 @@ import styled from "styled-components";
 
 import { IDataItem } from "./ListItem";
 import Text from "./Text";
-import ImageBlock from "components/ImageBlock";
 
 export type IProps = {
   item: IDataItem;
@@ -28,8 +27,9 @@ const GroupText = styled.div`
   line-height: 11px;
 `;
 
-const Icon = styled(ImageBlock)`
+const Icon = styled.div`
   margin-right: 6px;
+  display: inline-block;
 `;
 
 const ValueInput: React.FC<IProps> = ({ item }) => {
@@ -44,7 +44,7 @@ const ValueInput: React.FC<IProps> = ({ item }) => {
 
   return (
     <ItemView>
-      {item.img ? <Icon img={item.img} /> : null}
+      {item.img ? <Icon>{item.img}</Icon> : null}
       <Text>{item.text}</Text>
     </ItemView>
   );

airbyte-webapp/src/components/EntityTable/ConnectionTable.tsx

@@ -107,6 +107,7 @@ const ConnectionTable: React.FC<IProps> = ({
             enabled={row.original.enabled}
             status={row.original.lastSyncStatus}
             icon={entity === "connection"}
+            img={row.original.entityIcon}
           />
         ),
       },
@@ -127,7 +128,11 @@ const ConnectionTable: React.FC<IProps> = ({
         ),
         accessor: "connectorName",
         Cell: ({ cell, row }: CellProps<ITableDataItem>) => (
-          <ConnectorCell value={cell.value} enabled={row.original.enabled} />
+          <ConnectorCell
+            value={cell.value}
+            enabled={row.original.enabled}
+            img={row.original.connectorIcon}
+          />
         ),
       },
 

airbyte-webapp/src/components/EntityTable/ImplementationTable.tsx

@@ -42,7 +42,11 @@ const ImplementationTable: React.FC<IProps> = ({
         Header: <FormattedMessage id="tables.connector" />,
         accessor: "connectorName",
         Cell: ({ cell, row }: CellProps<EntityTableDataItem>) => (
-          <ConnectorCell value={cell.value} enabled={row.original.enabled} />
+          <ConnectorCell
+            value={cell.value}
+            enabled={row.original.enabled}
+            img={row.original.connectorIcon}
+          />
         ),
       },
       {

airbyte-webapp/src/components/EntityTable/components/ConnectorCell.tsx

@@ -6,6 +6,7 @@ import ImageBlock from "components/ImageBlock";
 type IProps = {
   value: string;
   enabled?: boolean;
+  img?: string;
 };
 
 const Content = styled.div<{ enabled?: boolean }>`
@@ -19,10 +20,10 @@ const Image = styled(ImageBlock)`
   margin-right: 6px;
 `;
 
-const ConnectorCell: React.FC<IProps> = ({ value, enabled }) => {
+const ConnectorCell: React.FC<IProps> = ({ value, enabled, img }) => {
   return (
     <Content enabled={enabled}>
-      <Image small />
+      <Image small img={img} />
       {value}
     </Content>
   );

airbyte-webapp/src/components/EntityTable/components/NameCell.tsx

@@ -11,6 +11,7 @@ type IProps = {
   enabled?: boolean;
   status?: string | null;
   icon?: boolean;
+  img?: string;
 };
 
 const Content = styled.div`
@@ -37,7 +38,7 @@ const Image = styled(ImageBlock)`
   margin-right: 6px;
 `;
 
-const NameCell: React.FC<IProps> = ({ value, enabled, status, icon }) => {
+const NameCell: React.FC<IProps> = ({ value, enabled, status, icon, img }) => {
   const formatMessage = useIntl().formatMessage;
   const title =
     status === Status.EMPTY
@@ -68,7 +69,7 @@ const NameCell: React.FC<IProps> = ({ value, enabled, status, icon }) => {
       ) : (
         <Space />
       )}
-      {icon && <Image small />}
+      {icon && <Image small img={img} />}
       <Name enabled={enabled}>{value}</Name>
     </Content>
   );

airbyte-webapp/src/components/EntityTable/types.ts

@@ -12,6 +12,7 @@ type EntityTableDataItem = {
   }[];
   enabled: boolean;
   lastSync?: number | null;
+  connectorIcon?: string;
 };
 
 type ITableDataItem = {
@@ -24,6 +25,8 @@ type ITableDataItem = {
   lastSync?: number | null;
   schedule: ScheduleProperties | null;
   lastSyncStatus: string | null;
+  connectorIcon?: string;
+  entityIcon?: string;
 };
 
 enum Status {

airbyte-webapp/src/components/EntityTable/utils.tsx

@@ -7,12 +7,20 @@ import {
   EntityTableDataItem,
   Status as ConnectionStatus,
 } from "./types";
+import { SourceDefinition } from "../../core/resources/SourceDefinition";
+import { DestinationDefinition } from "../../core/resources/DestinationDefinition";
 
 // TODO: types in next methods look a bit ugly
 export function getEntityTableData<
   S extends "source" | "destination",
-  SoD extends S extends "source" ? Source : Destination
->(entities: SoD[], connections: Connection[], type: S): EntityTableDataItem[] {
+  SoD extends S extends "source" ? Source : Destination,
+  Def extends S extends "source" ? SourceDefinition : DestinationDefinition
+>(
+  entities: SoD[],
+  connections: Connection[],
+  definitions: Def[],
+  type: S
+): EntityTableDataItem[] {
   const connectType = type === "source" ? "destination" : "source";
 
   const mappedEntities = entities.map((entityItem) => {
@@ -28,12 +36,21 @@ export function getEntityTableData<
         entitySoDId
     );
 
+    const definitionId = `${type}DefinitionId` as keyof Def;
+    const entityDefinitionId = entityItem[`${type}DefinitionId` as keyof SoD];
+
+    const definition = definitions.find(
+      // @ts-ignore
+      (def) => def[definitionId] === entityDefinitionId
+    );
+
     if (!entityConnections.length) {
       return {
         entityId: entitySoDId,
         entityName: entityItem.name,
         enabled: true,
         connectorName: entitySoDName,
+        connectorIcon: definition?.icon,
         lastSync: null,
         connectEntities: [],
       };
@@ -63,6 +80,7 @@ export function getEntityTableData<
       connectorName: entitySoDName,
       lastSync: sortBySync?.[0].latestSyncJobCreatedAt,
       connectEntities: connectEntities,
+      connectorIcon: definition?.icon,
     };
   });
 
@@ -71,31 +89,47 @@ export function getEntityTableData<
 
 export const getConnectionTableData = (
   connections: Connection[],
+  sourceDefinitions: SourceDefinition[],
+  destinationDefinitions: DestinationDefinition[],
   type: "source" | "destination" | "connection"
 ): ITableDataItem[] => {
   const connectType = type === "source" ? "destination" : "source";
 
-  return connections.map((connection) => ({
-    connectionId: connection.connectionId,
-    entityName:
-      type === "connection"
-        ? `${connection.source?.sourceName} - ${connection.source?.name}`
-        : connection[connectType]?.name || "",
-    connectorName:
-      type === "connection"
-        ? `${connection.destination?.destinationName} - ${connection.destination?.name}`
-        : // @ts-ignore conditional types are not supported here
-          connection[connectType]?.[`${connectType}Name`] || "",
-    lastSync: connection.latestSyncJobCreatedAt,
-    enabled: connection.status === ConnectionStatus.ACTIVE,
-    schedule: connection.schedule,
-    status: connection.status,
-    isSyncing: connection.isSyncing,
-    lastSyncStatus: getConnectionSyncStatus(
-      connection.status,
-      connection.latestSyncJobStatus
-    ),
-  }));
+  return connections.map((connection) => {
+    const sourceIcon = sourceDefinitions.find(
+      (definition) =>
+        definition.sourceDefinitionId === connection.source.sourceDefinitionId
+    )?.icon;
+    const destinationIcon = destinationDefinitions.find(
+      (definition) =>
+        definition.destinationDefinitionId ===
+        connection.destination.destinationDefinitionId
+    )?.icon;
+
+    return {
+      connectionId: connection.connectionId,
+      entityName:
+        type === "connection"
+          ? `${connection.source?.sourceName} - ${connection.source?.name}`
+          : connection[connectType]?.name || "",
+      connectorName:
+        type === "connection"
+          ? `${connection.destination?.destinationName} - ${connection.destination?.name}`
+          : // @ts-ignore conditional types are not supported here
+            connection[connectType]?.[`${connectType}Name`] || "",
+      lastSync: connection.latestSyncJobCreatedAt,
+      enabled: connection.status === ConnectionStatus.ACTIVE,
+      schedule: connection.schedule,
+      status: connection.status,
+      isSyncing: connection.isSyncing,
+      lastSyncStatus: getConnectionSyncStatus(
+        connection.status,
+        connection.latestSyncJobStatus
+      ),
+      connectorIcon: type === "destination" ? sourceIcon : destinationIcon,
+      entityIcon: type === "destination" ? destinationIcon : sourceIcon,
+    };
+  });
 };
 
 export const getConnectionSyncStatus = (