feat(DataTableControls): add number of hidden columns

securityscorecard · Jul 25, 2023 · dc684da · dc684da
1 parent 3b284d5
commit dc684da
Show file tree

Hide file tree

Showing 41 changed files with 32 additions and 15 deletions.
diff --git a/...s/expected/components_Datatable_internalComponents_BatchModule_With Columns.png b/...s/expected/components_Datatable_internalComponents_BatchModule_With Columns.png
diff --git a/...tatable_internalComponents_ControlsModule_ColumnsControls_With Custom Order.png b/...tatable_internalComponents_ControlsModule_ColumnsControls_With Custom Order.png
diff --git a/...omponents_Datatable_internalComponents_ControlsModule_ControlButton_Default.png b/...omponents_Datatable_internalComponents_ControlsModule_ControlButton_Default.png
diff --git a/...components_Datatable_internalComponents_ControlsModule_With Applied Columns.png b/...components_Datatable_internalComponents_ControlsModule_With Applied Columns.png
diff --git a/...mponents_Datatable_internalComponents_ControlsModule_With Applied Filtering.png b/...mponents_Datatable_internalComponents_ControlsModule_With Applied Filtering.png
diff --git a/...ponents_Datatable_internalComponents_ControlsModule_With Disabled Filtering.png b/...ponents_Datatable_internalComponents_ControlsModule_With Disabled Filtering.png
diff --git a/...components_Datatable_internalComponents_ControlsModule_With Disabled Search.png b/...components_Datatable_internalComponents_ControlsModule_With Disabled Search.png
diff --git a/...ed/components_Datatable_internalComponents_ControlsModule_With Open Columns.png b/...ed/components_Datatable_internalComponents_ControlsModule_With Open Columns.png
diff --git a/.../components_Datatable_internalComponents_ControlsModule_With Open Filtering.png b/.../components_Datatable_internalComponents_ControlsModule_With Open Filtering.png
diff --git a/...s/expected/components_Datatable_internalComponents_Datatable_Minimal Config.png b/...s/expected/components_Datatable_internalComponents_Datatable_Minimal Config.png
diff --git a/...d/components_Datatable_internalComponents_Datatable_With All Columns Hidden.png b/...d/components_Datatable_internalComponents_Datatable_With All Columns Hidden.png
diff --git a/...cted/components_Datatable_internalComponents_Datatable_With Applied Columns.png b/...cted/components_Datatable_internalComponents_Datatable_With Applied Columns.png
diff --git a/...ed/components_Datatable_internalComponents_Datatable_With Applied Filtering.png b/...ed/components_Datatable_internalComponents_Datatable_With Applied Filtering.png
diff --git a/...pected/components_Datatable_internalComponents_Datatable_With Batch Actions.png b/...pected/components_Datatable_internalComponents_Datatable_With Batch Actions.png
diff --git a/...s_Datatable_internalComponents_Datatable_With Custom Placeholder For Search.png b/...s_Datatable_internalComponents_Datatable_With Custom Placeholder For Search.png
diff --git a/...omponents_Datatable_internalComponents_Datatable_With Disabled Batch Module.png b/...omponents_Datatable_internalComponents_Datatable_With Disabled Batch Module.png
diff --git a/...able_internalComponents_Datatable_With Disabled Controls And Active Columns.png b/...able_internalComponents_Datatable_With Disabled Controls And Active Columns.png
diff --git a/...ble_internalComponents_Datatable_With Disabled Controls And Applied Columns.png b/...ble_internalComponents_Datatable_With Disabled Controls And Applied Columns.png
diff --git a/...ed/components_Datatable_internalComponents_Datatable_With Disabled Controls.png b/...ed/components_Datatable_internalComponents_Datatable_With Disabled Controls.png
diff --git a/...d/components_Datatable_internalComponents_Datatable_With Disabled Filtering.png b/...d/components_Datatable_internalComponents_Datatable_With Disabled Filtering.png
diff --git a/...cted/components_Datatable_internalComponents_Datatable_With Disabled Search.png b/...cted/components_Datatable_internalComponents_Datatable_With Disabled Search.png
diff --git a/...d/components_Datatable_internalComponents_Datatable_With Disabled Selection.png b/...d/components_Datatable_internalComponents_Datatable_With Disabled Selection.png
diff --git a/...ots/expected/components_Datatable_internalComponents_Datatable_With No Data.png b/...ots/expected/components_Datatable_internalComponents_Datatable_With No Data.png
diff --git a/...ted/components_Datatable_internalComponents_Datatable_With No Matching Data.png b/...ted/components_Datatable_internalComponents_Datatable_With No Matching Data.png
diff --git a/...onents_Datatable_internalComponents_Datatable_With Open And Applied Columns.png b/...onents_Datatable_internalComponents_Datatable_With Open And Applied Columns.png
diff --git a/...ents_Datatable_internalComponents_Datatable_With Open And Applied Filtering.png b/...ents_Datatable_internalComponents_Datatable_With Open And Applied Filtering.png
diff --git a/...xpected/components_Datatable_internalComponents_Datatable_With Open Columns.png b/...xpected/components_Datatable_internalComponents_Datatable_With Open Columns.png
diff --git a/...ected/components_Datatable_internalComponents_Datatable_With Open Filtering.png b/...ected/components_Datatable_internalComponents_Datatable_With Open Filtering.png
diff --git a/...cted/components_Datatable_internalComponents_Datatable_With Persisted State.png b/...cted/components_Datatable_internalComponents_Datatable_With Persisted State.png
diff --git a/...tatable_internalComponents_Datatable_With Selected Rows And Exclusion Logic.png b/...tatable_internalComponents_Datatable_With Selected Rows And Exclusion Logic.png
diff --git a/...pected/components_Datatable_internalComponents_Datatable_With Selected Rows.png b/...pected/components_Datatable_internalComponents_Datatable_With Selected Rows.png
diff --git a/...expected/components_Datatable_internalComponents_Datatable_With Single Page.png b/...expected/components_Datatable_internalComponents_Datatable_With Single Page.png
diff --git a/...tatable_internalComponents_Datatable_With Single Selection And Selected Row.png b/...tatable_internalComponents_Datatable_With Single Selection And Selected Row.png
diff --git a/...ted/components_Datatable_internalComponents_Datatable_With Single Selection.png b/...ted/components_Datatable_internalComponents_Datatable_With Single Selection.png
diff --git a/src/components/Datatable/BatchModule/BatchModule.tsx b/src/components/Datatable/BatchModule/BatchModule.tsx
@@ -67,8 +67,8 @@ const BatchModule: React.FC<BatchModuleProps> = ({
               }}
             >
               <ControlButton
