mv required action. add skeleton

TheSonOfThomp · TheSonOfThomp · commit fb45a9f42d71 · 2025-11-07T15:46:08.000-05:00
diff --git a/packages/wizard/src/demo/RequiredActionCards/ApplicationsCard.tsx b/packages/wizard/src/demo/RequiredActionCards/ApplicationsCard.tsx
@@ -9,7 +9,12 @@ import { Description, Link } from '@leafygreen-ui/typography';
 
 import { BasicTable } from '../../HELPERS/BasicTable';
 import { useFetchRequiredActionTableData } from '../hooks/useFetchRequiredActionTableData';
-import { RequiredActionCard, TitleEm } from '../RequiredActionCard';
+
+import {
+  InheritedRequiredActionCardProps,
+  RequiredActionCard,
+  TitleEm,
+} from './RequiredActionCard';
 
 interface ApplicationsTableData {
   name: string;
@@ -25,7 +30,9 @@ const demoApplicationsData: Array<LGTableDataType<ApplicationsTableData>> = [
   { name: 'Application-3' },
 ];
 
-export const ApplicationsCard = () => {
+export const ApplicationsCard = ({
+  ...props
+}: InheritedRequiredActionCardProps) => {
   const { isLoading, tableData } = useFetchRequiredActionTableData({
     demoData: demoApplicationsData,
   });
@@ -58,6 +65,7 @@ export const ApplicationsCard = () => {
           page.
         </Description>
       }
+      {...props}
     >
       <BasicTable table={table} />
     </RequiredActionCard>
diff --git a/packages/wizard/src/demo/RequiredActionCards/ClustersCard.tsx b/packages/wizard/src/demo/RequiredActionCards/ClustersCard.tsx
@@ -6,6 +6,7 @@ import { css } from '@leafygreen-ui/emotion';
 import ReplicaSet from '@leafygreen-ui/icon/ReplicaSet';
 import ShardedCluster from '@leafygreen-ui/icon/ShardedCluster';
 import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
+import { TableSkeleton } from '@leafygreen-ui/skeleton-loader';
 import {
   LGColumnDef,
   LGTableDataType,
@@ -16,7 +17,12 @@ import { Body, Description, Link } from '@leafygreen-ui/typography';
 
 import { BasicTable } from '../../HELPERS/BasicTable';
 import { useFetchRequiredActionTableData } from '../hooks/useFetchRequiredActionTableData';
-import { RequiredActionCard, TitleEm } from '../RequiredActionCard';
+
+import {
+  InheritedRequiredActionCardProps,
+  RequiredActionCard,
+  TitleEm,
+} from './RequiredActionCard';
 
 // TODO: This is likely defined somewhere in MMS
 type ClusterTier = 'Free' | 'Flex' | 'Dedicated';
@@ -172,9 +178,12 @@ const demoClustersData: Array<LGTableDataType<ClusterTableData>> = [
   },
 ];
 
-export const ClustersCard = () => {
+export const ClustersCard = ({
+  ...props
+}: InheritedRequiredActionCardProps) => {
   const { isLoading, tableData } = useFetchRequiredActionTableData({
     demoData: demoClustersData,
+    _demoDelay: 10_000,
   });
 
   const table = useLeafyGreenTable({
@@ -205,8 +214,22 @@ export const ClustersCard = () => {
           page.
         </Description>
       }
+      {...props}
     >
-      <BasicTable table={table} />
+      {isLoading ? (
+        <TableSkeleton
+          numCols={clustersColumns.length}
+          columnLabels={clustersColumns.map(col => (
+            <>
+              {typeof col.header === 'function'
+                ? col.header({})
+                : col.header ?? ''}
+            </>
+          ))}
+        />
+      ) : (
+        <BasicTable table={table} />
+      )}
     </RequiredActionCard>
   );
 };
diff --git a/packages/wizard/src/demo/RequiredActionCards/FederatedDbCard.tsx b/packages/wizard/src/demo/RequiredActionCards/FederatedDbCard.tsx
@@ -7,7 +7,12 @@ import { Description, Link } from '@leafygreen-ui/typography';
 import { BasicTable } from '../../HELPERS/BasicTable';
 import { TableHeaderWithSubtitle } from '../../HELPERS/TableHeaderWithSubtitle';
 import { useFetchRequiredActionTableData } from '../hooks/useFetchRequiredActionTableData';
-import { RequiredActionCard, TitleEm } from '../RequiredActionCard';
+
+import {
+  InheritedRequiredActionCardProps,
+  RequiredActionCard,
+  TitleEm,
+} from './RequiredActionCard';
 
 type FederatedDBType = 'Atlas SQL' | 'Online Archive' | 'Federated Instance';
 
@@ -92,7 +97,9 @@ const demoFederatedDbData: Array<FederatedDBTableData> = [
   },
 ];
 
-export const FederatedDbCard = () => {
+export const FederatedDbCard = ({
+  ...props
+}: InheritedRequiredActionCardProps) => {
   const { isLoading, tableData } = useFetchRequiredActionTableData({
     demoData: demoFederatedDbData,
   });
@@ -126,6 +133,7 @@ export const FederatedDbCard = () => {
           page.
         </Description>
       }
+      {...props}
     >
       <BasicTable table={table} />
     </RequiredActionCard>
diff --git a/packages/wizard/src/demo/RequiredActionCards/ModelApiKeysCard.tsx b/packages/wizard/src/demo/RequiredActionCards/ModelApiKeysCard.tsx
@@ -11,13 +11,15 @@ import { Description } from '@leafygreen-ui/typography';
 
 import { BasicTable } from '../../HELPERS/BasicTable';
 import { useFetchRequiredActionTableData } from '../hooks/useFetchRequiredActionTableData';
-import { RequiredActionCard, TitleEm } from '../RequiredActionCard';
+
+import {
+  InheritedRequiredActionCardProps,
+  RequiredActionCard,
+  TitleEm,
+} from './RequiredActionCard';
 
 const DateCell = (
-  cellData: CellContext<
-    LGTableDataType<ModelAPIKeyTableData>,
-    Date | undefined
-  >,
+  cellData: CellContext<LGTableDataType<ModelAPIKeyTableData>, unknown>,
 ) => {
   const val = cellData.getValue() as Date | undefined;
 
@@ -69,7 +71,9 @@ const demoModelApiKeysData: Array<LGTableDataType<ModelAPIKeyTableData>> = [
   },
 ];
 
-export const ModelApiKeysCard = () => {
+export const ModelApiKeysCard = ({
+  ...props
+}: InheritedRequiredActionCardProps) => {
   const { isLoading, tableData } = useFetchRequiredActionTableData({
     demoData: demoModelApiKeysData,
   });
@@ -93,6 +97,7 @@ export const ModelApiKeysCard = () => {
           All Model API keys will be deleted upon project deletion.
         </Description>
       }
+      {...props}
     >
       <BasicTable table={table} />
     </RequiredActionCard>
diff --git a/packages/wizard/src/demo/RequiredActionCards/PrivateEndpointsCard.tsx b/packages/wizard/src/demo/RequiredActionCards/PrivateEndpointsCard.tsx
@@ -20,7 +20,12 @@ import { Description, Link } from '@leafygreen-ui/typography';
 
 import { BasicTable } from '../../HELPERS/BasicTable';
 import { useFetchRequiredActionTableData } from '../hooks/useFetchRequiredActionTableData';
-import { RequiredActionCard, TitleEm } from '../RequiredActionCard';
+
+import {
+  InheritedRequiredActionCardProps,
+  RequiredActionCard,
+  TitleEm,
+} from './RequiredActionCard';
 
 const ServiceStatus = {
   Available: 'available',
@@ -232,7 +237,9 @@ const demoStreamProcessingPrivateEndpointsData: Array<
   },
 ];
 
-export const PrivateEndpointsCard = () => {
+export const PrivateEndpointsCard = ({
+  ...props
+}: InheritedRequiredActionCardProps) => {
   const [segCtrlValue, setSegCtrlValue] = useState<PrivateEndpointType>(
     PrivateEndpointType.Dedicated,
   );
@@ -300,6 +307,7 @@ export const PrivateEndpointsCard = () => {
           </Link>
         </Description>
       }
+      {...props}
     >
       {isLoading ? null : (
         <>
diff --git a/packages/wizard/src/demo/RequiredActionCards/RequiredActionCard.tsx b/packages/wizard/src/demo/RequiredActionCards/RequiredActionCard.tsx
@@ -21,7 +21,11 @@ const requiredActionCardStyles = css`
 
 const expandableCardContentStyles = css`
   padding: unset;
+`;
+
+const cardContentWrapperStyles = css`
   padding-bottom: ${spacing[400]}px;
+  overflow: hidden;
 `;
 
 export interface RequiredActionCardProps extends ExpandableCardProps {
@@ -30,6 +34,9 @@ export interface RequiredActionCardProps extends ExpandableCardProps {
   loadingDescription?: ReactNode;
 }
 
+export interface InheritedRequiredActionCardProps
+  extends Omit<ExpandableCardProps, 'title' | 'description'> {}
+
 export const TitleEm = ({ children }: PropsWithChildren<{}>) => {
   const { theme } = useDarkMode();
   return (
@@ -84,7 +91,7 @@ export const RequiredActionCard = ({
       defaultOpen={false}
       {...rest}
     >
-      {children}
+      <div className={cardContentWrapperStyles}>{children}</div>
     </ExpandableCard>
   );
 };
diff --git a/packages/wizard/src/demo/RequiredActionCards/StreamProcessingCard.tsx b/packages/wizard/src/demo/RequiredActionCards/StreamProcessingCard.tsx
@@ -6,7 +6,12 @@ import { Description, Link } from '@leafygreen-ui/typography';
 import { BasicTable } from '../../HELPERS/BasicTable';
 import { TableHeaderWithSubtitle } from '../../HELPERS/TableHeaderWithSubtitle';
 import { useFetchRequiredActionTableData } from '../hooks/useFetchRequiredActionTableData';
-import { RequiredActionCard, TitleEm } from '../RequiredActionCard';
+
+import {
+  InheritedRequiredActionCardProps,
+  RequiredActionCard,
+  TitleEm,
+} from './RequiredActionCard';
 
 interface StreamProcessingTableData {
   name: string;
@@ -61,7 +66,9 @@ const demoStreamProcessingData: Array<
   },
 ];
 
-export const StreamProcessingCard = () => {
+export const StreamProcessingCard = ({
+  ...props
+}: InheritedRequiredActionCardProps) => {
   const { isLoading, tableData } = useFetchRequiredActionTableData({
     demoData: demoStreamProcessingData,
   });
@@ -95,6 +102,7 @@ export const StreamProcessingCard = () => {
           page.
         </Description>
       }
+      {...props}
     >
       <BasicTable table={table} />
     </RequiredActionCard>
diff --git a/packages/wizard/src/demo/RequiredActions.tsx b/packages/wizard/src/demo/RequiredActions.tsx
@@ -62,7 +62,7 @@ export const RequiredActions = () => {
       </Description>
 
       <div className={reviewCardsContainerStyles}>
-        <ClustersCard />
+        <ClustersCard defaultOpen />
         <ApplicationsCard />
         <FederatedDbCard />
         <StreamProcessingCard />
