Delegate selector drawer review

apps/design-system/src/subjects/views/delegates/delegate-connectivity.tsx

@@ -1,30 +1,38 @@
+import { FC, useMemo } from 'react'
+
 import { useTranslationStore } from '@utils/viewUtils'
 import { defaultTo } from 'lodash-es'
 
 import { DelegateConnectivityList, SandboxLayout } from '@harnessio/ui/views'
 
 import mockDelegatesList from './mock-delegates-list.json'
-import { isDelegateSelected } from './utils'
 
-const DelegateConnectivityWrapper = (): JSX.Element => (
-  <SandboxLayout.Main>
-    <SandboxLayout.Content>
-      <DelegateConnectivityList
-        delegates={mockDelegatesList.map(delegate => ({
-          groupId: delegate.groupId,
-          groupName: delegate.groupName,
-          lastHeartBeat: delegate.lastHeartBeat,
-          activelyConnected: delegate.activelyConnected,
-          groupCustomSelectors: delegate.groupCustomSelectors || [],
-          groupImplicitSelectors: [...Object.keys(defaultTo(delegate.groupImplicitSelectors, {}))]
-        }))}
-        useTranslationStore={useTranslationStore}
-        isLoading={false}
-        selectedTags={[]}
-        isDelegateSelected={isDelegateSelected}
-      />
-    </SandboxLayout.Content>
-  </SandboxLayout.Main>
-)
+const DelegateConnectivityWrapper: FC = () => {
+  const delegates = useMemo(
+    () =>
+      mockDelegatesList.map(delegate => ({
+        groupId: delegate.groupId,
+        groupName: delegate.groupName,
+        lastHeartBeat: delegate.lastHeartBeat,
+        activelyConnected: delegate.activelyConnected,
+        groupCustomSelectors: delegate.groupCustomSelectors || [],
+        groupImplicitSelectors: [...Object.keys(defaultTo(delegate.groupImplicitSelectors, {}))]
+      })),
+    []
+  )
+
+  return (
+    <SandboxLayout.Main>
+      <SandboxLayout.Content>
+        <DelegateConnectivityList
+          delegates={delegates}
+          useTranslationStore={useTranslationStore}
+          isLoading={false}
+          selectedTags={[]}
+        />
+      </SandboxLayout.Content>
+    </SandboxLayout.Main>
+  )
+}
 
 export { DelegateConnectivityWrapper }

apps/design-system/src/subjects/views/delegates/delegate-selector.tsx

@@ -3,16 +3,16 @@ import { useState } from 'react'
 import { useTranslationStore } from '@utils/viewUtils'
 import { defaultTo } from 'lodash-es'
 
-import { Drawer, FormSeparator, Icon, StyledLink } from '@harnessio/ui/components'
+import { StyledLink } from '@harnessio/ui/components'
 import {
   DelegateSelectionTypes,
-  DelegateSelectorForm,
+  DelegateSelectorDrawer,
   DelegateSelectorFormFields,
   DelegateSelectorInput
 } from '@harnessio/ui/views'
 
 import mockDelegatesList from './mock-delegates-list.json'
