feat: add new SVG icons for add-item, red-circle-with-dash, success-ticket, and yellow-calendar; update SummaryCardV1 to support icon and extra props

2025-11-02 03:29:03 +00:00 · 2025-09-22 14:07:31 +05:30 · 2025-09-22 14:07:31 +05:30 · 040fd21278
commit 040fd21278
parent 33977571d9
8 changed files with 99 additions and 41 deletions
--- a/openmetadata-ui/src/main/resources/ui/src/assets/svg/add-item-icon.svg
+++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/add-item-icon.svg
@ -0,0 +1,6 @@
+<svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.729492" y="0.319397" width="39" height="39" rx="6" fill="#F6F6FD"/>
+<path d="M11.9922 9.3194C13.792 9.31949 15.0013 10.5428 15.2217 12.127H15.2266C15.2268 12.1286 15.2273 12.1303 15.2275 12.1319H28.3281C30.7561 12.132 32.7294 14.1053 32.7295 16.5333V25.9971C32.7295 28.4252 30.7562 30.3994 28.3281 30.3995H11.9922C10.2109 30.4042 8.74824 28.9551 8.72949 27.1739V12.5821C8.72949 10.7821 10.1922 9.3194 11.9922 9.3194ZM11.9873 11.1993C11.2232 11.1993 10.5996 11.8229 10.5996 12.587V23.7237C10.9839 23.5409 11.4105 23.4339 11.8604 23.4151C12.3947 23.3963 12.9109 23.4995 13.375 23.7198V26.6768C13.3749 26.2973 13.2247 25.9412 12.9482 25.6788C12.6764 25.4163 12.315 25.276 11.9307 25.2901C11.2137 25.3184 10.6277 25.8992 10.5996 26.6163V27.1602C10.6091 27.9148 11.228 28.5333 11.9873 28.5333H13.3799V12.6788C13.3828 12.1285 13.7755 11.6767 14.2705 11.6534H14.3828C14.7062 11.6769 14.983 11.8835 15.1377 12.1788C15.208 12.3194 15.2502 12.479 15.2549 12.6524V12.5538L15.2441 12.4395C15.227 12.3275 15.1904 12.2219 15.1377 12.127H15.1328C14.9828 11.8599 14.7013 11.6729 14.3779 11.6495H14.2656C13.7688 11.6729 13.375 12.0854 13.375 12.587C13.375 11.8229 12.7514 11.1993 11.9873 11.1993ZM13.4004 13.0059C13.4043 12.9864 13.4068 12.9664 13.4121 12.9473C13.4119 12.9463 13.4114 12.9454 13.4111 12.9444C13.4067 12.9645 13.4042 12.9853 13.4004 13.0059Z" fill="#D0D9EF"/>
+<path d="M22.7295 18.3194V24.3194" stroke="#3455A7" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M25.7295 21.3194L19.7295 21.3194" stroke="#3455A7" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/openmetadata-ui/src/main/resources/ui/src/assets/svg/red-circle-with-dash.svg
+++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/red-circle-with-dash.svg
@ -0,0 +1,5 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.729492" y="0.319397" width="39" height="39" rx="6" fill="#FFF4F1"/>
+<circle cx="20.7295" cy="19.3194" r="11" fill="#FDC3B1"/>
+<path d="M17.7295 19.3194H23.7295" stroke="#9A4429" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/openmetadata-ui/src/main/resources/ui/src/assets/svg/success-ticket-with-check.svg
+++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/success-ticket-with-check.svg
@ -0,0 +1,5 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.729492" y="0.319397" width="39" height="39" rx="6" fill="#E4FBF2"/>
+<path d="M24.6947 8.18896C24.1424 8.18896 23.7111 8.64922 23.5285 9.17043C23.1229 10.3278 22.0204 11.1585 20.7252 11.1585C19.4299 11.1585 18.3274 10.3278 17.9218 9.17043C17.7392 8.64922 17.3079 8.18896 16.7556 8.18896H14.7686C13.5686 8.18896 12.5947 9.16288 12.5947 10.3629V28.2759C12.5947 29.4759 13.5686 30.4498 14.7686 30.4498H16.7556C17.3079 30.4498 17.7392 29.9896 17.9218 29.4684C18.3274 28.311 19.4299 27.4803 20.7252 27.4803C22.0204 27.4803 23.1229 28.311 23.5285 29.4684C23.7111 29.9896 24.1424 30.4498 24.6947 30.4498H26.6817C27.8817 30.4498 28.8556 29.4759 28.8556 28.2759V10.3629C28.8556 9.16288 27.8817 8.18896 26.6817 8.18896H24.6947Z" fill="#A7EBD0"/>
+<path d="M18.2295 19.3521L19.8501 21.4594L23.9959 17.3194" stroke="#137C50" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/openmetadata-ui/src/main/resources/ui/src/assets/svg/yellow-calendar.icon.svg
+++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/yellow-calendar.icon.svg
@ -0,0 +1,8 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.729492" y="0.319397" width="39" height="39" rx="6" fill="#FDF7E9"/>
+<rect x="9.72949" y="9.16553" width="22.1538" height="22.1538" rx="6" fill="#FDE8B7"/>
+<line x1="16.3643" y1="11.1848" x2="16.3643" y2="8.06937" stroke="#B89334" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<line x1="25.5947" y1="11.1846" x2="25.5947" y2="8.06919" stroke="#B89334" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M25.3772 21.7511C25.3772 24.2876 23.3199 26.345 20.7834 26.345C18.247 26.345 16.1919 24.2876 16.1919 21.7511C16.1919 19.2147 18.2492 17.1596 20.7857 17.1596H25.3795" stroke="#B89334" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M23.8799 18.7061L25.4218 17.1665L23.8799 15.6269" stroke="#B89334" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/TableProfiler/TableProfiler.interface.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/TableProfiler/TableProfiler.interface.ts
@ -93,7 +93,8 @@ export interface TestIndicatorProps {
 export type OverallTableSummaryType = {
  title: string;
  value: number | string;
-  className?: string;
+  icon?: SvgComponent;
+  extra?: ReactNode;
  key: string;
 };

--- a/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/TableProfiler/TableProfilerChart/TableProfilerChart.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/TableProfiler/TableProfilerChart/TableProfilerChart.tsx
@ -228,18 +228,29 @@ const TableProfilerChart = ({
            <Grid container spacing={5}>
              {overallSummary?.map((summary) => (
                <Grid key={summary.title} size="grow">
-                  {/* <SummaryCard
-                    className={classNames(summary.className, 'h-full')}
+                  <SummaryCardV1
+                    extra={summary.extra}
+                    icon={summary.icon}
                    isLoading={isSummaryLoading}
-                    showProgressBar={false}
                    title={summary.title}
-                    total={0}
                    value={summary.value}
-                  /> */}
-                  <SummaryCardV1 />
+                  />
                </Grid>
              ))}
            </Grid>
+
+            {/* <div className="d-flex gap-4">
+              {overallSummary?.map((summary) => (
+                <SummaryCard
+                  className={classNames(summary.className, 'h-full')}
+                  isLoading={isSummaryLoading}
+                  showProgressBar={false}
+                  title={summary.title}
+                  total={0}
+                  value={summary.value}
+                />
+              ))}
+            </div> */}
          </Col>
        </>
      )}
--- a/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/TableProfiler/TableProfilerProvider.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/TableProfiler/TableProfilerProvider.tsx
@ -24,6 +24,10 @@ import {
  useState,
 } from 'react';
 import { useTranslation } from 'react-i18next';
+import { ReactComponent as AddItemIcon } from '../../../../assets/svg/add-item-icon.svg';
+import { ReactComponent as RedCircleIcon } from '../../../../assets/svg/red-circle-with-dash.svg';
+import { ReactComponent as SuccessTicketIcon } from '../../../../assets/svg/success-ticket-with-check.svg';
+import { ReactComponent as YellowCalendarIcon } from '../../../../assets/svg/yellow-calendar.icon.svg';
 import { mockDatasetData } from '../../../../constants/mockTourData.constants';
 import {
  DEFAULT_RANGE_DATA,
@ -142,6 +146,7 @@ export const TableProfilerProvider = ({
        }),
        key: 'row-count',
        value: profile?.rowCount ?? 0,
+        icon: AddItemIcon,
      },
      {
        title: t('label.column-entity', {
@ -149,16 +154,19 @@ export const TableProfilerProvider = ({
        }),
        key: 'column-count',
        value: profile?.columnCount ?? tableProfiler?.columns?.length ?? 0,
+        icon: SuccessTicketIcon,
      },
      {
        title: `${t('label.profile-sample-type', { type: '' })}`,
        key: 'profile-sample-type',
        value: getProfileSampleValue(),
+        icon: RedCircleIcon,
      },
      {
        title: t('label.size'),
        key: 'size',
        value: bytesToSize(profile?.sizeInByte ?? 0),
+        icon: YellowCalendarIcon,
      },
      {
        title: t('label.created-date'),
@ -168,6 +176,12 @@ export const TableProfilerProvider = ({
              .toUTC()
              .toLocaleString(DateTime.DATE_MED)
          : '--',
+        extra: profile?.timestamp
+          ? `Last updated: ${DateTime.fromJSDate(
+              new Date(profile?.timestamp)
+            ).toLocaleString(DateTime.DATETIME_MED)}`
+          : undefined,
+        icon: YellowCalendarIcon,
      },
    ];
  }, [tableProfiler]);
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/SummaryCard/SummaryCardV1.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/SummaryCard/SummaryCardV1.tsx
@ -1,7 +1,26 @@
-import { Box, Card, Chip, Typography } from '@mui/material';
-import { ReactComponent as NoDataIcon } from '../../../assets/svg/ticket-with-check.svg';
+import { Box, Card, Skeleton, Typography } from '@mui/material';
+import { ReactNode } from 'react';
+import { ReactComponent as AddItemIcon } from '../../../assets/svg/add-item-icon.svg';
+
+const SummaryCardV1 = ({
+  isLoading,
+  title,
+  value,
+  icon,
+  extra,
+}: {
+  isLoading: boolean;
+  title: ReactNode;
+  value: string | number;
+  icon?: SvgComponent;
+  extra?: ReactNode;
+}) => {
+  if (isLoading) {
+    return <Skeleton height={120} variant="rounded" width={210} />;
+  }
+
+  const Icon = icon ?? AddItemIcon;

-const SummaryCardV1 = () => {
  return (
    <Box>
      <Card
@ -17,46 +36,35 @@ const SummaryCardV1 = () => {
          width: '100%',
        }}
        variant="outlined">
-        <Chip
-          color="secondary"
-          icon={<NoDataIcon />}
-          sx={{
-            backgroundColor: 'white',
-            height: '40px',
-            width: '40px',
-            borderRadius: '8px',
-            '.MuiChip-icon': {
-              m: 0,
-            },
-          }}
-          variant="outlined"
-        />
+        <Icon height={40} width={40} />
        <Box>
          <Typography sx={{ fontSize: '18px', fontWeight: 600 }} variant="h6">
-            1245
+            {value}
          </Typography>
          <Typography
            color="text.secondary"
            sx={{ fontSize: '14px', fontWeight: 500 }}>
-            Row Count
+            {title}
          </Typography>
        </Box>
      </Card>
-      <Box
-        sx={{
-          mt: 0,
-          mx: 2,
-          px: 2,
-          py: 1,
-          background: '#F8F9FC',
-          borderRadius: '0 0 12px 12px',
-          boxShadow: '0 4px 3px 0 rgba(235, 239, 250, 0.10)',
-          border: 'none',
-        }}>
-        <Typography sx={{ fontSize: 10, fontWeight: 500 }}>
-          Last updated: Sep 17, 2025 12:34 PM
-        </Typography>
-      </Box>
+      {extra && (
+        <Box
+          sx={{
+            mt: 0,
+            mx: 2,
+            px: 2,
+            py: 1,
+            background: '#F8F9FC',
+            borderRadius: '0 0 12px 12px',
+            boxShadow: '0 4px 3px 0 rgba(235, 239, 250, 0.10)',
+            border: 'none',
+          }}>
+          <Typography sx={{ fontSize: 10, fontWeight: 500 }}>
+            {extra}
+          </Typography>
+        </Box>
+      )}
    </Box>
  );
 };