Remove background/shadow from connector icon (#12142)

* Remove background/shadow from connector icon * Convert type to interface
airbytehq · Apr 20, 2022 · 13e9230 · 13e9230
1 parent 7023fbd
commit 13e9230
Show file tree

Hide file tree

Showing 11 changed files with 53 additions and 25 deletions.
diff --git a/airbyte-webapp/src/components/ConnectionBlock/components/ConnectionBlockItem.tsx b/airbyte-webapp/src/components/ConnectionBlock/components/ConnectionBlockItem.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 
-import ImageBlock from "components/ImageBlock";
+import { ConnectorIcon } from "components/ConnectorIcon";
 
 type IProps = {
   name: string;
@@ -31,7 +31,7 @@ const Name = styled.div`
 const ConnectionBlockItem: React.FC<IProps> = (props) => {
   return (
     <Content>
-      <ImageBlock img={props.icon} />
+      <ConnectorIcon icon={props.icon} />
       <Name>{props.name}</Name>
     </Content>
   );

diff --git a/airbyte-webapp/src/components/ConnectorIcon/ConnectorIcon.tsx b/airbyte-webapp/src/components/ConnectorIcon/ConnectorIcon.tsx
@@ -0,0 +1,23 @@
+import styled from "styled-components";
+import React from "react";
+
+import { getIcon } from "utils/imageUtils";
+
+interface Props {
+  icon?: string;
+  className?: string;
+  small?: boolean;
+}
+
+export const Content = styled.div<{ $small?: boolean }>`
+  height: 25px;
+  width: 25px;
+  border-radius: ${({ $small }) => ($small ? 0 : 50)}%;
+  overflow: hidden;
+`;
+
+export const ConnectorIcon: React.FC<Props> = ({ icon, className, small }) => (
+  <Content className={className} $small={small} aria-hidden="true">
+    {getIcon(icon)}
+  </Content>
+);
diff --git a/airbyte-webapp/src/components/ConnectorIcon/index.ts b/airbyte-webapp/src/components/ConnectorIcon/index.ts
@@ -0,0 +1 @@
+export { ConnectorIcon } from "./ConnectorIcon";
diff --git a/airbyte-webapp/src/components/EntityTable/components/ConnectorCell.tsx b/airbyte-webapp/src/components/EntityTable/components/ConnectorCell.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 
-import ImageBlock from "components/ImageBlock";
+import { ConnectorIcon } from "components/ConnectorIcon";
 
 type IProps = {
   value: string;
@@ -16,14 +16,14 @@ const Content = styled.div<{ enabled?: boolean }>`
   font-weight: 500;
 `;
 
-const Image = styled(ImageBlock)`
+const Image = styled(ConnectorIcon)`
   margin-right: 6px;
 `;
 
 const ConnectorCell: React.FC<IProps> = ({ value, enabled, img }) => {
   return (
     <Content enabled={enabled}>
-      <Image small img={img} />
+      <Image small icon={img} />
       {value}
     </Content>
   );

diff --git a/airbyte-webapp/src/components/EntityTable/components/NameCell.tsx b/airbyte-webapp/src/components/EntityTable/components/NameCell.tsx
@@ -3,8 +3,8 @@ import styled from "styled-components";
 import { useIntl } from "react-intl";
 
 import StatusIcon from "components/StatusIcon";
-import ImageBlock from "components/ImageBlock";
 import { StatusIconStatus } from "components/StatusIcon/StatusIcon";
+import { ConnectorIcon } from "components/ConnectorIcon";
 
 import { Status } from "../types";
 
@@ -36,7 +36,7 @@ const Space = styled.div`
   opacity: 0;
 `;
 
-const Image = styled(ImageBlock)`
+const Image = styled(ConnectorIcon)`
   margin-right: 6px;
 `;
 
@@ -73,7 +73,7 @@ const NameCell: React.FC<IProps> = ({ value, enabled, status, icon, img }) => {
   return (
     <Content>
       {status ? <StatusIcon title={title} status={statusIconStatus} /> : <Space />}
-      {icon && <Image small img={img} />}
+      {icon && <Image small icon={img} />}
       <Name enabled={enabled}>{value}</Name>
     </Content>
   );

diff --git a/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/ConnectionCell.tsx b/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/ConnectionCell.tsx
@@ -3,7 +3,7 @@ import styled from "styled-components";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
 
-import ImageBlock from "components/ImageBlock";
+import { ConnectorIcon } from "components/ConnectorIcon";
 
 type ConnectionCellProps = {
   sourceDefinitionName: string;
@@ -12,7 +12,7 @@ type ConnectionCellProps = {
   destinationIcon?: string;
 };
 
-const Icon = styled(ImageBlock)`
+const Icon = styled(ConnectorIcon)`
   margin-right: 12px;
   display: inline-block;
   vertical-align: middle;
@@ -40,12 +40,12 @@ const ConnectionCell: React.FC<ConnectionCellProps> = ({
   return (
     <>
       <Connector>
-        <Icon small img={sourceIcon} />
+        <Icon small icon={sourceIcon} />
         {sourceDefinitionName}
       </Connector>
       <Connector>
         <Arrow icon={faArrowRight} />
-        <Icon small img={destinationIcon} />
+        <Icon small icon={destinationIcon} />
         {destinationDefinitionName}
       </Connector>
     </>

diff --git a/...te-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/StatusMainInfo.tsx b/...te-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/StatusMainInfo.tsx
@@ -2,9 +2,10 @@ import React from "react";
 import { FormattedMessage } from "react-intl";
 import styled from "styled-components";
 
-import { ContentCard, ImageBlock } from "components";
+import { ContentCard } from "components";
 import { Header, Row, Cell } from "components/SimpleTableComponents";
 import { ReleaseStageBadge } from "components/ReleaseStageBadge";
+import { ConnectorIcon } from "components/ConnectorIcon";
 
 import { DestinationDefinition, SourceDefinition } from "core/domain/connector";
 import { Connection } from "core/domain/connection";
@@ -16,7 +17,7 @@ const MainInfo = styled(ContentCard)`
   padding: 23px 20px 20px 23px;
 `;
 
-const Img = styled(ImageBlock)`
+const Img = styled(ConnectorIcon)`
   display: inline-block;
 `;
 
@@ -63,12 +64,12 @@ const StatusMainInfo: React.FC<IProps> = ({
       </Header>
       <Row>
         <SourceCell flex={2}>
-          <Img img={sourceDefinition?.icon} />
+          <Img icon={sourceDefinition?.icon} />
           {connection.source?.sourceName}
           <ReleaseStageBadge stage={sourceDefinition?.releaseStage} />
         </SourceCell>
         <SourceCell flex={2}>
-          <Img img={destinationDefinition?.icon} />
+          <Img icon={destinationDefinition?.icon} />
           {connection.destination?.destinationName}
           <ReleaseStageBadge stage={destinationDefinition?.releaseStage} />
         </SourceCell>

diff --git a/...-webapp/src/pages/ConnectionPage/pages/CreationFormPage/components/ExistingEntityForm.tsx b/...-webapp/src/pages/ConnectionPage/pages/CreationFormPage/components/ExistingEntityForm.tsx
@@ -6,7 +6,7 @@ import * as yup from "yup";
 
 import ContentCard from "components/ContentCard";
 import { Button, ControlLabels, DropDown } from "components";
-import ImageBlock from "components/ImageBlock";
+import { ConnectorIcon } from "components/ConnectorIcon";
 
 import { useSourceDefinitionList } from "services/connector/SourceDefinitionService";
 import { useDestinationDefinitionList } from "services/connector/DestinationDefinitionService";
@@ -56,7 +56,7 @@ const ExistingEntityForm: React.FC<IProps> = ({ type, onSubmit }) => {
         return {
           label: item.name,
           value: item.sourceId,
-          img: <ImageBlock img={sourceDef?.icon} />,
+          img: <ConnectorIcon icon={sourceDef?.icon} />,
         };
       });
     } else {
@@ -67,7 +67,7 @@ const ExistingEntityForm: React.FC<IProps> = ({ type, onSubmit }) => {
         return {
           label: item.name,
           value: item.destinationId,
-          img: <ImageBlock img={destinationDef?.icon} />,
+          img: <ConnectorIcon icon={destinationDef?.icon} />,
         };
       });
     }

diff --git a/airbyte-webapp/src/pages/DestinationPage/pages/DestinationItemPage/DestinationItemPage.tsx b/airbyte-webapp/src/pages/DestinationPage/pages/DestinationItemPage/DestinationItemPage.tsx
@@ -5,7 +5,8 @@ import Placeholder, { ResourceTypes } from "components/Placeholder";
 import Breadcrumbs from "components/Breadcrumbs";
 import { ItemTabs, StepsTypes, TableItemTitle } from "components/ConnectorBlocks";
 import HeadTitle from "components/HeadTitle";
-import { DropDownRow, ImageBlock, LoadingPage, MainPageWithScroll, PageTitle } from "components";
+import { DropDownRow, LoadingPage, MainPageWithScroll, PageTitle } from "components";
+import { ConnectorIcon } from "components/ConnectorIcon";
 
 import { getIcon } from "utils/imageUtils";
 import useRouter from "hooks/useRouter";
@@ -55,7 +56,7 @@ const DestinationItemPage: React.FC = () => {
         return {
           label: item.name,
           value: item.sourceId,
-          img: <ImageBlock img={sourceDef?.icon} />,
+          img: <ConnectorIcon icon={sourceDef?.icon} />,
         };
       }),
     [sources, sourceDefinitions]

diff --git a/airbyte-webapp/src/pages/SourcesPage/pages/SourceItemPage/SourceItemPage.tsx b/airbyte-webapp/src/pages/SourcesPage/pages/SourceItemPage/SourceItemPage.tsx
@@ -1,14 +1,15 @@
 import React, { Suspense, useMemo, useState } from "react";
 import { FormattedMessage } from "react-intl";
 
-import { DropDownRow, ImageBlock } from "components";
+import { DropDownRow } from "components";
 import PageTitle from "components/PageTitle";
 import Breadcrumbs from "components/Breadcrumbs";
 import { ItemTabs, StepsTypes, TableItemTitle } from "components/ConnectorBlocks";
 import LoadingPage from "components/LoadingPage";
 import MainPageWithScroll from "components/MainPageWithScroll";
 import HeadTitle from "components/HeadTitle";
 import Placeholder, { ResourceTypes } from "components/Placeholder";
+import { ConnectorIcon } from "components/ConnectorIcon";
 
 import { getIcon } from "utils/imageUtils";
 import useRouter from "hooks/useRouter";
@@ -55,7 +56,7 @@ const SourceItemPage: React.FC = () => {
         return {
           label: item.name,
           value: item.destinationId,
-          img: <ImageBlock img={destinationDef?.icon} />,
+          img: <ConnectorIcon icon={destinationDef?.icon} />,
         };
       }),
     [destinations, destinationDefinitions]

