From e306afcd77e68cd963f74a9c0ee03492357f92d2 Mon Sep 17 00:00:00 2001
From: Jo Lillie <jo.lillie@puppet.com>
Date: Wed, 9 Mar 2022 09:15:54 +0000
Subject: [PATCH] (CISC-2409) Quick filter with no options

---
 package-lock.json                             |   5 +
 package.json                                  |   4 +-
 .../__snapshots__/quickFitler.test.jsx.snap   | 208 +++++++++++++++++-
 .../src/__test__/quickFitler.test.jsx         |  37 +++-
 .../data-grid/src/quickFilter/QuickFilter.jsx |  31 ++-
 .../data-grid/src/quickFilter/QuickFilter.md  |   6 +-
 .../src/quickFilter/QuickFilter.scss          |  15 +-
 packages/data-grid/src/quickFilter/README.md  |  88 ++++++++
 8 files changed, 379 insertions(+), 15 deletions(-)
 create mode 100644 packages/data-grid/src/quickFilter/README.md

diff --git a/package-lock.json b/package-lock.json
index 2c6f1e66f..309229f34 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1706,6 +1706,11 @@
         }
       }
     },
+    "classnames": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
+      "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
+    },
     "cli-cursor": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-2.1.0.tgz",
diff --git a/package.json b/package.json
index ca3f49c7d..14d3839f3 100644
--- a/package.json
+++ b/package.json
@@ -19,5 +19,7 @@
   "engines": {
     "node": "12.4.0"
   },
-  "dependencies": {}
+  "dependencies": {
+    "classnames": "^2.3.1"
+  }
 }
diff --git a/packages/data-grid/src/__test__/__snapshots__/quickFitler.test.jsx.snap b/packages/data-grid/src/__test__/__snapshots__/quickFitler.test.jsx.snap
index ad2ef588b..9842b7f44 100644
--- a/packages/data-grid/src/__test__/__snapshots__/quickFitler.test.jsx.snap
+++ b/packages/data-grid/src/__test__/__snapshots__/quickFitler.test.jsx.snap
@@ -2,6 +2,7 @@
 
 exports[`Snapshot test Check component matches previous HTML snapshot 1`] = `
 <QuickFilter
+  emptyFilterLabel="test empty filter label"
   filters={
     Array [
       Object {
@@ -46,6 +47,11 @@ exports[`Snapshot test Check component matches previous HTML snapshot 1`] = `
           },
         ],
       },
+      Object {
+        "field": "Empty-array",
+        "fieldLabel": "Empty filter",
+        "options": Array [],
+      },
     ]
   }
   onFilterSelect={[MockFunction]}
@@ -57,7 +63,7 @@ exports[`Snapshot test Check component matches previous HTML snapshot 1`] = `
       className="dg-quick-filter-filters"
     >
       <ButtonSelect
-        className="dg-quick-filter"
+        className="dg-quick-filter-filter dg-quick-filter"
         id="quick-filter-All-Operating-System-0"
         key="1"
         onChange={[Function]}
@@ -86,7 +92,7 @@ exports[`Snapshot test Check component matches previous HTML snapshot 1`] = `
         <ButtonSelect
           anchor="bottom left"
           applyImmediately={false}
-          className="dg-quick-filter"
+          className="dg-quick-filter-filter dg-quick-filter"
           disabled={false}
           icon={null}
           id="quick-filter-All-Operating-System-0"
@@ -121,7 +127,7 @@ exports[`Snapshot test Check component matches previous HTML snapshot 1`] = `
           width={null}
         >
           <div
-            className="rc-button-select rc-button-select-closed dg-quick-filter"
+            className="rc-button-select rc-button-select-closed dg-quick-filter-filter dg-quick-filter"
             onBlur={[Function]}
             style={Object {}}
           >
@@ -409,7 +415,7 @@ exports[`Snapshot test Check component matches previous HTML snapshot 1`] = `
         </ButtonSelect>
       </ButtonSelect>
       <ButtonSelect
