fixes

Author: Efremovtsev

packages/ui/src/views/delegates/components/delegate-connectivity-list.tsx

@@ -36,14 +36,15 @@ export function DelegateConnectivityList({
   return (
     <Table.Root
       className={isLoading ? '[mask-image:linear-gradient(to_bottom,black_30%,transparent_100%)]' : ''}
+      tableClassName="table-fixed"
       variant="asStackedList"
     >
       <Table.Header>
         <Table.Row>
-          <Table.Head style={{ width: 184 }}>Delegate</Table.Head>
-          <Table.Head>Heartbeat</Table.Head>
-          <Table.Head>Tags</Table.Head>
-          <Table.Head style={{ width: 57 }}>Selected</Table.Head>
+          <Table.Head className="w-3/12">Delegate</Table.Head>
+          <Table.Head className="w-3/12">Heartbeat</Table.Head>
+          <Table.Head className="w-4/12">Tags</Table.Head>
+          <Table.Head className="w-2/12">Selected</Table.Head>
         </Table.Row>
       </Table.Header>
       {isLoading ? (
@@ -61,7 +62,7 @@ export function DelegateConnectivityList({
             }) => {
               return (
                 <Table.Row key={groupId}>
-                  <Table.Cell className="max-w-80 content-center truncate" style={{ width: 184, maxWidth: 184 }}>
+                  <Table.Cell className="content-center truncate">
                     <div className="flex items-center gap-2.5">
                       <Title title={groupName} />
                     </div>
@@ -85,7 +86,7 @@ export function DelegateConnectivityList({
                       </StatusBadge>
                     ))}
                   </Table.Cell>
-                  <Table.Cell className="content-center" style={{ width: 57 }}>
+                  <Table.Cell className="content-center justify-items-center">
                     {isDelegateSelected(
                       [...defaultTo(groupImplicitSelectors, []), ...defaultTo(groupCustomSelectors, [])],
                       selectedTags || []

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

@@ -1,11 +1,17 @@
-import { FC } from 'react'
+import { FC, useCallback, useMemo, useState } from 'react'
 
 import { TranslationStore } from '@/views'
+import { Button } from '@components/button'
+import { ButtonGroup } from '@components/button-group'
 import { Drawer } from '@components/drawer'
+import { ControlGroup } from '@components/form-primitives'
+import { Icon } from '@components/icon'
+import { ScrollArea } from '@components/scroll-area'
+import { StyledLink } from '@components/styled-link'
 
 import { DelegateItem } from '../types'
-import { getMatchedDelegatesCount, isDelegateSelected } from '../utils'
-import { DelegateSelectorForm, DelegateSelectorFormFields } from './delegate-selector-form'
+import { getDefaultFormValues, getMatchedDelegatesCount, isDelegateSelected } from '../utils'
+import { DelegateSelectionTypes, DelegateSelectorForm, type DelegateSelectorFormFields } from './delegate-selector-form'
 
 interface DrawerProps {
   open: boolean
@@ -27,26 +33,64 @@ export const DelegateSelectorDrawer: FC<DrawerProps> = ({
   useTranslationStore,
   onSubmit,
   disableAnyDelegate
-}) => (
-  <Drawer.Root open={open} onOpenChange={setOpen} direction="right">
-    <Drawer.Content className="flex h-full flex-col p-0" style={{ width: 716 }}>
-      <Drawer.Header className="border-cn-borders-3 sticky top-0 border-b px-6 py-5">
-        <Drawer.Title className="text-cn-foreground-1 text-xl font-medium">Delegate selector</Drawer.Title>
-        <Drawer.Close onClick={() => setOpen(false)} className="sr-only" />
-      </Drawer.Header>
-
-      <DelegateSelectorForm
-        delegates={delegates}
-        tagsList={tagsList}
-        useTranslationStore={useTranslationStore}
-        isLoading={false}
-        onFormSubmit={onSubmit}
-        onBack={() => setOpen(false)}
-        isDelegateSelected={isDelegateSelected}
-        getMatchedDelegatesCount={getMatchedDelegatesCount}
-        preSelectedTags={preSelectedTags}
-        disableAnyDelegate={disableAnyDelegate}
-      />
-    </Drawer.Content>
-  </Drawer.Root>
-)
+}) => {
+  const [{ type: delegateType, tags: selectedTags }, setFormState] = useState(
+    getDefaultFormValues(preSelectedTags, disableAnyDelegate)
+  )
+
+  const matchedDelegates = useMemo(
+    () => getMatchedDelegatesCount(delegates, selectedTags?.map(tag => tag.id) ?? []),
+    [delegates, selectedTags]
+  )
+
+  const handleBack = useCallback(() => setOpen(false), [setOpen])
+  const handleChangeFields = useCallback(data => {
+    setFormState(data)
+  }, [])
+
+  return (
+    <Drawer.Root open={open} onOpenChange={setOpen} direction="right">
+      <Drawer.Content className="flex h-full w-[716px] flex-col p-0">
+        <Drawer.Header className="border-cn-borders-3 sticky top-0 border-b px-6 py-5">
+          <Drawer.Title className="text-cn-foreground-1 text-xl font-medium">Delegate selector</Drawer.Title>
+          <Drawer.Close onClick={handleBack} className="sr-only" />
+        </Drawer.Header>
+
+        <ScrollArea scrollThumbClassName="bg-sidebar-background-8">
+          <div className="px-6 py-5">
+            <span className="text-cn-foreground-4 mr-1">Haven&apos;t installed a delegate yet?</span>
+            <StyledLink className="inline-flex flex-row items-center" variant="accent" to="#">
+              Install delegate <Icon name="attachment-link" className="ml-1" size={12} />
+            </StyledLink>
+          </div>
+          <DelegateSelectorForm
+            delegates={delegates}
+            tagsList={tagsList}
+            useTranslationStore={useTranslationStore}
+            isLoading={false}
+            onFormSubmit={onSubmit}
+            isDelegateSelected={isDelegateSelected}
+            preSelectedTags={preSelectedTags}
+            disableAnyDelegate={disableAnyDelegate}
+            onChangeFields={handleChangeFields}
+          />
+        </ScrollArea>
+
+        <div className="bg-cn-background-2 border-cn-borders-3 sticky bottom-0 z-10 border-t px-6 py-5 shadow-md">
+          <ControlGroup>
+            <ButtonGroup className="flex flex-row justify-between">
+              <Button type="button" variant="outline" onClick={handleBack}>
+                Back
+              </Button>
+              <Button type="submit" form="delegate-selector-form">
+                Connect&nbsp;
+                {delegateType === DelegateSelectionTypes.TAGS ? matchedDelegates : 'any'}&nbsp;
+                {delegateType === DelegateSelectionTypes.TAGS && matchedDelegates > 1 ? 'delegates' : 'delegate'}
+              </Button>
+            </ButtonGroup>
+          </ControlGroup>
+        </div>
+      </Drawer.Content>
+    </Drawer.Root>
+  )
+}