From 29d0afacfd244c5366bb65b1db8a05df53504125 Mon Sep 17 00:00:00 2001
From: Taylor Seamans <taylor.seamans@yahoo.com>
Date: Fri, 12 Jan 2024 15:42:08 -0800
Subject: [PATCH] Update filtering examples and guidance to align with latest
 recommendations

---
 .../filtering/FilteringTable/FilterServers.js |  8 +-
 .../filtering/FilteringWithSelect.js          | 12 ++-
 .../components/ColumnSettings.js              | 86 -------------------
 .../components/ColumnSettingsExample.js       | 25 +++---
 .../components/TableCustomizationExample.js   |  8 +-
 .../table-customization/components/index.js   |  3 +-
 .../templates/datatable-customization.mdx     | 24 ++----
 7 files changed, 37 insertions(+), 129 deletions(-)
 delete mode 100644 aries-site/src/examples/templates/table-customization/components/ColumnSettings.js

diff --git a/aries-site/src/examples/templates/filtering/FilteringTable/FilterServers.js b/aries-site/src/examples/templates/filtering/FilteringTable/FilterServers.js
index 922f8fdbc..b168596ea 100644
--- a/aries-site/src/examples/templates/filtering/FilteringTable/FilterServers.js
+++ b/aries-site/src/examples/templates/filtering/FilteringTable/FilterServers.js
@@ -91,10 +91,12 @@ export const FilterServers = () => (
     height={{ min: 'medium' }}
   >
     <Data data={serverhealth} properties={properties}>
-      <Toolbar>
-        <DataSearch responsive />
+      <Toolbar gap="medium">
+        <Toolbar>
+          <DataSearch responsive />
+          <DataFilters layer />
+        </Toolbar>
         <DataTableColumns drop tip="Configure columns" options={options} />
-        <DataFilters layer />
         {/* Flex Box added for spacing between Button */}
         <Box flex />
         <Button secondary label="Add server" />
diff --git a/aries-site/src/examples/templates/filtering/FilteringWithSelect.js b/aries-site/src/examples/templates/filtering/FilteringWithSelect.js
index 54d5bfc89..9fa39cdf5 100644
--- a/aries-site/src/examples/templates/filtering/FilteringWithSelect.js
+++ b/aries-site/src/examples/templates/filtering/FilteringWithSelect.js
@@ -3,6 +3,7 @@ import {
   Box,
   Data,
   DataSearch,
+  DataFilters,
   DataSummary,
   DataView,
   Grid,
@@ -42,9 +43,16 @@ export const FilteringWithSelect = () => (
             { name: 'Paused', properties: { status: ['Paused'] } },
             { name: 'Ready', properties: { status: ['Ready'] } },
           ]}
+          properties={{
+            name: { label: 'Name' },
+            status: { label: 'Status' },
+          }}
         >
-          <Toolbar>
-            <DataSearch responsive />
+          <Toolbar gap="medium">
+            <Toolbar>
+              <DataSearch responsive />
+              <DataFilters layer />
+            </Toolbar>
             <DataView />
           </Toolbar>
           <DataSummary />
diff --git a/aries-site/src/examples/templates/table-customization/components/ColumnSettings.js b/aries-site/src/examples/templates/table-customization/components/ColumnSettings.js
deleted file mode 100644
index 82c1a5752..000000000
--- a/aries-site/src/examples/templates/table-customization/components/ColumnSettings.js
+++ /dev/null
@@ -1,86 +0,0 @@
-import { useState } from 'react';
-import PropTypes from 'prop-types';
-
-import { Box, CheckBoxGroup, List, Tab, Tabs, TextInput } from 'grommet';
-import { Search } from 'grommet-icons';
-
-export const ColumnSettings = ({
-  columns,
-  visibleColumns,
-  setVisibleColumns,
-  open,
-  ...rest
-}) => {
-  const [filteredColumns, setFilteredColumns] = useState(columns);
-  const [search, setSearch] = useState('');
-
-  const filterColumns = (array, searchValue = search) => {
-    let filterResults = array;
-
-    if (searchValue) {
-      filterResults = array.filter(o =>
-        Object.keys(o).some(
-          k =>
-            typeof o[k] === 'string' &&
-            o[k].toLowerCase().includes(searchValue.toLowerCase()),
-        ),
-      );
-    }
-    return filterResults;
-  };
-
-  const getColumn = property =>
-    columns.find(column => column.property === property);
-
-  return (
-    <Box pad="small" elevation="medium">
-      <Tabs {...rest}>
-        <Tab title="Select columns">
-          <Box pad={{ top: 'xsmall' }}>
-            <TextInput
-              type="search"
-              icon={<Search id="search-cols-icon" />}
-              aria-labelledby="search-cols-icon"
-              placeholder="Search"
-              value={search}
-              onChange={event => {
-                setSearch(event.target.value);
-                const nextColumns = filterColumns(columns, event.target.value);
-                setFilteredColumns(nextColumns);
-              }}
-              // once the Drop opens and TextInput renders, focus it
-              autoFocus={open}
-            />
-            <CheckBoxGroup
-              options={filteredColumns}
-              valueKey="property"
-              labelKey="header"
-              value={visibleColumns.map(column => column.property)}
-              onChange={({ value }) => setVisibleColumns(value.map(getColumn))}
-            />
-          </Box>
-        </Tab>
-        <Tab title="Order columns">
-          <List
-            data={visibleColumns}
-            onOrder={orderedData => setVisibleColumns(orderedData)}
-            pad="none"
-            primaryKey="header"
-          />
-        </Tab>
-      </Tabs>
-    </Box>
-  );
-};
-
-const ColumnType = PropTypes.shape({
-  header: PropTypes.string,
-  property: PropTypes.string,
-});
-
-ColumnSettings.propTypes = {
-  columns: PropTypes.arrayOf(ColumnType).isRequired,
-  visibleColumns: PropTypes.arrayOf(ColumnType).isRequired,
-  setVisibleColumns: PropTypes.func,
-  open: PropTypes.bool,
-};
diff --git a/aries-site/src/examples/templates/table-customization/components/ColumnSettingsExample.js b/aries-site/src/examples/templates/table-customization/components/ColumnSettingsExample.js
index ed7dacb2c..91a4d0a50 100644
--- a/aries-site/src/examples/templates/table-customization/components/ColumnSettingsExample.js
+++ b/aries-site/src/examples/templates/table-customization/components/ColumnSettingsExample.js
@@ -1,22 +1,17 @@
-import { useState } from 'react';
-import { ColumnSettings } from './ColumnSettings';
+import { Data, DataTableColumns } from 'grommet';
 
 const COLUMNS = [
-  { property: 'name', header: 'Name', primary: true },
-  { property: 'status', header: 'Status' },
-  { property: 'role', header: 'Role' },
-  { property: 'location', header: 'Location' },
-  { property: 'hoursAvailable', header: 'Hours available', align: 'end' },
+  { property: 'name', label: 'Name' },
+  { property: 'status', label: 'Status' },
+  { property: 'role', label: 'Role' },
+  { property: 'location', label: 'Location' },
+  { property: 'hoursAvailable', label: 'Hours available' },
 ];
 
-export const ColumnSettingsExample = props => {
-  const [visibleColumns, setVisibleColumns] = useState(COLUMNS);
+export const ColumnSettingsExample = () => {
   return (
-    <ColumnSettings
-      columns={COLUMNS}
-      visibleColumns={visibleColumns}
-      setVisibleColumns={setVisibleColumns}
-      {...props}
-    />
+    <Data data={[]}>
+      <DataTableColumns options={COLUMNS} />
+    </Data>
   );
 };
diff --git a/aries-site/src/examples/templates/table-customization/components/TableCustomizationExample.js b/aries-site/src/examples/templates/table-customization/components/TableCustomizationExample.js
index c6f2b6b88..ecde1cabc 100644
--- a/aries-site/src/examples/templates/table-customization/components/TableCustomizationExample.js
+++ b/aries-site/src/examples/templates/table-customization/components/TableCustomizationExample.js
@@ -111,10 +111,12 @@ const Results = () => {
   const properties = buildProperties();
   return (
     <Data data={allData} flex properties={properties}>
-      <Toolbar>
-        <DataSearch responsive />
+      <Toolbar gap="medium">
+        <Toolbar>
+          <DataSearch responsive />
+          <DataFilters layer />
+        </Toolbar>
         <DataTableColumns drop options={options} />
-        <DataFilters layer />
         {/* Flex box for spacing between Data components and Actions button  */}
         <Box flex />
         <Menu label="Actions" kind="toolbar" />
diff --git a/aries-site/src/examples/templates/table-customization/components/index.js b/aries-site/src/examples/templates/table-customization/components/index.js
index 74efc873e..0a1753bf8 100644
--- a/aries-site/src/examples/templates/table-customization/components/index.js
+++ b/aries-site/src/examples/templates/table-customization/components/index.js
@@ -1,3 +1,2 @@
-export * from './ColumnSettings';
 export * from './ColumnSettingsExample';
-export * from './TableCustomizationExample';
\ No newline at end of file
+export * from './TableCustomizationExample';
diff --git a/aries-site/src/pages/templates/datatable-customization.mdx b/aries-site/src/pages/templates/datatable-customization.mdx
index 366ad2470..c4e652fef 100644
--- a/aries-site/src/pages/templates/datatable-customization.mdx
+++ b/aries-site/src/pages/templates/datatable-customization.mdx
@@ -3,7 +3,6 @@ import {
   ColumnSettingsExample,
 } from '../../examples';
 import { Example } from '../../layouts';
-import { Box } from 'grommet';
 
 <Example
   code={[
@@ -32,7 +31,7 @@ which columns should appear in the DataTable and another for ordering the column
 
 Since we want to customize the data table itself, we have separate controls for changing
 which columns are shown in the data table and their order. Place a button with a `Manage columns`
-icon between the search and filter controls on the left. These view controls change what items
+icon to the right of the search and filter controls. These view controls change what items
 are shown in the data table or how they are presented rather than changing the items themselves.
 The right aligned `Actions` menu is mainly for actions which modify items in the data table.
 
@@ -48,13 +47,11 @@ the user checks or unchecks a column, as opposed to waiting until the dropdown c
 
 The user can also search for a specific column by typing in the Search input.
 
-<Example
-  code="https://raw.githubusercontent.com/grommet/hpe-design-system/master/aries-site/src/examples/templates/table-customization/components/ColumnSettings.js"
-  horizontalLayout
-  height="none"
-  width={{ min: 'medium' }}
->
-  <ColumnSettingsExample activeIndex={0} />
+<Example 
+  code="https://raw.githubusercontent.com/grommet/hpe-design-system/master/aries-site/src/examples/templates/table-customization/components/ColumnSettingsExample.js"
+
+height="none">
+    <ColumnSettingsExample />
 </Example>
 
 ### Column order
@@ -66,12 +63,3 @@ the move up/move down buttons that are present next to each column name.
 
 Similar to column selection, the reordering of the data table columns should take
 place immediately, as opposed to waiting until the dropdown closes.
-
-<Example
-  code="https://raw.githubusercontent.com/grommet/hpe-design-system/master/aries-site/src/examples/templates/table-customization/components/ColumnSettings.js"
-  horizontalLayout
-  height="none"
-  width={{ min: 'medium' }}
->
-  <ColumnSettingsExample activeIndex={1} />
-</Example>