chore: Enhances property filter test page (#2743)

cloudscape-design · Sep 23, 2024 · 591a6d7 · 591a6d7
1 parent 3e2b4cf
commit 591a6d7
Show file tree

Hide file tree

Showing 3 changed files with 190 additions and 82 deletions.
diff --git a/pages/property-filter/common-props.tsx b/pages/property-filter/common-props.tsx
@@ -1,5 +1,8 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import { Badge, SpaceBetween } from '~components';
 import { PropertyFilterProps } from '~components/property-filter';
 
 import {
@@ -40,7 +43,7 @@ export const columnDefinitions = [
     header: 'Stopped',
     type: 'boolean',
     propertyLabel: 'Stopped',
-    cell: (item: TableItem) => item.state === 0,
+    cell: (item: TableItem) => item.state === 'STOPPED',
   },
   {
     id: 'instancetype',
@@ -138,6 +141,21 @@ export const columnDefinitions = [
     propertyLabel: 'Last event occurrence (legacy)',
     cell: (item: TableItem) => item.lasteventat?.toISOString(),
   },
+  {
+    id: 'tags',
+    sortingField: 'tagsIndex',
+    header: 'Tags',
+    type: 'enum',
+    propertyLabel: 'Tags',
+    minWidth: 150,
+    cell: (item: TableItem) => (
+      <SpaceBetween size="s" direction="horizontal">
+        {(item.tags ?? []).map(tag => (
+          <Badge key={tag}>{tag}</Badge>
+        ))}
+      </SpaceBetween>
+    ),
+  },
 ].map((item, ind) => ({ order: ind + 1, ...item }));
 
 export const labels = {

diff --git a/pages/property-filter/split-panel-app-layout-integration.page.tsx b/pages/property-filter/split-panel-app-layout-integration.page.tsx
@@ -1,27 +1,35 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { useState } from 'react';
+import React, { useContext, useState } from 'react';
 
 import { useCollection } from '@cloudscape-design/collection-hooks';
 
-import AppLayout from '~components/app-layout';
-import Box from '~components/box';
-import Button from '~components/button';
-import Header from '~components/header';
+import { AppLayout, Box, Button, Checkbox, Header, PropertyFilter, SpaceBetween, SplitPanel, Table } from '~components';
 import I18nProvider from '~components/i18n';
 import messages from '~components/i18n/messages/all.en';
-import PropertyFilter from '~components/property-filter';
-import SplitPanel from '~components/split-panel';
-import Table from '~components/table';
 
+import AppContext, { AppContextType } from '../app/app-context';
 import { Breadcrumbs, Navigation, Tools } from '../app-layout/utils/content-blocks';
 import appLayoutLabels from '../app-layout/utils/labels';
 import * as toolsContent from '../app-layout/utils/tools-content';
 import ScreenshotArea from '../utils/screenshot-area';
 import { columnDefinitions, filteringProperties, labels } from './common-props';
 import { allItems, states, TableItem } from './table.data';
 
+type PageContext = React.Context<
+  AppContextType<{
+    enableTokenGroups?: boolean;
+    disableFreeTextFiltering?: boolean;
+    hideOperations?: boolean;
+  }>
+>;
+
 export default function () {
+  const {
+    urlParams: { enableTokenGroups = true, disableFreeTextFiltering = false, hideOperations = false },
+    setUrlParams,
+  } = useContext(AppContext as PageContext);
+
   const [splitPanelOpen, setSplitPanelOpen] = useState(true);
   const { items, collectionProps, actions, propertyFilterProps } = useCollection(allItems, {
     propertyFiltering: {
@@ -49,7 +57,7 @@ export default function () {
 
   const filteringOptions = propertyFilterProps.filteringOptions.map(option => {
     if (option.propertyKey === 'state') {
-      option.label = states[parseInt(option.value)];
+      option.label = states[option.value];
     }
     return option;
   });
@@ -80,7 +88,26 @@ export default function () {
                 resizeHandleAriaLabel: 'Slider',
               }}
             >
-              {' '}
+              <SpaceBetween size="s">
+                <Checkbox
+                  checked={enableTokenGroups}
+                  onChange={({ detail }) => setUrlParams({ enableTokenGroups: detail.checked })}
+                >
+                  enableTokenGroups
+                </Checkbox>
+                <Checkbox
+                  checked={disableFreeTextFiltering}
+                  onChange={({ detail }) => setUrlParams({ disableFreeTextFiltering: detail.checked })}
+                >
+                  disableFreeTextFiltering
+                </Checkbox>
+                <Checkbox
+                  checked={hideOperations}
+                  onChange={({ detail }) => setUrlParams({ hideOperations: detail.checked })}
+                >
+                  hideOperations
+                </Checkbox>
+              </SpaceBetween>
             </SplitPanel>
           }
           content={
@@ -95,16 +122,16 @@ export default function () {
                   {...labels}
                   {...propertyFilterProps}
                   filteringOptions={filteringOptions}
+                  enableTokenGroups={enableTokenGroups}
+                  disableFreeTextFiltering={disableFreeTextFiltering}
+                  hideOperations={hideOperations}
                   virtualScroll={true}
-                  countText={`${items.length} matches`}
-                  enableTokenGroups={true}
                   expandToViewport={true}
+                  countText={`${items.length} matches`}
                   filteringEmpty="No properties"
-                  customGroupsText={[]}
-                  disableFreeTextFiltering={false}
                 />
               }
-              columnDefinitions={columnDefinitions.slice(0, 2)}
+              columnDefinitions={columnDefinitions}
             />
           }
         />