Merge branch 'main' into chore/1241-replace-deprecated-pf-dropdown

client/public/locales/en/translation.json

@@ -313,6 +313,7 @@
     "migrationWaves": "Migration waves",
     "migrationWave(s)": "Migration wave(s)",
     "name": "Name",
+    "none": "None",
     "northboundDependencies": "Northbound dependencies",
     "notAvailable": "Not available",
     "notConnected": "Not connected",
@@ -367,6 +368,9 @@
     "tagDeleted": "Tag deleted",
     "tagName": "Tag name",
     "tags": "Tags",
+    "tagsArchetype": "Archetype Tags",
+    "tagsAssessment": "Assessment Tags",
+    "tagsCriteria": "Criteria Tags",
     "target": "Target",
     "tagCategory": "Tag category",
     "tagCategoryDeleted": "Tag category deleted",
@@ -387,6 +391,9 @@
     "tag": "Tag",
     "YAMLTemplate": "YAML template"
   },
+  "titles": {
+    "archetypeDrawer": "Archetype details"
+  },
   "toastr": {
     "success": {
       "saveWhat": "{{type}} {{what}} was successfully saved.",

client/src/app/components/PageDrawerContext.tsx

@@ -6,14 +6,15 @@ import {
   DrawerContent,
   DrawerContentBody,
   DrawerHead,
+  DrawerPanelBody,
   DrawerPanelContent,
   DrawerPanelContentProps,
 } from "@patternfly/react-core";
 import pageStyles from "@patternfly/react-styles/css/components/Page/page";
 
 const usePageDrawerState = () => {
   const [isDrawerExpanded, setIsDrawerExpanded] = React.useState(false);
-  const [drawerChildren, setDrawerChildren] =
+  const [drawerPanelContent, setDrawerPanelContent] =
     React.useState<React.ReactNode>(null);
   const [drawerPanelContentProps, setDrawerPanelContentProps] = React.useState<
     Partial<DrawerPanelContentProps>
@@ -23,8 +24,8 @@ const usePageDrawerState = () => {
   return {
     isDrawerExpanded,
     setIsDrawerExpanded,
-    drawerChildren,
-    setDrawerChildren,
+    drawerPanelContent,
+    setDrawerPanelContent,
     drawerPanelContentProps,
     setDrawerPanelContentProps,
     drawerPageKey,
@@ -38,8 +39,8 @@ type PageDrawerState = ReturnType<typeof usePageDrawerState>;
 const PageDrawerContext = React.createContext<PageDrawerState>({
   isDrawerExpanded: false,
   setIsDrawerExpanded: () => {},
-  drawerChildren: null,
-  setDrawerChildren: () => {},
+  drawerPanelContent: null,
+  setDrawerPanelContent: () => {},
   drawerPanelContentProps: {},
   setDrawerPanelContentProps: () => {},
   drawerPageKey: "",
@@ -58,7 +59,7 @@ export const PageContentWithDrawerProvider: React.FC<
   const {
     isDrawerExpanded,
     drawerFocusRef,
-    drawerChildren,
+    drawerPanelContent,
     drawerPanelContentProps,
     drawerPageKey,
   } = pageDrawerState;
@@ -80,7 +81,7 @@ export const PageContentWithDrawerProvider: React.FC<
                 key={drawerPageKey}
                 {...drawerPanelContentProps}
               >
-                {drawerChildren}
+                {drawerPanelContent}
               </DrawerPanelContent>
             }
           >
@@ -98,24 +99,26 @@ let numPageDrawerContentInstances = 0;
 export interface IPageDrawerContentProps {
   isExpanded: boolean;
   onCloseClick: () => void; // Should be used to update local state such that `isExpanded` becomes false.
+  header?: React.ReactNode;
   children: React.ReactNode; // The content to show in the drawer when `isExpanded` is true.
   drawerPanelContentProps?: Partial<DrawerPanelContentProps>; // Additional props for the DrawerPanelContent component.
   focusKey?: string | number; // A unique key representing the object being described in the drawer. When this changes, the drawer will regain focus.
   pageKey: string; // A unique key representing the page where the drawer is used. Causes the drawer to remount when changing pages.
 }
 
 export const PageDrawerContent: React.FC<IPageDrawerContentProps> = ({
-  isExpanded: localIsExpandedProp,
+  isExpanded,
   onCloseClick,
+  header = null,
   children,
-  drawerPanelContentProps: localDrawerPanelContentProps,
+  drawerPanelContentProps,
   focusKey,
   pageKey: localPageKeyProp,
 }) => {
   const {
     setIsDrawerExpanded,
     drawerFocusRef,
-    setDrawerChildren,
+    setDrawerPanelContent,
     setDrawerPanelContentProps,
     setDrawerPageKey,
   } = React.useContext(PageDrawerContext);
@@ -137,46 +140,59 @@ export const PageDrawerContent: React.FC<IPageDrawerContentProps> = ({
   // This is the ONLY place where `setIsDrawerExpanded` should be called.
   // To expand/collapse the drawer, use the `isExpanded` prop when rendering PageDrawerContent.
   React.useEffect(() => {
-    setIsDrawerExpanded(localIsExpandedProp);
+    setIsDrawerExpanded(isExpanded);
     return () => {
       setIsDrawerExpanded(false);
-      setDrawerChildren(null);
+      setDrawerPanelContent(null);
     };
-  }, [localIsExpandedProp]);
+  }, [isExpanded, setDrawerPanelContent, setIsDrawerExpanded]);
 
   // Same with pageKey and drawerPanelContentProps, keep them in sync with the local prop on PageDrawerContent.
   React.useEffect(() => {
     setDrawerPageKey(localPageKeyProp);
     return () => {
       setDrawerPageKey("");
     };
-  }, [localPageKeyProp]);
+  }, [localPageKeyProp, setDrawerPageKey]);
 
   React.useEffect(() => {
-    setDrawerPanelContentProps(localDrawerPanelContentProps || {});
-  }, [localDrawerPanelContentProps]);
+    setDrawerPanelContentProps(drawerPanelContentProps || {});
+  }, [drawerPanelContentProps, setDrawerPanelContentProps]);
 
   // If the drawer is already expanded describing app A, then the user clicks app B, we want to send focus back to the drawer.
   React.useEffect(() => {
     drawerFocusRef?.current?.focus();
-  }, [focusKey]);
+  }, [drawerFocusRef, focusKey]);
 
   React.useEffect(() => {
-    setDrawerChildren(
-      <DrawerHead>
-        <span tabIndex={0} ref={drawerFocusRef}>
-          {children}
-        </span>
-        <DrawerActions>
-          <DrawerCloseButton
-            // We call onCloseClick here instead of setIsDrawerExpanded
-            // because we want the isExpanded prop of PageDrawerContent to be the source of truth.
-            onClick={onCloseClick}
-          />
-        </DrawerActions>
-      </DrawerHead>
+    const drawerHead = header === null ? children : header;
+    const drawerPanelBody = header === null ? null : children;
+
+    setDrawerPanelContent(
+      <>
+        <DrawerHead>
+          <span tabIndex={isExpanded ? 0 : -1} ref={drawerFocusRef}>
+            {drawerHead}
+          </span>
+          <DrawerActions>
+            <DrawerCloseButton
+              // We call onCloseClick here instead of setIsDrawerExpanded
+              // because we want the isExpanded prop of PageDrawerContent to be the source of truth.
+              onClick={onCloseClick}
+            />
+          </DrawerActions>
+        </DrawerHead>
+        <DrawerPanelBody>{drawerPanelBody}</DrawerPanelBody>
+      </>
     );
-  }, [children]);
+  }, [
+    children,
+    drawerFocusRef,
+    header,
+    isExpanded,
+    onCloseClick,
+    setDrawerPanelContent,
+  ]);
 
   return null;
 };

