(CISC-2409) Quick filter with no options

Author: Jo-Lillie

packages/data-grid/src/quickFilter/QuickFilter.jsx

@@ -30,11 +30,28 @@ const propTypes = {
 };
 
 function QuickFilter({ filters, onFilterSelect }) {
+  /** Used for the options array when there is no items to filter by */
+  const emptyFilterOption = [
+    {
+      label: 'No items to filter by',
+      disabled: true,
+    },
+  ];
+
   return (
     <div className="dg-quick-filter-container">
       <div className="dg-quick-filter-filters">
         {filters.map((filter, idx) => {
-          return (
+          return !filter.options ? (
+            <ButtonSelect
+              className="dg-quick-filter-empty"
+              id={`quick-filter-${filter.field}-${idx}`}
+              key={`${idx + 1}`}
+              type="tertiary"
+              options={emptyFilterOption}
+              placeholder={filter.fieldLabel}
+            />
+          ) : (
             <ButtonSelect
               className="dg-quick-filter"
               id={`quick-filter-${filter.field}-${idx}`}

packages/data-grid/src/quickFilter/QuickFilter.md

@@ -49,6 +49,10 @@ const filters = [
       },
     ],
   },
+  {
+    fieldLabel: 'Empty filter',
+    field: 'Empty-array',
+  },
 ];
 
 

packages/data-grid/src/quickFilter/QuickFilter.scss

@@ -1,3 +1,5 @@
+@import '@puppet/sass-variables/_index';
+
 .dg-quick-filter-container{
 
     .dg-quick-filter-filters{
@@ -7,6 +9,19 @@
             padding-right: 8px;
             padding-bottom: 16px;
         }
+        .dg-quick-filter-empty{
+            padding-right: 8px;
+            padding-bottom: 16px;
+            font-style: italic;
+
+            .rc-menu-list-item-focused{
+                cursor: not-allowed;
+            }
+            .rc-menu-list-item-disabled {
+                .rc-menu-list-item-content {
+                  color: $puppet-n700;
+                }
+            }
+        }
     }
-    
 }