Fix bublikov task 1

apps/design-system/src/subjects/views/connectors/connectors-ref.tsx

@@ -173,7 +173,6 @@ export const ConnectorsRefPage = ({
       <Drawer.Content>
         <Drawer.Header>
           <Drawer.Title className="text-cn-foreground-1 mb-2 text-xl">Connectors</Drawer.Title>
-          <FormSeparator className="w-full" />
           <Drawer.Close onClick={() => setIsDrawerOpen(false)} />
         </Drawer.Header>
         <Spacer size={5} />

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

@@ -4,7 +4,6 @@ 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>
@@ -21,7 +20,6 @@ const DelegateConnectivityWrapper = (): JSX.Element => (
         useTranslationStore={useTranslationStore}
         isLoading={false}
         selectedTags={[]}
-        isDelegateSelected={isDelegateSelected}
       />
     </SandboxLayout.Content>
   </SandboxLayout.Main>

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

@@ -3,16 +3,15 @@ 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'
 
 const delegatesData = mockDelegatesList.map(delegate => ({
   groupId: delegate.groupId,
@@ -42,46 +41,6 @@ const mockTagsList = [
 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) ---- */
@@ -109,17 +68,25 @@ export const DelegateSelector = () => {
   return (
     <div className="p-5">
       <DelegateSelectorInput
-        placeholder={<StyledLink to="#"> select a delegate</StyledLink>}
+        placeholder={<StyledLink to="#">select a delegate</StyledLink>}
         value={renderSelectedValue(typeA, tagsA)}
         label="Delegate selector"
         onClick={() => setOpenA(true)}
         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
+        open={openA}
+        setOpen={setOpenA}
+        preSelectedTags={tagsA}
+        onSubmit={handleSubmitA}
+        tagsList={mockTagsList}
+        delegatesData={delegatesData}
+        useTranslationStore={useTranslationStore}
+      />
 
       <div className="pt-10">
         <DelegateSelectorInput
@@ -130,14 +97,17 @@ export const DelegateSelector = () => {
           onEdit={() => setOpenB(true)}
           onClear={() => setTagsB([])}
           renderValue={tag => tag}
-          className="max-w-xs mb-8"
+          className="mb-8 max-w-xs"
         />
 
         <DelegateSelectorDrawer
           open={openB}
           setOpen={setOpenB}
           preSelectedTags={tagsB}
           onSubmit={handleSubmitB}
+          tagsList={mockTagsList}
+          delegatesData={delegatesData}
+          useTranslationStore={useTranslationStore}
           disableAnyDelegate
         />
       </div>

apps/design-system/src/subjects/views/execution/pipeline-execution-graph.tsx

@@ -91,7 +91,7 @@ export function StepNodeComponent({
             pipelineName="npm_build"
           />
         </Drawer.Header>
-        <div className="border-cn-borders-3 mt-1 border-t pt-3">
+        <div className="mt-1 pt-3">
           <ExecutionInfo
             isDrawer
             useLogsStore={() => ({ logs })}

apps/design-system/src/subjects/views/secrets/secrets.tsx

@@ -4,7 +4,7 @@ import { secretsFormDefinition } from '@utils/secrets/secrets-form-schema'
 import { useTranslationStore } from '@utils/viewUtils'
 
 import { InputFactory } from '@harnessio/forms'
-import { Drawer, FormSeparator, Spacer, Text } from '@harnessio/ui/components'
+import { Drawer, Spacer, Text } from '@harnessio/ui/components'
 import {
   ArrayInput,
   BooleanInput,
@@ -155,7 +155,6 @@ export const SecretsPage = ({
         <Drawer.Content>
           <Drawer.Header>
             <Drawer.Title className="text-cn-foreground-1 mb-2 text-xl">Secret</Drawer.Title>
-            <FormSeparator className="w-full" />
             <Drawer.Close onClick={() => setIsDrawerOpen(false)} />
           </Drawer.Header>
           {/* <Spacer size={5} /> */}

packages/ui/src/components/drawer.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 
 import { usePortal } from '@/context'
+import { ScrollArea } from '@components/scroll-area'
 import { cn } from '@utils/cn'
 import { Drawer as DrawerPrimitive } from 'vaul'
 
@@ -75,7 +76,7 @@ const DrawerContent = React.forwardRef<
         <DrawerPrimitive.Content
           ref={ref}
           className={cn(
-            'bg-cn-background-2 fixed inset-y-0 p-4 right-0 z-50 w-1/4 border-l border-cn-borders-3',
+            'bg-cn-background-2 fixed flex flex-col inset-y-0 right-0 z-50 w-1/4 border-l border-cn-borders-3',
             className
           )}
           {...props}
@@ -89,12 +90,22 @@ const DrawerContent = React.forwardRef<
 DrawerContent.displayName = 'DrawerContent'
 
 const DrawerHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn('grid gap-1.5 text-center sm:text-left', className)} {...props} />
+  <div className={cn('grid gap-1.5 px-6 py-5 text-left border-b border-cn-borders-3', className)} {...props} />
 )
 DrawerHeader.displayName = 'DrawerHeader'
 
+const DrawerInner = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <ScrollArea viewportClassName="[&>div]:h-full">
+    <div className={cn('flex flex-col grow', className)} {...props} />
+  </ScrollArea>
+)
+DrawerInner.displayName = 'DrawerInner'
+
 const DrawerFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn('mt-auto flex flex-col gap-2 border-t border-cn-borders-3', className)} {...props} />
+  <div
+    className={cn('mt-auto sticky bottom-0 flex flex-col gap-2 border-t border-cn-borders-3', className)}
+    {...props}
+  />
 )
 DrawerFooter.displayName = 'DrawerFooter'
 
@@ -104,7 +115,7 @@ const DrawerTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DrawerPrimitive.Title
     ref={ref}
-    className={cn('text-lg font-semibold leading-none tracking-tight', className)}
+    className={cn('text-xl text-cn-foreground-1 font-semibold leading-6', className)}
     {...props}
   />
 ))
@@ -127,6 +138,7 @@ const Drawer = {
   Close: DrawerClose,
   Content: DrawerContent,
   Header: DrawerHeader,
+  Inner: DrawerInner,
   Footer: DrawerFooter,
   Title: DrawerTitle,
   Description: DrawerDescription

packages/ui/src/components/option.tsx

@@ -32,24 +32,29 @@ export const Option: FC<OptionProps> = ({ control, id, label, description, ariaS
       aria-labelledby={`${id}-label`}
       aria-selected={ariaSelected}
     >
-      <div className="mt-0.5">{control}</div>
-      <div className="flex flex-col gap-0">
-        <Label htmlFor={id} className="mb-1 cursor-pointer pl-2.5" variant="primary">
-          {label}
-        </Label>
-        {description && (
-          <Text
-            className="ml-2.5 leading-snug tracking-tight"
-            as="p"
-            size={2}
-            color="foreground-4"
-            id={`${id}-description`}
-            role="note"
-          >
-            {description}
-          </Text>
-        )}
-      </div>
+      {control && <div className="mt-0.5 w-full">{control}</div>}
+      {!!label ||
+        (!!description && (
+          <div className="flex flex-col gap-0">
+            {!!label && (
+              <Label htmlFor={id} className="mb-1 cursor-pointer pl-2.5" variant="primary">
+                {label}
+              </Label>
+            )}
+            {!!description && (
+              <Text
+                className="ml-2.5 leading-snug tracking-tight"
+                as="p"
+                size={2}
+                color="foreground-4"
+                id={`${id}-description`}
+                role="note"
+              >
+                {description}
+              </Text>
+            )}
+          </div>
+        ))}
     </div>
   )
 }

packages/ui/src/components/radio.tsx

@@ -28,20 +28,29 @@ RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
 const RadioButton = forwardRef<
   ElementRef<typeof RadioGroupPrimitive.Item>,
   ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
->(({ className, ...props }, ref) => {
+>(({ className, asChild, ...props }, ref) => {
   return (
     <RadioGroupPrimitive.Item
+      asChild={asChild}
       ref={ref}
-      className={cn(
-        `flex items-center justify-center relative border-icons-1 text-icons-5 aspect-square h-4 w-4 rounded-full border
-        data-[state=checked]:border-icons-2 
-        focus-visible:rounded-full
-        disabled:cursor-not-allowed disabled:border-icons-4`,
-        className
-      )}
+      className={
+        asChild
+          ? className
+          : cn(
+              `flex items-center 
+              justify-center 
+              relative 
+              border-icons-1 
+              text-icons-5 aspect-square h-4 w-4 rounded-full border
+              data-[state=checked]:border-icons-2 
+              focus-visible:rounded-full
+              disabled:cursor-not-allowed disabled:border-icons-4`,
+              className
+            )
+      }
       {...props}
     >
-      <RadioGroupPrimitive.Indicator className="size-2 rounded-full bg-icons-2" />
+      {asChild ? props.children : <RadioGroupPrimitive.Indicator className="bg-icons-2 size-2 rounded-full" />}
     </RadioGroupPrimitive.Item>
   )
 })

packages/ui/src/components/stacked-list.tsx

@@ -41,7 +41,9 @@ interface ListItemProps extends React.ComponentProps<'div'>, VariantProps<typeof
 
 interface ListFieldProps extends Omit<React.ComponentProps<'div'>, 'title'>, VariantProps<typeof listFieldVariants> {
   title?: React.ReactNode
+  titleClassName?: string
   description?: React.ReactNode
+  descriptionClassName?: string
   label?: boolean
   secondary?: boolean
   primary?: boolean
@@ -118,15 +120,26 @@ const ListItem = ({
 
 ListItem.displayName = 'StackedListItem'
 
-const ListField = ({ className, title, description, label, primary, secondary, right, ...props }: ListFieldProps) => (
+const ListField = ({
+  className,
+  title,
+  titleClassName,
+  description,
+  descriptionClassName,
+  label,
+  primary,
+  secondary,
+  right,
+  ...props
+}: ListFieldProps) => (
   <div className={cn(listFieldVariants({ right }), className)} {...props}>
     {title && (
       <div
         className={cn(
           primary ? 'text-3 leading-snug' : secondary ? 'text-2' : 'text-sm',
           'text-cn-foreground-1 [&>em]:text-cn-foreground-1 font-normal [&>em]:font-medium [&>em]:not-italic',
           !!label && 'text-cn-foreground-2',
-          className
+          titleClassName
         )}
       >
         {title}
@@ -137,7 +150,7 @@ const ListField = ({ className, title, description, label, primary, secondary, r
         className={cn(
           'text-cn-foreground-2 flex gap-2 text-ellipsis whitespace-nowrap',
           primary ? 'text-sm' : 'text-2',
-          className
+          descriptionClassName
         )}
       >
         {description}

packages/ui/src/components/table.tsx

@@ -8,7 +8,7 @@ const tableVariants = cva('w-full text-sm', {
     variant: {
       default: 'caption-bottom',
       asStackedList:
-        'rounded-md border [&_td]:px-4 [&_td]:py-2.5 [&_td]:align-top [&_th]:px-4 [&_thead]:bg-cn-background-2'
+        '[&_thead]:bg-cn-background-2 rounded-md border [&_td]:px-4 [&_td]:py-2.5 [&_td]:align-top [&_th]:px-4'
     }
   },
   defaultVariants: {
@@ -48,6 +48,7 @@ const TableBody = forwardRef<
     className={cn(
       '[&_tr:last-child]:border-0',
       { '[&>tr:hover]:bg-cn-background-hover': hasHighlightOnHover },
+      { '[&>tr:hover]:cursor-pointer': hasHighlightOnHover },
       className
     )}
     {...props}