feat: updated icons for connectors (#10399)

* d44a0a feat: updated icons for connectors

Author: harish-viswa

packages/ui/src/views/connectors/components/ConnectorsPalleteSection.tsx

@@ -1,10 +1,10 @@
-import { IconV2, LogoV2, Text } from '@/components'
+import { IconV2, Text } from '@/components'
 import { useTranslation } from '@/context'
 import { StepsPaletteContentLayout } from '@views/unified-pipeline-studio/components/palette-drawer/components/step-palette-content-layout'
 import { StepsPaletteItemLayout } from '@views/unified-pipeline-studio/components/palette-drawer/components/step-palette-item-layout'
 
-import { ConnectorTypeToLogoNameMap } from '../connectors-list/utils'
 import { AnyConnectorDefinition } from '../types'
+import { ConnectorsLogo } from './connectors-logo'
 
 export interface ConnectorsPaletteSectionProps {
   connectors: AnyConnectorDefinition[]
@@ -20,8 +20,6 @@ export function ConnectorsPaletteSection(props: ConnectorsPaletteSectionProps) {
     <StepsPaletteContentLayout.Section>
       {connectors?.length > 0 ? (
         connectors.map(connector => {
-          const logoName = ConnectorTypeToLogoNameMap.get(connector.type)
-
           return (
             <StepsPaletteContentLayout.SectionItem key={connector.type}>
               <StepsPaletteItemLayout.Root
@@ -30,7 +28,7 @@ export function ConnectorsPaletteSection(props: ConnectorsPaletteSectionProps) {
                 }}
               >
                 <StepsPaletteItemLayout.Left className="flex items-center">
-                  {logoName ? <LogoV2 name={logoName} size="md" /> : <IconV2 name="connectors" size="lg" />}
+                  <ConnectorsLogo type={connector.type} iconSize="xl" logoSize="md" />
                 </StepsPaletteItemLayout.Left>
                 <StepsPaletteItemLayout.Right>
                   <StepsPaletteItemLayout.Header>

packages/ui/src/views/connectors/components/connectors-logo.tsx

@@ -0,0 +1,20 @@
+import { IconPropsV2, IconV2 } from '@components/icon-v2'
+import { LogoPropsV2, LogoV2 } from '@components/logo-v2'
+
+import { ConnectorTypeToIconNameMap, ConnectorTypeToLogoNameMap } from '../connectors-list/utils'
+import { ConnectorConfigType } from '../types'
+
+interface ConnectorsLogoProps {
+  type: ConnectorConfigType
+  iconSize?: IconPropsV2['size']
+  logoSize?: LogoPropsV2['size']
+}
+
+export const ConnectorsLogo = (props: ConnectorsLogoProps) => {
+  const { type, iconSize = 'lg', logoSize = 'sm' } = props
+
+  const logoName = ConnectorTypeToLogoNameMap.get(type)
+  const iconName = ConnectorTypeToIconNameMap.get(type) ?? 'connectors'
+
+  return logoName ? <LogoV2 name={logoName} size={logoSize} /> : <IconV2 name={iconName} size={iconSize} />
+}

packages/ui/src/views/connectors/connector-details/connector-details-header.tsx

@@ -1,9 +1,9 @@
 import { FC } from 'react'
 
-import { Button, IconV2, Layout, Link, LogoV2, MoreActionsTooltip, StatusBadge, Text, TimeAgoCard } from '@/components'
+import { Button, IconV2, Layout, Link, MoreActionsTooltip, StatusBadge, Text, TimeAgoCard } from '@/components'
 import { useTranslation } from '@/context'
 
-import { ConnectorTypeToLogoNameMap } from '../connectors-list/utils'
+import { ConnectorsLogo } from '../components/connectors-logo'
 import { ConnectorDetailsHeaderProps } from './types'
 
 const DATE_FORMAT_OPTIONS = {
@@ -21,7 +21,6 @@ const ConnectorDetailsHeader: FC<ConnectorDetailsHeaderProps> = ({
 }) => {
   const { createdAt, lastModifiedAt, status, type } = connectorDetails
   const { t } = useTranslation()
-  const logoName = ConnectorTypeToLogoNameMap.get(type)
 
   return (
     <Layout.Vertical className="px-8" gap="sm">
@@ -31,7 +30,7 @@ const ConnectorDetailsHeader: FC<ConnectorDetailsHeaderProps> = ({
         </Link>
       ) : null}
       <Layout.Horizontal gap="xs" align="center">
-        {logoName ? <LogoV2 name={logoName} size="lg" /> : <IconV2 name="connectors" size="lg" />}
+        <ConnectorsLogo type={type} iconSize="xl" logoSize="lg" />
         <Text as="h1" variant="heading-section">
           {connectorDetails.name}
         </Text>

packages/ui/src/views/connectors/connector-reference/connector-reference.tsx

@@ -1,10 +1,10 @@
 import { FC } from 'react'
 
-import { Alert, Button, ButtonLayout, IconV2, LogoV2, StackedList } from '@/components'
+import { Alert, Button, ButtonLayout, StackedList } from '@/components'
 import { ConnectorItem, connectorRefFilters, DirectionEnum, EntityReference, EntityRendererProps } from '@/views'
 import { cn } from '@utils/cn'
 
-import { ConnectorTypeToLogoNameMap } from '../connectors-list/utils'
+import { ConnectorsLogo } from '../components/connectors-logo'
 
 export interface ConnectorReferenceProps {
   // Data
@@ -63,20 +63,13 @@ export const ConnectorReference: FC<ConnectorReferenceProps> = ({
   // Custom entity renderer for connectors
   const renderEntity = (props: EntityRendererProps<any>) => {
     const { entity, isSelected, onSelect } = props
-    const connectorLogo = entity.connector.type ? ConnectorTypeToLogoNameMap.get(entity.connector.type) : undefined
 
     return (
       <StackedList.Item
         className={cn({ 'bg-cn-hover': isSelected })}
         paddingY="sm"
         onClick={() => onSelect(entity)}
-        thumbnail={
-          connectorLogo ? (
-            <LogoV2 name={connectorLogo} size="sm" />
-          ) : (
-            <IconV2 name="connectors" size="md" className="text-cn-3" />
-          )
-        }
+        thumbnail={<ConnectorsLogo type={entity.connector.type} iconSize="md" logoSize="sm" />}
       >
         <StackedList.Field title={entity.connector.name} description={entity.connector.description} />
       </StackedList.Item>

packages/ui/src/views/connectors/connectors-list/connectors-list.tsx

@@ -4,7 +4,6 @@ import {
   Button,
   Favorite,
   IconV2,
-  LogoV2,
   MoreActionsTooltip,
   NoData,
   Popover,
@@ -18,8 +17,9 @@ import { cn } from '@utils/cn'
 import { ExecutionState } from '@views/repo/pull-request'
 
 import { ConnectorStatusType, ConnectorTestConnectionDialog } from '../components/connector-test-connection-dialog'
+import { ConnectorsLogo } from '../components/connectors-logo'
 import { ConnectorListItem, ConnectorListProps } from './types'
-import { ConnectorDisplayNameMap, ConnectorTypeToLogoNameMap } from './utils'
+import { ConnectorDisplayNameMap } from './utils'
 
 const isStatusSuccess = (status?: string) => status?.toLowerCase() === ExecutionState.SUCCESS.toLowerCase()
 
@@ -127,8 +127,7 @@ export function ConnectorsList({
       <Table.Body>
         {connectors.map(connector => {
           const { name, identifier, type, spec, status, lastModifiedAt, createdAt, isFavorite } = connector
-          const connectorLogo = type ? ConnectorTypeToLogoNameMap.get(type) : undefined
-          const connectorType = type ? ConnectorDisplayNameMap.get(type) : ''
+          const connectorType = ConnectorDisplayNameMap.get(type)
           const connectorDetailUrl = toConnectorDetails?.({ identifier, type, spec, status, lastModifiedAt }) || ''
 
           return (
@@ -138,7 +137,7 @@ export function ConnectorsList({
               </Table.Cell>
               <Table.Cell className={CELL_MIN_WIDTH}>
                 <div className="flex w-full items-center gap-2">
-                  {connectorLogo ? <LogoV2 name={connectorLogo} size="sm" /> : <IconV2 name="connectors" size="lg" />}
+                  <ConnectorsLogo type={type} />
                   <Text truncate>{connectorType || ''}</Text>
                 </div>
               </Table.Cell>

packages/ui/src/views/connectors/connectors-list/utils.ts

@@ -1,3 +1,4 @@
+import { IconV2NamesType } from '@components/icon-v2'
 import { LogoNameMapV2 } from '@components/logo-v2'
 
 import { ConnectorConfigType } from '../types'
@@ -16,6 +17,7 @@ export const ConnectorTypeToLogoNameMap: Map<ConnectorConfigType, keyof typeof L
   ['GcpKms', 'google'],
   ['AwsKms', 'aws'],
   ['TerraformCloud', 'terraform'],
+  ['Terraform', 'terraform'],
   ['Vault', 'hashicorp'],
   ['HttpHelmRepo', 'helm'],
   ['Rancher', 'rancher'],
@@ -39,6 +41,7 @@ export const ConnectorTypeToLogoNameMap: Map<ConnectorConfigType, keyof typeof L
   ['AzureArtifacts', 'azure'],
   ['Jenkins', 'jenkins'],
   ['Bamboo', 'bamboo'],
+  ['Spot', 'spot'],
   ['PagerDuty', 'pagerduty'],
   ['JDBC', 'java'],
   ['SumoLogic', 'sumo-logic'],
@@ -48,6 +51,12 @@ export const ConnectorTypeToLogoNameMap: Map<ConnectorConfigType, keyof typeof L
   ['Confluence', 'confluence']
 ])
 
+export const ConnectorTypeToIconNameMap: Map<ConnectorConfigType, IconV2NamesType> = new Map([
+  ['Pdc', 'physical-data-center'],
+  ['CustomHealth', 'health-shield']
+  // ['ErrorTracking', 'error-tracking']
+])
+
 export const ConnectorDisplayNameMap: Map<ConnectorConfigType, string> = new Map([
   ['K8sCluster', 'Kubernetes cluster'],
   ['Git', 'Git'],