-                iconName={SSCIconNames.reorder}
-                label="Columns"
+                iconName={SSCIconNames.table}
+                label="Toggle columns"
                 onClick={() => {
                   setIsColumnsActive((prev) => !prev);
                 }}

diff --git a/src/components/Datatable/ControlsModule/ControlsModule.tsx b/src/components/Datatable/ControlsModule/ControlsModule.tsx
@@ -244,16 +244,19 @@ function ControlsModule<D extends Record<string, unknown>>({
                     )
                   }
                 >
-                  <ControlButton
-                    iconName={SSCIconNames.table}
-                    label="Columns"
-                    onClick={() =>
-                      handleControlOnClick(
-                        ControlTypes.columns,
-                        controlsState[ControlTypes.columns].isActive,
-                      )
-                    }
-                  />
+                  {(props) => (
+                    <ControlButton
+                      iconName={SSCIconNames.table}
+                      label="Toggle columns"
+                      onClick={() =>
+                        handleControlOnClick(
+                          ControlTypes.columns,
+                          controlsState[ControlTypes.columns].isActive,
+                        )
+                      }
+                      {...props}
+                    />
+                  )}
                 </ColumnsControls>
               )}
               {shouldShowFiltering && (

diff --git a/src/components/Datatable/components/ColumnsControls/ColumnsControls.tsx b/src/components/Datatable/components/ColumnsControls/ColumnsControls.tsx
@@ -61,11 +61,13 @@ const ColumnsControls: React.FC<ColumnsControlsProps> = ({
 
   return (
     <span ref={parentRef}>
-      {children}
+      {typeof children === 'function'
+        ? children({ hiddenColumns: hiddenColumns.length })
+        : children}
       <ControlDropdown
         isOpen={isOpen}
         parentRef={parentRef}
-        title="Columns"
+        title="Toggle columns"
         onClose={handleCloseColumnsControl}
         onReset={handleResetColumnsControl}
         onSubmit={handleApplyColumnsControl}
@@ -103,6 +105,7 @@ const ColumnsControls: React.FC<ColumnsControlsProps> = ({
 };
 
 ColumnsControls.propTypes = {
+  children: PropTypes.oneOf(PropTypes.func, PropTypes.node).isRequired,
   onClose: PropTypes.func.isRequired,
   onApply: PropTypes.func.isRequired,
   isOpen: PropTypes.bool,

diff --git a/src/components/Datatable/components/ColumnsControls/ColumnsControls.types.ts b/src/components/Datatable/components/ColumnsControls/ColumnsControls.types.ts
@@ -1,7 +1,12 @@
+interface RenderProps {
+  hiddenColumns: number;
+}
+
 export interface ColumnsControlsProps {
   isOpen?: boolean;
   onOpen: () => void;
   onClose: () => void;
   onApply: (shouldApply: boolean) => void;
   onReset?: () => void;
+  children: React.ReactNode | ((obj: RenderProps) => React.ReactNode);
 }
diff --git a/src/components/Datatable/components/ControlButton/ControlButton.stories.tsx b/src/components/Datatable/components/ControlButton/ControlButton.stories.tsx
@@ -22,7 +22,7 @@ export const Default: Story<ControlButtonProps> = (args) => (
     <Padbox paddingSize="sm">
       <Inline align="center" gap="mdPlus">
         <ControlButton {...args} />
-        <ControlButton {...args} appliedFilters={4} />
+        <ControlButton {...args} hiddenColumns={4} />
       </Inline>
     </Padbox>
     <Padbox paddingSize="sm">

diff --git a/src/components/Datatable/components/ControlButton/ControlButton.tsx b/src/components/Datatable/components/ControlButton/ControlButton.tsx
@@ -14,6 +14,7 @@ const ControlButton: React.FC<ControlButtonProps> = ({
   appliedFilters = 0,
   className = '',
   onClick,
+  hiddenColumns = 0,
 }) => (
   <Button
     className={className}
@@ -26,6 +27,9 @@ const ControlButton: React.FC<ControlButtonProps> = ({
     <Inline align="center" gap="sm">
       <span>{label}</span>
       {appliedFilters > 0 && <Badge count={appliedFilters} variant="neutral" />}
+      {hiddenColumns > 0 && (
+        <Badge text={`${hiddenColumns} hidden`} variant="neutral" />
+      )}
     </Inline>
   </Button>
 );
@@ -35,6 +39,7 @@ ControlButton.propTypes = {
   iconName: PropTypes.oneOf<SSCIcons>(Object.values(SSCIconNames)).isRequired,
   onClick: PropTypes.func.isRequired,
   appliedFilters: PropTypes.number,
+  hiddenColumns: PropTypes.number,
   className: PropTypes.string,
 };
 

diff --git a/src/components/Datatable/components/ControlButton/ControlButton.types.ts b/src/components/Datatable/components/ControlButton/ControlButton.types.ts
@@ -4,6 +4,7 @@ export interface ControlButtonProps {
   label: string;
   iconName: SSCIcons;
   appliedFilters?: number;
+  hiddenColumns?: number;
   onClick: () => void;
   className?: string;
 }