Enhance Sentinel databases result UI

- Created Summary component for result feedback
- Fixed ResultColumn sizing property to minSize

Author: pd-redis

redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/components/SentinelDatabasesResult/SentinelDatabasesResult.stories.tsx

@@ -87,20 +87,25 @@ const meta: Meta<typeof SentinelDatabasesResult> = {
   component: SentinelDatabasesResult,
   args: {
     columns: columnsMock,
+    countSuccessAdded: mastersMock.filter(
+      (m) => m.status === AddRedisDatabaseStatus.Success,
+    ).length,
   },
 }
 
 export default meta
 type Story = StoryObj<typeof SentinelDatabasesResult>
 
 const DefaultRender = () => {
-  let countSuccessAdded = mastersMock.length - 2
   return (
     <SentinelDatabasesResult
       onViewDatabases={action('onViewDatabases')}
       columns={columnsMock}
       masters={mastersMock}
-      countSuccessAdded={countSuccessAdded}
+      countSuccessAdded={
+        mastersMock.filter((m) => m.status === AddRedisDatabaseStatus.Success)
+          .length
+      }
       onBack={action('onBack')}
     />
   )
@@ -110,18 +115,49 @@ export const Default: Story = {
   render: () => <DefaultRender />,
 }
 
+export const AllValid: Story = {
+  args: {
+    columns: colFactory(
+      action('onChangedInput'),
+      action('onAddInstance'),
+      false,
+      1,
+      1,
+    ),
+    countSuccessAdded: 1,
+    masters: [
+      mastersMock.find((m) => m.status === AddRedisDatabaseStatus.Success) ||
+        mastersMock[0],
+    ],
+    onBack: action('onBack'),
+  },
+}
+
 export const AllInvalid: Story = {
   args: {
-    columns: columnsMock,
-    masters: [],
+    columns: colFactory(
+      action('onChangedInput'),
+      action('onAddInstance'),
+      false,
+      0,
+      1,
+    ),
+    masters: [mastersMock[0]],
     onBack: action('onBack'),
+    countSuccessAdded: 0,
   },
 }
 
 export const Empty: Story = {
   args: {
-    columns: columnsMock,
-    masters: [mastersMock[0]],
+    columns: colFactory(
+      action('onChangedInput'),
+      action('onAddInstance'),
+      false,
+      0,
+      0,
+    ),
+    masters: [],
     onBack: action('onBack'),
     countSuccessAdded: 0,
   },

redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/components/SentinelDatabasesResult/SentinelDatabasesResult.tsx

@@ -6,9 +6,9 @@ import { ModifiedSentinelMaster } from 'uiSrc/slices/interfaces'
 import MessageBar from 'uiSrc/components/message-bar/MessageBar'
 import { AutodiscoveryPageTemplate } from 'uiSrc/templates'
 
-import { Col, Row } from 'uiSrc/components/base/layout/flex'
+import { Col, FlexItem, Row } from 'uiSrc/components/base/layout/flex'
 import { PrimaryButton } from 'uiSrc/components/base/forms/buttons'
-import { ColorText, Text } from 'uiSrc/components/base/text'
+import { Text } from 'uiSrc/components/base/text'
 import { ColumnDef, Table } from 'uiSrc/components/base/layout/table'
 
 import {
@@ -18,6 +18,7 @@ import {
 } from 'uiSrc/components/auto-discover'
 import { Spacer } from 'uiSrc/components/base/layout'
 import { Header } from 'uiSrc/components/auto-discover/Header'
+import { SummaryText } from './Summary'
 
 export interface Props {
   countSuccessAdded: number
@@ -73,27 +74,6 @@ const SentinelDatabasesResult = ({
     setItems(itemsTemp)
   }
 
-  const SummaryText = () => (
-    <Text component="div" color="primary" data-testid="summary">
-      <ColorText variant="semiBold" size="S">
-        Summary:&nbsp;
-      </ColorText>
-      {countSuccessAdded ? (
-        <ColorText size="S">
-          Successfully added {countSuccessAdded}
-          {' primary group(s)'}
-          {countFailAdded ? '; ' : ' '}
-        </ColorText>
-      ) : null}
-      {countFailAdded ? (
-        <ColorText size="S">
-          Failed to add {countFailAdded}
-          {' primary group(s)'}
-        </ColorText>
-      ) : null}
-    </Text>
-  )
-
   return (
     <AutodiscoveryPageTemplate>
       <DatabaseContainer justify="start">
@@ -105,7 +85,7 @@ const SentinelDatabasesResult = ({
 
         <Spacer size="m" />
         <DatabaseWrapper>
-          {items.length === 0 || loading ? (
+          {loading ? (
             <Col full centered>
               <Text size="XL" variant="semiBold">
                 {message}
@@ -122,11 +102,22 @@ const SentinelDatabasesResult = ({
                   desc: false,
                 },
               ]}
+              emptyState={() => (
+                <Col centered full>
+                  <FlexItem padding={13}>
+                    <Text size="L">{message}</Text>
+                  </FlexItem>
+                </Col>
+              )}
+              stripedRows
             />
           )}
         </DatabaseWrapper>
         <MessageBar opened={!!countSuccessAdded || !!countFailAdded}>
-          <SummaryText />
+          <SummaryText
+            countSuccessAdded={countSuccessAdded}
+            countFailAdded={countFailAdded}
+          />
         </MessageBar>
       </DatabaseContainer>
       <Footer>
@@ -135,7 +126,6 @@ const SentinelDatabasesResult = ({
             size="m"
             onClick={handleViewDatabases}
             data-testid="btn-view-databases"
-            disabled={countSuccessAdded === 0}
           >
             View Databases
           </PrimaryButton>

redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/components/SentinelDatabasesResult/Summary.tsx

@@ -0,0 +1,29 @@
+import { ColorText, Text } from 'uiSrc/components/base/text'
+import React from 'react'
+
+export const SummaryText = ({
+  countSuccessAdded,
+  countFailAdded,
+}: {
+  countSuccessAdded: number
+  countFailAdded: number
+}) => (
+  <Text component="div" color="primary" data-testid="summary">
+    <ColorText variant="semiBold" size="S">
+      Summary:&nbsp;
+    </ColorText>
+    {countSuccessAdded ? (
+      <ColorText size="S">
+        Successfully added {countSuccessAdded}
+        {' primary group(s)'}
+        {countFailAdded ? '; ' : ' '}
+      </ColorText>
+    ) : null}
+    {countFailAdded ? (
+      <ColorText size="S">
+        Failed to add {countFailAdded}
+        {' primary group(s)'}
+      </ColorText>
+    ) : null}
+  </Text>
+)

redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/components/column-definitions/ResultColumn.tsx

@@ -62,7 +62,7 @@ export const ResultColumn = (
     id: 'message',
     accessorKey: 'message',
     enableSorting: true,
-    maxSize: addActions ? 250 : 110,
+    minSize: addActions ? 250 : 110,
     cell: ({
       row: {
         original: { status, message, name, error, alias, loading = false },