Updating dropdowns

Author: Andrewgdewar

_playwright-tests/UI/SnapshotRepo.spec.ts

@@ -41,8 +41,8 @@ test.describe('Snapshot Repositories', () => {
     await test.step('Filter by version', async () => {
       const versionFilterButton = page.getByRole('button', { name: 'filter version' });
       await versionFilterButton.click();
-      await page.getByRole('menuitem', { name: 'el9' }).locator('label').click();
-      await page.getByRole('menuitem', { name: 'el8' }).locator('label').click();
+      await page.getByRole('option', { name: 'el9' }).click();
+      await page.getByRole('option', { name: 'el8' }).click();
       await versionFilterButton.click(); // Close the version filter dropdown
     });
 

_playwright-tests/UI/helpers/helpers.ts

@@ -6,7 +6,7 @@ export const snapshotTimestampFormat = 'DD MMM YYYY - HH:mm:ss';
 
 export const closePopupsIfExist = async (page: Page) => {
   const locatorsToCheck = [
-    page.locator('.pf-v5-c-alert.notification-item button'), // This closes all toast pop-ups // TODO: pf5 > pf6
+    page.locator('.pf-v6-c-alert.notification-item button'), // This closes all toast pop-ups
     page.locator(`button[id^="pendo-close-guide-"]`), // This closes the pendo guide pop-up
     page.locator(`button[id="truste-consent-button"]`), // This closes the trusted consent pop-up
     page.getByLabel('close-notification'), // This closes a one off info notification (May be covered by the toast above, needs recheck.)

_playwright-tests/helpers/loginHelpers.tsx

@@ -5,7 +5,7 @@ import path from 'path';
 
 export const logout = async (page: Page) => {
   const button = await page.locator(
-    'div.pf-v5-c-toolbar__item.pf-m-hidden.pf-m-visible-on-lg.pf-v5-u-mr-0 > button', // TODO: pf5 > pf6
+    'div.pf-v6-c-toolbar__item.pf-m-hidden.pf-m-visible-on-lg.pf-v6-u-mr-0 > button',
   );
 
   await button.click();
@@ -44,9 +44,9 @@ export const logInWithUsernameAndPassword = async (
   await passwordField.fill(password);
   await passwordField.press('Enter');
 
-  await expect(async () => {
-    expect(page.url()).toBe(`${process.env.BASE_URL}/insights/content/repositories`);
-  }).toPass();
+  await expect(async () =>
+    expect(page.url()).toBe(`${process.env.BASE_URL}/insights/content/repositories`),
+  ).toPass();
 };
 
 export const logInWithUser1 = async (page: Page) =>

deploy/frontend.yaml

@@ -18,15 +18,15 @@ objects:
         paths:
           - /apps/content-sources
       image: ${IMAGE}:${IMAGE_TAG}
-      navItems:
-        - appId: "content-sources"
-          title: "Repositories"
-          href: "/insights/content/repositories"
-          product: "Content"
-        - appId: "content-sources"
-          title: "Templates"
-          href: "/insights/content/templates"
-          product: "Content"
+      # navItems:
+      #   - appId: "content-sources"
+      #     title: "Repositories"
+      #     href: "/insights/content/repositories"
+      #     product: "Content"
+      #   - appId: "content-sources"
+      #     title: "Templates"
+      #     href: "/insights/content/templates"
+      #     product: "Content"
       module:
         manifestLocation: "/apps/content-sources/fed-mods.json"
         modules:
@@ -49,9 +49,9 @@ parameters:
   - name: SELENIUM_MEMORY_REQUEST
     value: 2Gi
   - name: SELENIUM_JAVA_OPTS
-    value: ''
+    value: ""
   - name: VNC_GEOMETRY
-    value: '1920x1080'
+    value: "1920x1080"
   - name: IQE_PARALLEL_ENABLED
     value: "false"
   - name: SE_NODE_SESSION_TIMEOUT

src/AppEntry.tsx

@@ -4,6 +4,7 @@ import { Provider as ReduxProvider } from 'react-redux';
 import * as Redux from 'redux';
 
 import App from './App';
+
 import { ContextProvider } from './middleware/AppContext';
 import { createStore, restoreStore } from './store';
 

src/Pages/Repositories/AdminFeaturesTable/AdminFeaturesTable.tsx

@@ -205,15 +205,15 @@ const AdminFeaturesTable = () => {
             <FormGroup label='View' fieldId='view'>
               <Button
                 isInline
-                isActive={isJsonView}
+                isClicked={isJsonView}
                 onClick={() => setJsonView(true)}
                 variant={isJsonView ? 'primary' : 'secondary'}
               >
                 Json
               </Button>
               <Button
                 isInline
-                isActive={!isJsonView}
+                isClicked={!isJsonView}
                 onClick={() => setJsonView(false)}
                 variant={!isJsonView ? 'primary' : 'secondary'}
               >

src/Pages/Repositories/AdminTaskTable/components/AdminTaskFilters.tsx

@@ -5,12 +5,13 @@ import {
   Button,
   Flex,
   FlexItem,
-  InputGroup,
+  MenuToggle,
   TextInput,
-  type SelectOptionProps,
+  Dropdown,
+  DropdownItem,
+  DropdownList,
 } from '@patternfly/react-core';
 
-import DropdownSelect from 'components/DropdownSelect/DropdownSelect';
 import { FilterIcon, SearchIcon } from '@patternfly/react-icons';
 import Hide from 'components/Hide/Hide';
 import useDebounce from 'Hooks/useDebounce';
@@ -30,9 +31,21 @@ const useStyles = createUseStyles({
   clearFilters: {
     marginLeft: '16px',
   },
+  menuToggle: {
+    width: 'fit-content',
+    maxWidth: 'unset!important', // Remove arbitrary button width
+  },
+  filter: {
+    maxWidth: 'unset!important', // Remove arbitrary button width
+    width: '-webkit-fill-available',
+  },
+  filterDropdown: {
+    width: 'fit-content',
+  },
 });
 
 const statusValues = ['Running', 'Failed', 'Completed', 'Canceled', 'Pending'];
+
 const typeValues = [
   'snapshot',
   'delete-repository-snapshots',
@@ -41,13 +54,17 @@ const typeValues = [
   'update-template-content',
   'update-repository',
 ];
+
 const filters = ['Account ID', 'Org ID', 'Status', 'Type'];
+
 export type AdminTaskFilters = 'Account ID' | 'Org ID' | 'Status' | 'Type';
 
 const AdminTaskFilters = ({ isLoading, setFilterData, filterData }: Props) => {
   const classes = useStyles();
   const [filterType, setFilterType] = useState<AdminTaskFilters>('Account ID');
   const [accountId, setAccountId] = useState('');
+  const [typeFilterOpen, setTypeFilterOpen] = useState(false);
+  const [isActionOpen, setActionOpen] = useState(false);
   const [orgId, setOrgId] = useState('');
   const [selectedStatuses, setSelectedStatuses] = useState<string[]>([]);
   const [selectedTypenames, setSelectedTypenames] = useState<string[]>([]);
@@ -129,94 +146,142 @@ const AdminTaskFilters = ({ isLoading, setFilterData, filterData }: Props) => {
         );
       case 'Status':
         return (
-          <DropdownSelect
+          <Dropdown
             onSelect={(_, val) =>
               setSelectedStatuses((prev) =>
                 selectedStatuses.includes(val as string)
                   ? prev.filter((item) => item !== (val as string))
                   : [...prev, val as string],
               )
             }
-            menuToggleProps={{
-              'aria-label': 'filter status',
-              id: 'statusSelect',
-            }}
-            multiSelect
-            dropDownItems={
-              statusValues.map((status) => ({
-                hasCheckbox: true,
-                value: status,
-                isSelected: selectedStatuses.includes(status),
-                children: status,
-                'data-ouia-component-id': `filter_${status}`,
-              })) as SelectOptionProps[]
-            }
-            isDisabled={isLoading}
-            menuValue='Filter by status'
-            ouiaId='filter_status'
-          />
+            toggle={(toggleRef) => (
+              <MenuToggle
+                ref={toggleRef}
+                className={classes.menuToggle}
+                aria-label='filter status'
+                id='statusSelect'
+                ouiaId='filter_status'
+                onClick={() => setActionOpen((prev) => !prev)}
+                isDisabled={isLoading}
+                isExpanded={isActionOpen}
+              >
+                Filter by status
+              </MenuToggle>
+            )}
+            onOpenChange={(isOpen) => setActionOpen(isOpen)}
+            isOpen={isActionOpen}
+          >
+            <DropdownList>
+              {statusValues.map((status) => (
+                <DropdownItem
+                  key={status}
+                  hasCheckbox
+                  value={status}
+                  isSelected={selectedStatuses.includes(status)}
+                  component='button'
+                  data-ouia-component-id={`filter_${status}`}
+                >
+                  {status}
+                </DropdownItem>
+              ))}
+            </DropdownList>
+          </Dropdown>
         );
       case 'Type':
         return (
-          <DropdownSelect
+          <Dropdown
             onSelect={(_, val) =>
               setSelectedTypenames((prev) =>
                 selectedTypenames.includes(val as string)
                   ? prev.filter((item) => item !== (val as string))
                   : [...prev, val as string],
               )
             }
-            menuToggleProps={{
-              'aria-label': 'filter type',
-              id: 'typeSelect',
-            }}
-            multiSelect
-            dropDownItems={
-              typeValues.map((status) => ({
-                hasCheckbox: true,
-                value: status,
-                isSelected: selectedTypenames.includes(status),
-                children: status,
-                'data-ouia-component-id': `filter_${status}`,
-              })) as SelectOptionProps[]
-            }
-            isDisabled={isLoading}
-            menuValue='Filter by type'
-            ouiaId='filter_type'
-          />
+            toggle={(toggleRef) => (
+              <MenuToggle
+                ref={toggleRef}
+                className={classes.menuToggle}
+                aria-label='filter type'
+                id='typeSelect'
+                ouiaId='filter_type'
+                onClick={() => setActionOpen((prev) => !prev)}
+                isDisabled={isLoading}
+                isExpanded={isActionOpen}
+              >
+                Filter by type
+              </MenuToggle>
+            )}
+            onOpenChange={(isOpen) => setActionOpen(isOpen)}
+            isOpen={isActionOpen}
+          >
+            <DropdownList>
+              {typeValues.map((type) => (
+                <DropdownItem
+                  key={type}
+                  hasCheckbox
+                  value={type}
+                  isSelected={selectedTypenames.includes(type)}
+                  component='button'
+                  data-ouia-component-id={`filter_${type}`}
+                >
+                  {type}
+                </DropdownItem>
+              ))}
+            </DropdownList>
+          </Dropdown>
         );
       default:
         return <></>;
     }
-  }, [filterType, isLoading, accountId, orgId, selectedStatuses, selectedTypenames]);
+  }, [filterType, isLoading, accountId, orgId, selectedStatuses, selectedTypenames, isActionOpen]);
 
   return (
     <Flex direction={{ default: 'column' }}>
-      <Flex>
-        <FlexItem>
-          <InputGroup>
-            <DropdownSelect
-              onSelect={(_, val) => setFilterType(val as AdminTaskFilters)}
-              menuToggleProps={{
-                'aria-label': 'filterSelectionDropdown',
-                id: 'typeSelect',
-                icon: <FilterIcon />,
-              }}
-              dropDownItems={
-                filters.map((filter) => ({
-                  value: filter,
-                  isSelected: filterType === filter,
-                  children: filter,
-                  'data-ouia-component-id': `filter_${filter}`,
-                })) as SelectOptionProps[]
-              }
-              isDisabled={isLoading}
-              menuValue={filterType}
+      <Flex
+        direction={{ default: 'row' }}
+        gap={{ default: 'gap' }}
+        flexWrap={{ default: 'nowrap' }}
+        alignItems={{ default: 'alignItemsCenter' }}
+      >
+        <Dropdown
+          onSelect={(_, val) => {
+            setFilterType(val as AdminTaskFilters);
+            setTypeFilterOpen(false);
+          }}
+          toggle={(toggleRef) => (
+            <MenuToggle
+              icon={<FilterIcon />}
+              ref={toggleRef}
+              className={classes.filter}
+              aria-label='filterSelectionDropdown'
+              id='filterSelectionDropdown'
               ouiaId='filter_type'
-            />
-            {Filter}
-          </InputGroup>
-        </FlexItem>
+              onClick={() => setTypeFilterOpen((prev) => !prev)}
+              isDisabled={isLoading}
+              isExpanded={typeFilterOpen}
+            >
+              {filterType}
+            </MenuToggle>
+          )}
+          onOpenChange={(isOpen) => setTypeFilterOpen(isOpen)}
+          isOpen={typeFilterOpen}
+          ouiaId='filter_type'
+        >
+          <DropdownList>
+            {filters.map((filter) => (
+              <DropdownItem
+                key={filter}
+                value={filter}
+                isSelected={filterType === filter}
+                component='button'
+                data-ouia-component-id={`filter_${filter}`}
+              >
+                {filter}
+              </DropdownItem>
+            ))}
+          </DropdownList>
+        </Dropdown>
+        <FlexItem className={classes.filterDropdown}>{Filter}</FlexItem>
       </Flex>
       <Hide
         hide={