From 733b07f493d4edc49de89f0eb3dec4d28580b7f7 Mon Sep 17 00:00:00 2001
From: Jeff Phillips <jephilli@redhat.com>
Date: Fri, 12 Jul 2024 14:42:51 -0400
Subject: [PATCH] Fix for typings in MultiSelection (#1)

---
 frontend/src/components/MultiSelection.tsx    |  7 +++++-
 .../src/pages/groupSettings/GroupSettings.tsx | 24 +++++++++++++++----
 .../src/pages/groupSettings/groupTypes.ts     | 12 ----------
 3 files changed, 25 insertions(+), 18 deletions(-)

diff --git a/frontend/src/components/MultiSelection.tsx b/frontend/src/components/MultiSelection.tsx
index 3dd40f26d0..f5cf67f414 100644
--- a/frontend/src/components/MultiSelection.tsx
+++ b/frontend/src/components/MultiSelection.tsx
@@ -15,7 +15,12 @@ import {
   HelperTextItem,
 } from '@patternfly/react-core';
 import { TimesIcon } from '@patternfly/react-icons/dist/esm/icons/times-icon';
-import { SelectionOptions } from '~/pages/groupSettings/groupTypes';
+
+export type SelectionOptions = {
+  id: number | string;
+  name: string;
+  selected?: boolean;
+};
 
 type MultiSelectionProps = {
   value: SelectionOptions[];
diff --git a/frontend/src/pages/groupSettings/GroupSettings.tsx b/frontend/src/pages/groupSettings/GroupSettings.tsx
index 362d4fa61b..6cf0acfda2 100644
--- a/frontend/src/pages/groupSettings/GroupSettings.tsx
+++ b/frontend/src/pages/groupSettings/GroupSettings.tsx
@@ -11,9 +11,9 @@ import {
 import ApplicationsPage from '~/pages/ApplicationsPage';
 import { isGroupEmpty } from '~/utilities/utils';
 import SettingSection from '~/components/SettingSection';
-import { MultiSelection } from '~/components/MultiSelection';
+import { MultiSelection, SelectionOptions } from '~/components/MultiSelection';
 import { useWatchGroups } from '~/utilities/useWatchGroups';
-import { GroupsConfigField, MenuItemStatus } from './groupTypes';
+import { GroupsConfigField } from './groupTypes';
 
 const GroupSettings: React.FC = () => {
   const {
@@ -37,13 +37,27 @@ const GroupSettings: React.FC = () => {
     updateGroups(groupSettings);
   };
 
-  const handleMenuItemSelection = (newState: MenuItemStatus[], field: GroupsConfigField) => {
+  const handleMenuItemSelection = (newState: SelectionOptions[], field: GroupsConfigField) => {
     switch (field) {
       case GroupsConfigField.ADMIN:
-        setGroupSettings({ ...groupSettings, adminGroups: newState });
+        setGroupSettings({
+          ...groupSettings,
+          adminGroups: newState.map((opt) => ({
+            id: Number(opt.id),
+            name: opt.name,
+            enabled: opt.selected || false,
+          })),
+        });
         break;
       case GroupsConfigField.USER:
-        setGroupSettings({ ...groupSettings, allowedGroups: newState });
+        setGroupSettings({
+          ...groupSettings,
+          allowedGroups: newState.map((opt) => ({
+            id: Number(opt.id),
+            name: opt.name,
+            enabled: opt.selected || false,
+          })),
+        });
         break;
     }
     setIsGroupSettingsChanged(true);
diff --git a/frontend/src/pages/groupSettings/groupTypes.ts b/frontend/src/pages/groupSettings/groupTypes.ts
index 5991e1fed1..e399469ffd 100644
--- a/frontend/src/pages/groupSettings/groupTypes.ts
+++ b/frontend/src/pages/groupSettings/groupTypes.ts
@@ -15,15 +15,3 @@ export type GroupStatus = {
   name: string;
   enabled: boolean;
 };
-
-export type MenuItemStatus = {
-  id: number;
-  name: string;
-  enabled: boolean;
-};
-
-export type SelectionOptions = {
-  id: number | string;
-  name: string;
-  selected?: boolean;
-};