'Host group rules' > 'Settings' page

src/components/layouts/BasicSelector.tsx

@@ -0,0 +1,77 @@
+import React from "react";
+// Patternfly
+import {
+  MenuToggle,
+  MenuToggleElement,
+  Select,
+  SelectList,
+  SelectOption,
+  SelectOptionProps,
+} from "@patternfly/react-core";
+
+interface PropsToBasicSelector {
+  id: string;
+  selected: string;
+  options: SelectOptionProps[];
+  onSelectedChange: (selected: string) => void;
+  ariaLabel?: string;
+}
+
+const BasicSelector = (props: PropsToBasicSelector) => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [selected, setSelected] = React.useState<string>(props.selected);
+
+  const onToggleClick = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const onSelect = (
+    _event: React.MouseEvent<Element, MouseEvent> | undefined,
+    value: string | number | undefined
+  ) => {
+    props.onSelectedChange(value as string);
+    setSelected(value as string);
+    setIsOpen(false);
+  };
+
+  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+    <MenuToggle
+      ref={toggleRef}
+      aria-label={
+        props.ariaLabel ? props.ariaLabel : "Basic selector menu toggle"
+      }
+      onClick={onToggleClick}
+      isExpanded={isOpen}
+      isFullWidth
+    >
+      {selected}
+    </MenuToggle>
+  );
+
+  return (
+    <Select
+      id={props.id + "-select"}
+      isOpen={isOpen}
+      selected={props.selected}
+      onSelect={onSelect}
+      onOpenChange={(isOpen) => setIsOpen(isOpen)}
+      toggle={toggle}
+      isScrollable
+    >
+      <SelectList id={props.id + "-selector-list"}>
+        {props.options.map((option, idx) => (
+          <SelectOption
+            id={option.key + "-" + idx}
+            key={option.key + "-" + idx}
+            tabIndex={idx}
+            value={option.value}
+          >
+            {option.value}
+          </SelectOption>
+        ))}
+      </SelectList>
+    </Select>
+  );
+};
+
+export default BasicSelector;

src/navigation/AppRoutes.tsx

@@ -25,7 +25,7 @@ import ServicesTabs from "src/pages/Services/ServicesTabs";
 import IDViews from "src/pages/IDViews/IDViews";
 import AutoMemHostRules from "src/pages/AutoMemHostRules/AutoMemHostRules";
 import AutoMemUserRules from "src/pages/AutoMemUserRules/AutoMemUserRules";
-import AutoMemUserRulesTabs from "src/pages/AutoMemUserRules/AutoMemUserRulesTabs";
+import AutoMemRulesTabs from "src/pages/AutoMemUserRules/AutoMemRulesTabs";
 import HBACRules from "src/pages/HBACRules/HBACRules";
 import HBACServices from "src/pages/HBACServices/HBACServices";
 import HBACServiceGroups from "src/pages/HBACServiceGroups/HBACServiceGroups";
@@ -305,7 +305,7 @@ export const AppRoutes = ({ isInitialDataLoaded }): React.ReactElement => {
                   <Route
                     path=""
                     element={
-                      <AutoMemUserRulesTabs
+                      <AutoMemRulesTabs
                         section="settings"
                         automemberType="group"
                       />
@@ -315,6 +315,17 @@ export const AppRoutes = ({ isInitialDataLoaded }): React.ReactElement => {
               </Route>
               <Route path="host-group-rules">
                 <Route path="" element={<AutoMemHostRules />} />
+                <Route path=":cn">
+                  <Route
+                    path=""
+                    element={
+                      <AutoMemRulesTabs
+                        section="settings"
+                        automemberType="hostgroup"
+                      />
+                    }
+                  />
+                </Route>
               </Route>
               <Route path="hbac-rules">
                 <Route path="" element={<HBACRules />} />

src/pages/AutoMemHostRules/AutoMemHostRules.tsx

@@ -26,7 +26,7 @@ import ToolbarLayout, {
 } from "src/components/layouts/ToolbarLayout";
 import SearchInputLayout from "src/components/layouts/SearchInputLayout";
 // Tables
-import MainTable from "../AutoMemUserRules/AutomemUserRulesTable";
+import MainTable from "../AutoMemUserRules/AutomemRulesTable";
 // Components
 import PaginationLayout from "../../components/layouts/PaginationLayout";
 import BulkSelectorPrep from "src/components/BulkSelectorPrep";
@@ -624,6 +624,7 @@ const AutoMemHostRules = () => {
                   buttonsData={automembersTableButtonsData}
                   paginationData={selectedPerPageData}
                   searchValue={searchValue}
+                  automemberType="host-group"
                 />
               )}
             </InnerScrollContainer>

src/pages/AutoMemUserRules/AutoMemSettings.tsx

@@ -55,8 +55,12 @@ const AutoMemSettings = (props: PropsToSettings) => {
   // RPC calls
   const [saveAutomember] = useSaveAutomemberMutation();
 
+  // Infer pathname from automemberType
+  const pathname =
+    props.automemberType === "group" ? "user-group-rules" : "host-group-rules";
+
   // Update current route data to Redux and highlight the current page in the Nav bar
-  useUpdateRoute({ pathname: "user-group-rules", noBreadcrumb: true });
+  useUpdateRoute({ pathname: pathname, noBreadcrumb: true });
 
   // Get 'ipaObject' and 'recordOnChange' to use in 'IpaTextInput'
   const { ipaObject, recordOnChange } = asRecord(

src/pages/AutoMemUserRules/AutoMemUserRules.tsx

@@ -26,7 +26,7 @@ import ToolbarLayout, {
 } from "src/components/layouts/ToolbarLayout";
 import SearchInputLayout from "src/components/layouts/SearchInputLayout";
 // Tables
-import MainTable from "./AutomemUserRulesTable";
+import MainTable from "./AutomemRulesTable";
 // Components
 import PaginationLayout from "../../components/layouts/PaginationLayout";
 import BulkSelectorPrep from "src/components/BulkSelectorPrep";
@@ -624,6 +624,7 @@ const AutoMemUserRules = () => {
                   buttonsData={automembersTableButtonsData}
                   paginationData={selectedPerPageData}
                   searchValue={searchValue}
+                  automemberType="user-group"
                 />
               )}
             </InnerScrollContainer>

src/pages/AutoMemUserRules/AutomemUserRulesTable.tsx → src/pages/AutoMemUserRules/AutomemRulesTable.tsx

@@ -39,6 +39,7 @@ export interface PropsToTable {
   buttonsData: ButtonsData;
   paginationData: PaginationData;
   searchValue: string;
+  automemberType: "user-group" | "host-group";
 }
 
 const MainTable = (props: PropsToTable) => {
@@ -207,7 +208,7 @@ const MainTable = (props: PropsToTable) => {
 
       <Td dataLabel={columnNames.automemberRule}>
         <Link
-          to={"/user-group-rules/" + element.automemberRule}
+          to={"/" + props.automemberType + "-rules/" + element.automemberRule}
           state={element}
         >
           {element.automemberRule}