fix: edit connector flow and cards for delegate selector (#10338)

* 15c3bc fix: edit connector flow and cards for delegate selector

Author: shaurya-harness

apps/design-system/src/subjects/views/connectors/connector-details.tsx

@@ -65,6 +65,7 @@ const ConnectorsDetailsPageWrapper = (): JSX.Element => {
       connectorDetails={connectorDetails}
       onTest={noop}
       onDelete={noop}
+      onEdit={noop}
       toConnectorsList={() => '/connectors'}
     >
       <Tabs.Content className="mt-9" value={ConnectorDetailsTabsKeys.CONFIGURATION}>

packages/ui/locales/en/views.json

@@ -381,7 +381,6 @@
     "RequireMinDefaultReviewers": "Require a minimum number of default reviewers",
     "RequireMinDefaultReviewersDescription": "Require approval on pull requests from a minimum number of default reviewers",
     "newRule": "New branch rule",
-    "deleteConnector": "Delete Connector",
     "deleteSecret": "Delete Secret",
     "status": "Status",
     "branchCreated": "Branch created",
@@ -404,7 +403,8 @@
     "connectorId": "Connector ID",
     "success": "Success",
     "failure": "Failed",
-    "delete": "Delete",
+    "editConnector": "Edit Connector",
+    "deleteConnector": "Delete Connector",
     "configuration": "Configuration",
     "references": "References",
     "activityHistory": "Activity history",
@@ -414,6 +414,7 @@
     "id": "Connector ID",
     "connectivityStatus": "Connectivity status",
     "updated": "Last updated",
+    "delete": "Delete",
     "filterOptions": {
       "statusOption": {
         "success": "Success",
@@ -517,12 +518,12 @@
     "useAnyDelegate": "Use any available delegate",
     "delegateTags": "Delegate with tags",
     "useDelegateTags": "Use delegate with following tags",
-    "noDelegatesInstalled": "Haven't installed a delegate yet?",
-    "installDelegate": "Install delegate",
     "enterTags": "Enter tags",
     "testDelegate": "Test Delegate connectivity",
     "delegateMatches": "Matches: ",
-    "connectDelegates": "Connect "
+    "connectDelegates": "Connect ",
+    "noDelegatesInstalled": "Haven't installed a delegate yet?",
+    "installDelegate": "Install delegate"
   },
   "createProject": {
     "backButton": "Back",

packages/ui/locales/fr/views.json

@@ -394,7 +394,8 @@
     "connectorId": "Connector ID",
     "success": "Succès",
     "failure": "Échec",
-    "delete": "Supprimer",
+    "editConnector": "modifier connecteur",
+    "deleteConnector": "supprimer connecteur",
     "configuration": "Configuration",
     "references": "Références",
     "activityHistory": "Historique des activités",
@@ -404,6 +405,7 @@
     "id": "ID du connecteur",
     "connectivityStatus": "État de la connexion",
     "updated": "Dernière mise à jour",
+    "delete": "Supprimer",
     "filterOptions": {
       "statusOption": {
         "success": "Succès",
@@ -507,12 +509,12 @@
     "useAnyDelegate": "Use any available delegate",
     "delegateTags": "Delegate with tags",
     "useDelegateTags": "Use delegate with following tags",
-    "noDelegatesInstalled": "Haven't installed a delegate yet?",
-    "installDelegate": "Install Delegate",
     "enterTags": "Enter tags",
     "testDelegate": "Test Delegate connectivity",
     "delegateMatches": "Matches:",
-    "connectDelegates": "Connect "
+    "connectDelegates": "Connect ",
+    "noDelegatesInstalled": "Haven't installed a delegate yet?",
+    "installDelegate": "Install Delegate"
   },
   "createProject": {
     "backButton": "Retour",

packages/ui/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@harnessio/ui",
   "description": "Harness Canary UI component library",
-  "version": "0.0.106",
+  "version": "0.0.107",
   "private": false,
   "type": "module",
   "main": "./dist/index.js",

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

@@ -10,6 +10,7 @@ const ConnectorDetailsHeader: FC<ConnectorDetailsHeaderProps> = ({
   connectorDetails,
   onTest,
   onDelete,
+  onEdit,
   toConnectorsList
 }) => {
   const { createdAt, lastModifiedAt, lastTestedAt, lastConnectedAt, status, type } = connectorDetails
@@ -89,9 +90,14 @@ const ConnectorDetailsHeader: FC<ConnectorDetailsHeaderProps> = ({
           <Button onClick={() => onTest(connectorDetails.identifier)}>Test Connection</Button>
           <MoreActionsTooltip
             actions={[
+              {
+                isDanger: false,
+                title: t('views:connectors.editConnector', 'Edit connector'),
+                onClick: () => onEdit()
+              },
               {
                 isDanger: true,
-                title: t('views:connectors.delete', 'Delete connector'),
+                title: t('views:connectors.deleteConnector', 'Delete connector'),
                 onClick: () => onDelete(connectorDetails.identifier)
               }
             ]}

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

@@ -11,6 +11,7 @@ const ConnectorDetailsLayout = ({
   connectorDetails,
   onTest,
   onDelete,
+  onEdit,
   children,
   toConnectorsList
 }: ConnectorDetailsLayoutProps) => {
@@ -28,6 +29,7 @@ const ConnectorDetailsLayout = ({
             connectorDetails={connectorDetails}
             onTest={onTest}
             onDelete={onDelete}
+            onEdit={onEdit}
             toConnectorsList={toConnectorsList}
           />
           <Tabs.Root

packages/ui/src/views/connectors/connector-details/types.ts

@@ -93,6 +93,7 @@ export interface ConnectorDetailsLayoutProps {
   connectorDetails: ConnectorDetailsItem
   onTest: (connectorId: string) => void
   onDelete: (connectorId: string) => void
+  onEdit: () => void
   children: React.ReactNode
   toConnectorsList?: () => string
 }
@@ -116,6 +117,7 @@ export interface ConnectorDetailsHeaderProps {
   connectorDetails: ConnectorDetailsItem
   onTest: (connectorId: string) => void
   onDelete: (connectorId: string) => void
+  onEdit: () => void
   toConnectorsList?: () => string
 }
 

packages/ui/src/views/delegates/delegate-selector/delegate-selector-form.tsx

@@ -5,20 +5,20 @@ import {
   Alert,
   Button,
   ButtonLayout,
+  CardSelect,
   Drawer,
   EntityFormLayout,
   Fieldset,
   FormInput,
   FormSeparator,
   FormWrapper,
-  Link,
   Spacer,
   Text
 } from '@/components'
 import { useTranslation } from '@/context'
 import { DelegateConnectivityList, DelegateItem } from '@/views'
 import { zodResolver } from '@hookform/resolvers/zod'
-import { RadioSelect, RadioSelectOption } from '@views/components/RadioSelect'
+import { RadioSelectOption } from '@views/components/RadioSelect'
 import { z } from 'zod'
 
 const componentsMap: Record<
@@ -158,23 +158,22 @@ export const DelegateSelectorForm: FC<DelegateSelectorFormProps> = ({
   return (
     <>
       <Body {...bodyProps}>
-        <div className="flex">
-          {t('views:delegates.noDelegatesInstalled', `Haven't installed a delegate yet?`)}
-          {/* TODO: Design system : Update Attachment icon */}
-          <Link className="ml-1 flex flex-row items-center" to="#" suffixIcon="supply-chain">
-            {t('views:delegates.installDelegate', 'Install Delegate')}
-          </Link>
-        </div>
         <Spacer size={5} />
         <FormWrapper {...formMethods} className="flex h-full flex-col" onSubmit={handleSubmit(onSubmit)}>
           <Fieldset className="mb-0">
-            <RadioSelect
-              id="type"
+            <CardSelect.Root
+              type="single"
               {...register('type')}
-              options={options}
               value={delegateType}
-              onValueChange={value => setValue('type', value)}
-            />
+              onValueChange={(value: unknown) => setValue('type', value as DelegateSelectionTypes)}
+            >
+              {options.map(option => (
+                <CardSelect.Item value={option.value} key={option.value?.toString()} disabled={option.disabled}>
+                  <CardSelect.Title>{option.title}</CardSelect.Title>
+                  {option.description && <CardSelect.Description>{option.description}</CardSelect.Description>}
+                </CardSelect.Item>
+              ))}
+            </CardSelect.Root>
           </Fieldset>
 
           {apiError && (