client/src/app/pages/archetypes/archetypes-page.tsx

@@ -47,6 +47,7 @@ import {
 
 import ArchetypeApplicationsColumn from "./components/archetype-applications-column";
 import ArchetypeDescriptionColumn from "./components/archetype-description-column";
+import ArchetypeDetailDrawer from "./components/archetype-detail-drawer";
 import ArchetypeForm from "./components/archetype-form";
 import ArchetypeMaintainersColumn from "./components/archetype-maintainers-column";
 import ArchetypeTagsColumn from "./components/archetype-tags-column";
@@ -142,9 +143,11 @@ const Archetypes: React.FC = () => {
       paginationToolbarItemProps,
       paginationProps,
       tableProps,
+      getClickableTrProps,
       getThProps,
       getTdProps,
     },
+    activeRowDerivedState: { activeRowItem, clearActiveRow },
   } = tableControls;
 
   // TODO: RBAC access checks need to be added.  Only Architect (and Administrator) personas
@@ -267,9 +270,12 @@ const Archetypes: React.FC = () => {
                 }
                 numRenderedColumns={numRenderedColumns}
               >
-                {currentPageItems?.map((archetype, rowIndex) => (
-                  <Tbody key={archetype.id}>
-                    <Tr>
+                <Tbody>
+                  {currentPageItems?.map((archetype, rowIndex) => (
+                    <Tr
+                      key={archetype.id}
+                      {...getClickableTrProps({ item: archetype })}
+                    >
                       <TableRowContentWithControls
                         {...tableControls}
                         item={archetype}
@@ -318,8 +324,8 @@ const Archetypes: React.FC = () => {
                         </Td>
                       </TableRowContentWithControls>
                     </Tr>
-                  </Tbody>
-                ))}
+                  ))}
+                </Tbody>
               </ConditionalTableBody>
             </Table>
             <SimplePagination
@@ -331,6 +337,11 @@ const Archetypes: React.FC = () => {
         </ConditionalRender>
       </PageSection>
 
+      <ArchetypeDetailDrawer
+        archetype={activeRowItem}
+        onCloseClick={clearActiveRow}
+      />
+
       {/* Create modal */}
       <Modal
         title={t("dialog.title.newArchetype")}

client/src/app/pages/archetypes/components/archetype-detail-drawer.css

@@ -0,0 +1,6 @@
+.archetype-detail-drawer-list {
+  --pf-v5-c-description-list__term--FontSize: var(--pf-v5-global--FontSize--lg);
+  --pf-v5-c-description-list__description--FontSize: var(
+    --pf-v5-global--FontSize--md
+  );
+}