-        className="dg-quick-filter"
+        className="dg-quick-filter-filter dg-quick-filter"
         id="quick-filter-Puppet-installed-1"
         key="2"
         onChange={[Function]}
@@ -438,7 +444,7 @@ exports[`Snapshot test Check component matches previous HTML snapshot 1`] = `
         <ButtonSelect
           anchor="bottom left"
           applyImmediately={false}
-          className="dg-quick-filter"
+          className="dg-quick-filter-filter dg-quick-filter"
           disabled={false}
           icon={null}
           id="quick-filter-Puppet-installed-1"
@@ -473,7 +479,7 @@ exports[`Snapshot test Check component matches previous HTML snapshot 1`] = `
           width={null}
         >
           <div
-            className="rc-button-select rc-button-select-closed dg-quick-filter"
+            className="rc-button-select rc-button-select-closed dg-quick-filter-filter dg-quick-filter"
             onBlur={[Function]}
             style={Object {}}
           >
@@ -760,6 +766,196 @@ exports[`Snapshot test Check component matches previous HTML snapshot 1`] = `
           </div>
         </ButtonSelect>
       </ButtonSelect>
+      <ButtonSelect
+        className="dg-quick-filter-filter dg-quick-filter dg-quick-filter-empty"
+        id="quick-filter-Empty-array-2"
+        key="3"
+        onChange={[Function]}
+        options={
+          Array [
+            Object {
+              "disabled": true,
+              "label": "test empty filter label",
+              "value": "",
+            },
+          ]
+        }
+        placeholder="Empty filter"
+        type="tertiary"
+      >
+        <ButtonSelect
+          anchor="bottom left"
+          applyImmediately={false}
+          className="dg-quick-filter-filter dg-quick-filter dg-quick-filter-empty"
+          disabled={false}
+          icon={null}
+          id="quick-filter-Empty-array-2"
+          innerFocus={false}
+          loading={false}
+          multiple={false}
+          onChange={[Function]}
+          options={
+            Array [
+              Object {
+                "disabled": true,
+                "label": "test empty filter label",
+                "value": "",
+              },
+            ]
+          }
+          placeholder="Empty filter"
+          style={Object {}}
+          type="tertiary"
+          value={null}
+          weight="bold"
+          width={null}
+        >
+          <div
+            className="rc-button-select rc-button-select-closed dg-quick-filter-filter dg-quick-filter dg-quick-filter-empty"
+            onBlur={[Function]}
+            style={Object {}}
+          >
+            <Button
+              aria-controls="quick-filter-Empty-array-2-menu"
+              aria-expanded={false}
+              aria-haspopup="true"
+              as="button"
+              className="rc-button-select-target"
+              disabled={false}
+              forwardRefAs="ref"
+              icon={null}
+              iconSize="medium"
+              innerFocus={false}
+              loading={false}
+              onClick={[Function]}
+              style={null}
+              trailingIcon="chevron-down"
+              type="tertiary"
+              weight="bold"
+            >
+              <button
+                aria-controls="quick-filter-Empty-array-2-menu"
+                aria-expanded={false}
+                aria-haspopup="true"
+                aria-label="Empty filter"
+                className="rc-button rc-button-tertiary rc-button-bold rc-button-trailing-icon rc-button-full rc-button-select-target"
+                disabled={false}
+                onClick={[Function]}
+                style={null}
+                type="button"
+              >
+                <span
+                  className="rc-button-content"
+                >
+                  Empty filter
+                </span>
+                <Icon
+                  className="rc-button-icon-svg"
+                  size="medium"
+                  style={Object {}}
+                  svg={null}
+                  type="chevron-down"
+                  viewBox={null}
+                >
+                  <svg
+                    className="rc-icon rc-icon-chevron-down rc-button-icon-svg"
+                    height="16px"
+                    style={
+                      Object {
+                        "height": "16px",
+                        "width": "16px",
+                      }
+                    }
+                    viewBox="0 0 16 16"
+                    width="16px"
+                  >
+                    <path
+                      d="M8,8.58578644 L10.2928932,6.29289322 C10.6834175,5.90236893 11.3165825,5.90236893 11.7071068,6.29289322 C12.0976311,6.68341751 12.0976311,7.31658249 11.7071068,7.70710678 L8.70710678,10.7071068 C8.31658249,11.0976311 7.68341751,11.0976311 7.29289322,10.7071068 L4.29289322,7.70710678 C3.90236893,7.31658249 3.90236893,6.68341751 4.29289322,6.29289322 C4.68341751,5.90236893 5.31658249,5.90236893 5.70710678,6.29289322 L8,8.58578644 Z"
+                      fillRule="evenodd"
+                    />
+                  </svg>
+                </Icon>
+              </button>
+            </Button>
+            <OptionMenuList
+              actionLabel="Apply"
+              aria-labelledby="quick-filter-Empty-array-2"
+              autocomplete={false}
+              cancelLabel="Cancel"
+              className=""
+              focusedIndex={0}
+              footer={null}
+              id="quick-filter-Empty-array-2-menu"
+              multiple={false}
+              onActionClick={[Function]}
+              onBlur={[Function]}
+              onChange={[Function]}
+              onClickItem={[Function]}
+              onEscape={[Function]}
+              onFocusItem={[Function]}
+              options={
+                Array [
+                  Object {
+                    "disabled": true,
+                    "label": "test empty filter label",
+                    "value": "",
+                  },
+                ]
+              }
+              selected={null}
+              showCancel={false}
+              style={Object {}}
+            >
+              <div
+                className="rc-menu-list rc-option-menu-list-single"
+                style={Object {}}
+              >
+                <ul
+                  aria-activedescendant="quick-filter-Empty-array-2-menu-"
+                  aria-labelledby="quick-filter-Empty-array-2"
+                  aria-multiselectable={false}
+                  className="rc-menu-list-inner"
+                  id="quick-filter-Empty-array-2-menu"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onFocus={[Function]}
+                  onKeyDown={[Function]}
+                  role="listbox"
+                  tabIndex={0}
+                >
+                  <ForwardRef
+                    disabled={true}
+                    focused={true}
+                    icon={null}
+                    id="quick-filter-Empty-array-2-menu-"
+                    key=""
+                    onClick={[Function]}
+                    onMouseEnter={[Function]}
+                    selected={false}
+                    svg={null}
+                    type="option"
+                  >
+                    <li
+                      aria-selected={false}
+                      className="rc-menu-list-item rc-menu-list-item-disabled rc-menu-list-item-focused"
+                      id="quick-filter-Empty-array-2-menu-"
+                      onClick={[Function]}
+                      onMouseEnter={[Function]}
+                      role="option"
+                    >
+                      <span
+                        className="rc-menu-list-item-content"
+                      >
+                        test empty filter label
+                      </span>
+                    </li>
+                  </ForwardRef>
+                </ul>
+              </div>
+            </OptionMenuList>
+          </div>
+        </ButtonSelect>
+      </ButtonSelect>
     </div>
   </div>
 </QuickFilter>
diff --git a/packages/data-grid/src/__test__/quickFitler.test.jsx b/packages/data-grid/src/__test__/quickFitler.test.jsx
index fa008ff4c..40755e5c9 100644
--- a/packages/data-grid/src/__test__/quickFitler.test.jsx
+++ b/packages/data-grid/src/__test__/quickFitler.test.jsx
@@ -48,22 +48,53 @@ const filters = [
       },
     ],
   },
+  {
+    fieldLabel: 'Empty filter',
+    field: 'Empty-array',
+    options: [],
+  },
 ];
 
+const emptyFilterLabel = 'test empty filter label';
+
 const mockfunc = jest.fn();
 const wrapper = mount(
-  <QuickFilter filters={filters} onFilterSelect={mockfunc} />,
+  <QuickFilter
+    filters={filters}
+    onFilterSelect={mockfunc}
+    emptyFilterLabel={emptyFilterLabel}
+  />,
 );
-
 describe('Snapshot test', () => {
   test('Check component matches previous HTML snapshot', () => {
     expect(wrapper).toMatchSnapshot();
   });
 });
 
+describe('Check total number of quick filters', () => {
+  test('Number of quick filters rendered', () => {
+    expect(wrapper.find('div.dg-quick-filter-filter')).toHaveLength(3);
+  });
+});
+
+describe('Check number of empty quick filters', () => {
+  test('Number of empty quick filters rendered', () => {
+    expect(wrapper.find('div.dg-quick-filter-empty')).toHaveLength(1);
+  });
+
+  test('Empty filter label text', () => {
+    expect(
+      wrapper
+        .find('div.dg-quick-filter-empty')
+        .find('span.rc-menu-list-item-content')
+        .text(),
+    ).toEqual('test empty filter label');
+  });
+});
+
 describe('Check component', () => {
   test('Number of dropdowns rendered ', () => {
-    expect(wrapper.find('ButtonSelect.dg-quick-filter')).toHaveLength(4);
+    expect(wrapper.find('ButtonSelect.dg-quick-filter')).toHaveLength(6);
   });
 
   test('onFilterSelect function gets called', () => {
diff --git a/packages/data-grid/src/quickFilter/QuickFilter.jsx b/packages/data-grid/src/quickFilter/QuickFilter.jsx
index db70952d6..6e54e44bb 100644
--- a/packages/data-grid/src/quickFilter/QuickFilter.jsx
+++ b/packages/data-grid/src/quickFilter/QuickFilter.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import classnames from 'classnames';
 import { arrayOf, shape, func, string } from 'prop-types';
 import { ButtonSelect } from '@puppet/react-components';
 import './QuickFilter.scss';
@@ -27,20 +28,43 @@ const propTypes = {
   ).isRequired,
   /** Function called whenever a user clicks an action */
   onFilterSelect: func.isRequired,
+  /** Text which will be displayed if there are no options to filter by */
+  emptyFilterLabel: string,
 };
 
-function QuickFilter({ filters, onFilterSelect }) {
+const defaultProps = {
+  emptyFilterLabel: 'No items to filter by',
+};
+
+function QuickFilter({ filters, onFilterSelect, emptyFilterLabel }) {
+  /** Used for the options array when there is no items to filter by */
+  const emptyFilterOption = [
+    {
+      label: emptyFilterLabel,
+      disabled: true,
+      value: '',
+    },
+  ];
+
   return (
     <div className="dg-quick-filter-container">
       <div className="dg-quick-filter-filters">
         {filters.map((filter, idx) => {
           return (
             <ButtonSelect
-              className="dg-quick-filter"
+              className={classnames(
+                'dg-quick-filter-filter',
+                'dg-quick-filter',
+                {
+                  'dg-quick-filter-empty': filter.options.length === 0,
+                },
+              )}
               id={`quick-filter-${filter.field}-${idx}`}
               key={`${idx + 1}`}
               type="tertiary"
-              options={filter.options}
+              options={
+                filter.options.length === 0 ? emptyFilterOption : filter.options
+              }
               placeholder={filter.fieldLabel}
               onChange={value =>
                 onFilterSelect(filter.field, filter.fieldLabel, value)
@@ -54,5 +78,6 @@ function QuickFilter({ filters, onFilterSelect }) {
 }
 
 QuickFilter.propTypes = propTypes;
+QuickFilter.defaultProps = defaultProps;
 
 export default QuickFilter;
diff --git a/packages/data-grid/src/quickFilter/QuickFilter.md b/packages/data-grid/src/quickFilter/QuickFilter.md
index 5c57c2e47..5b9f09d67 100644
--- a/packages/data-grid/src/quickFilter/QuickFilter.md
+++ b/packages/data-grid/src/quickFilter/QuickFilter.md
@@ -49,9 +49,13 @@ const filters = [
       },
     ],
   },
+  {
+    fieldLabel: 'Empty filter',
+    field: 'Empty-array',
+    options: [],
+  },
 ];
 
-
 <QuickFilter
 filters={filters}
 onFilterSelect={onFilterSelect}
diff --git a/packages/data-grid/src/quickFilter/QuickFilter.scss b/packages/data-grid/src/quickFilter/QuickFilter.scss
index 7b6732be0..d5566f04b 100644
--- a/packages/data-grid/src/quickFilter/QuickFilter.scss
+++ b/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,17 @@
             padding-right: 8px;
             padding-bottom: 16px;
         }
+        .dg-quick-filter-empty{
+            font-style: italic;
+
+            .rc-menu-list-item-focused{
+                cursor: not-allowed;
+            }
+            .rc-menu-list-item-disabled {
+                .rc-menu-list-item-content {
+                  color: $puppet-n700;
+                }
+            }
+        }
     }
-    
 }
diff --git a/packages/data-grid/src/quickFilter/README.md b/packages/data-grid/src/quickFilter/README.md
new file mode 100644
index 000000000..4f76f400c
--- /dev/null
+++ b/packages/data-grid/src/quickFilter/README.md
@@ -0,0 +1,88 @@
+### Quick Filter
+
+The quick filter is a component that accepts an outer array `filters` of objects that include the quick filters label "fieldLabel", the text displayed to the user and a unique key "field" (this should match the datakey of the column being filtered) with an inner `options` array of objects, the possible selections a user can pick from under a certain field. This includes the "value" returned after a users selection for a dataset to be filtered by, an "icon" to add to a specific row (optional) and the "label" text which will be displayed for each option. The `onFilterSelect` is a function that is called when a user clicks an option to filter by. 
+
+```jsx
+const onFilterSelect = (filter,filterLabel, value) =>{
+    console.log('A filter was picked', filter, filterLabel, value)
+}
+
+const filters = [
+  {
+    fieldLabel: 'All Operating System',
+    field: 'All-Operating-System',
+    options: [
+      {
+        value: 'linux',
+        icon: 'pencil',
+        label: 'linux',
+      },
+      {
+        value: 'Windows',
+        icon: 'send',
+        label: 'Windows',
+      },
+      {
+        value: 'MacOS',
+        label: 'MacOS',
+        icon: 'link',
+      },
+    ],
+  },
+  {
+    fieldLabel: 'Puppet installed',
+    field: 'Puppet-installed',
+    options: [
+      {
+        value: 'True',
+        icon: 'pencil',
+        label: 'True',
+      },
+      {
+        value: 'False',
+        icon: 'send',
+        label: 'False',
+      },
+      {
+        value: 'Unknown',
+        label: 'Unknown',
+        icon: 'link',
+      },
+    ],
+  },
+];
+
+<QuickFilter
+filters={filters}
+onFilterSelect={onFilterSelect}
+/>
+```
+
+### Empty State
+
+Where there is no items to filter by, resulting in an empty array for the filters options, the quick filter will be displayed in its empty state. This is defined by `emptyFilterOption` with an `emptyFilterLabel` message displayed to the user which can be customized. This is not clickable and by default this message is "No items to filter by".
+
+```jsx
+const filters = [
+  {
+    fieldLabel: 'Empty filter',
+    field: 'Empty-array',
+    options: [],
+  },
+];
+
+const emptyFilterLabel = 'No items to filter by';
+
+  const emptyFilterOption = [
+    {
+      label: emptyFilterLabel,
+      disabled: true,
+      value: '',
+    },
+  ];
+
+   <QuickFilter
+    filters={filters}
+    emptyFilterLabel={emptyFilterLabel}
+  />;
+  ```