-import { getMatchedDelegatesCount, isDelegateSelected } from './utils'
+import mockTagsList from './mock-tags-list.json'
 
 const delegatesData = mockDelegatesList.map(delegate => ({
   groupId: delegate.groupId,
@@ -23,65 +23,9 @@ const delegatesData = mockDelegatesList.map(delegate => ({
   groupImplicitSelectors: [...Object.keys(defaultTo(delegate.groupImplicitSelectors, {}))]
 }))
 
-const mockTagsList = [
-  'sanity-windows',
-  'eightfivetwoold',
-  'qa-automation',
-  'sanity',
-  'self-hosted-vpc-delegate',
-  'local',
-  '_testDocker',
-  'myrunner',
-  'macos-arm64',
-  'west1-delegate-qa',
-  'linux-amd64',
-  'eightfivetwo',
-  'automation-eks-delegate'
-]
-
 const renderSelectedValue = (type: DelegateSelectionTypes | null, tags: string[]) =>
   type === DelegateSelectionTypes.TAGS ? tags.join(', ') : type === DelegateSelectionTypes.ANY ? 'any delegate' : null
 
-/* ----------  DRAWER COMPONENT  -------------- */
-interface DrawerProps {
-  open: boolean
-  setOpen: (open: boolean) => void
-  preSelectedTags: string[]
-  onSubmit: (data: DelegateSelectorFormFields) => void
-  disableAnyDelegate?: boolean
-}
-
-const DelegateSelectorDrawer = ({ open, setOpen, preSelectedTags, onSubmit, disableAnyDelegate }: DrawerProps) => (
-  <Drawer.Root open={open} onOpenChange={setOpen} direction="right">
-    <Drawer.Content className="w-1/2">
-      <Drawer.Header>
-        <Drawer.Title className="text-cn-foreground-1 mb-2 text-xl">Delegate selector</Drawer.Title>
-        <FormSeparator className="w-full" />
-        <div className="flex">
-          Haven&apos;t installed a delegate yet?
-          <StyledLink className="flex flex-row items-center ml-1" variant="accent" to="#">
-            Install delegate <Icon name="attachment-link" className="ml-1" size={12} />
-          </StyledLink>
-        </div>
-        <Drawer.Close onClick={() => setOpen(false)} />
-      </Drawer.Header>
-
-      <DelegateSelectorForm
-        delegates={delegatesData}
-        tagsList={mockTagsList}
-        useTranslationStore={useTranslationStore}
-        isLoading={false}
-        onFormSubmit={onSubmit}
-        onBack={() => setOpen(false)}
-        isDelegateSelected={isDelegateSelected}
-        getMatchedDelegatesCount={getMatchedDelegatesCount}
-        preSelectedTags={preSelectedTags}
-        disableAnyDelegate={disableAnyDelegate}
-      />
-    </Drawer.Content>
-  </Drawer.Root>
-)
-
 /* ----------  MAIN COMPONENT  -------------------------- */
 export const DelegateSelector = () => {
   /* ---- FIRST (ANY allowed) ---- */
@@ -116,10 +60,18 @@ export const DelegateSelector = () => {
         onEdit={() => setOpenA(true)}
         onClear={() => setTagsA([])}
         renderValue={tag => tag}
-        className="max-w-xs mb-8"
+        className="mb-8 max-w-xs"
       />
 
-      <DelegateSelectorDrawer open={openA} setOpen={setOpenA} preSelectedTags={tagsA} onSubmit={handleSubmitA} />
+      <DelegateSelectorDrawer
+        delegatesData={delegatesData}
+        tagsList={mockTagsList}
+        useTranslationStore={useTranslationStore}
+        open={openA}
+        setOpen={setOpenA}
+        preSelectedTags={tagsA}
+        onSubmit={handleSubmitA}
+      />
 
       <div className="pt-10">
         <DelegateSelectorInput
@@ -130,10 +82,13 @@ export const DelegateSelector = () => {
           onEdit={() => setOpenB(true)}
           onClear={() => setTagsB([])}
           renderValue={tag => tag}
-          className="max-w-xs mb-8"
+          className="mb-8 max-w-xs"
         />
 
         <DelegateSelectorDrawer
+          delegatesData={delegatesData}
+          tagsList={mockTagsList}
+          useTranslationStore={useTranslationStore}
           open={openB}
           setOpen={setOpenB}
           preSelectedTags={tagsB}

apps/design-system/src/subjects/views/delegates/mock-tags-list.json

@@ -0,0 +1,15 @@
+[
+  "sanity-windows",
+  "eightfivetwoold",
+  "qa-automation",
+  "sanity",
+  "self-hosted-vpc-delegate",
+  "local",
+  "_testDocker",
+  "myrunner",
+  "macos-arm64",
+  "west1-delegate-qa",
+  "linux-amd64",
+  "eightfivetwo",
+  "automation-eks-delegate"
+]

apps/design-system/src/subjects/views/delegates/utils.ts

@@ -1,24 +0,0 @@
-import { DelegateItem } from '@harnessio/ui/views'
-
-export const isDelegateSelected = (delegateSelectors: string[], tags: string[] = []) => {
-  if (!tags?.length) {
-    return false
-  }
-  return tags?.some(tag => delegateSelectors.includes(tag))
-}
-
-export const getMatchedDelegatesCount = (delegates: DelegateItem[] = [], tags: string[] = []): number => {
-  if (!delegates.length || !tags.length) {
-    return 0
-  }
-
-  const tagSet = new Set(tags)
-
-  return delegates.reduce<number>((count, delegate) => {
-    const implicit = delegate.groupImplicitSelectors ?? []
-    const custom = delegate.groupCustomSelectors ?? []
-    const delegateTags = [...implicit, ...custom]
-    const matches = delegateTags.some(tag => tagSet.has(tag))
-    return matches ? count + 1 : count
-  }, 0)
-}

packages/ui/src/components/form-primitives/control-group.tsx

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from 'react'
+import { ElementRef, forwardRef, HTMLAttributes } from 'react'
 
 import { cn } from '@utils/cn'
 
@@ -13,15 +13,18 @@ interface ControlGroupProps extends HTMLAttributes<HTMLDivElement> {
  *   <Button>Button</Button>
  * </ControlGroup>
  */
-export function ControlGroup({ children, type, className, ...props }: ControlGroupProps) {
-  return (
+export const ControlGroup = forwardRef<ElementRef<'div'>, ControlGroupProps>(
+  ({ children, type, className, ...props }, ref) => (
     <div
-      className={cn('relative flex flex-col', className)}
+      ref={ref}
       role="group"
       aria-label={type === 'button' ? 'Button control group' : 'Input control group'}
+      className={cn('relative flex flex-col', className)}
       {...props}
     >
       {children}
     </div>
   )
-}
+)
+
+ControlGroup.displayName = 'ControlGroup'