diff --git a/...ebapp/src/views/Connector/ServiceForm/components/Controls/ConnectorServiceTypeControl.tsx b/...ebapp/src/views/Connector/ServiceForm/components/Controls/ConnectorServiceTypeControl.tsx
@@ -5,13 +5,14 @@ import { components } from "react-select";
 import { MenuListComponentProps } from "react-select/src/components/Menu";
 import styled from "styled-components";
 
-import { ControlLabels, DropDown, DropDownRow, ImageBlock } from "components";
+import { ControlLabels, DropDown, DropDownRow } from "components";
 import { IDataItem, IProps as OptionProps, OptionView } from "components/base/DropDown/components/Option";
 import {
   IProps as SingleValueProps,
   Icon as SingleValueIcon,
   ItemView as SingleValueView,
 } from "components/base/DropDown/components/SingleValue";
+import { ConnectorIcon } from "components/ConnectorIcon";
 
 import { useCurrentWorkspace } from "hooks/services/useWorkspace";
 import { FormBaseItem } from "core/form/types";
@@ -193,7 +194,7 @@ const ConnectorServiceTypeControl: React.FC<{
         .map((item) => ({
           label: item.name,
           value: Connector.id(item),
-          img: <ImageBlock img={item.icon} />,
+          img: <ConnectorIcon icon={item.icon} />,
           releaseStage: item.releaseStage,
         }))
         .sort((a, b) => {