Apply Katie's feedback from other PR

Author: rebeccaalpert

package-lock.json

@@ -46,8 +46,8 @@
     "@patternfly/documentation-framework": "^6.5.16",
     "@patternfly/react-code-editor": "^6.0.0",
     "@patternfly/patternfly": "^6.0.0",
-    "@types/react": "^19.1.0",
-    "@types/react-dom": "^19.1.2",
+    "@types/react": "^18.2.33",
+    "@types/react-dom": "^18.3.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "typescript": "^5.8.3"

packages/module/package.json

@@ -1,9 +1,9 @@
-import type { HTMLAttributes, DetailedHTMLProps, FunctionComponent, CSSProperties } from 'react';
+import type { FunctionComponent, CSSProperties } from 'react';
 import { Fragment } from 'react';
 import clsx from 'clsx';
 import { createUseStyles } from 'react-jss';
 
-export interface AnsibleProps extends DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> {
+export interface AnsibleProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> {
   /** Supported/unsupported variant flag */
   isSupported?: boolean;
   /** Red Hat Ansible Automation Platform technology icon */
@@ -14,22 +14,30 @@ export interface AnsibleProps extends DetailedHTMLProps<HTMLAttributes<HTMLEleme
   ouiaId?: string | number;
 }
 
-const RHAAPTechnologyIcon = 
-<svg
-  width="24" height="24" viewBox="0 0 38 38"
-  xmlns="http://www.w3.org/2000/svg">
-  <defs>
-    <style>
-      {`.uuid-6998fa22-ec9a-4e2f-9d0d-f4bc3361e80e{fill:#e00;}`}
-      {`.uuid-2a01d04c-89d4-48ba-a2d8-51034215da9b{fill:#fff;}`}
-      {`.uuid-a19226e8-b71f-481c-815f-1ed60f4363a6{fill:#4d4d4d;}`}
-    </style>
-  </defs>
-  <rect x="1" y="1" width="36" height="36" rx="9" ry="9"/>
-  <path className="uuid-a19226e8-b71f-481c-815f-1ed60f4363a6" d="m28,2.25c4.27338,0,7.75,3.47664,7.75,7.75v18c0,4.27336-3.47662,7.75-7.75,7.75H10c-4.27338,0-7.75-3.47664-7.75-7.75V10c0-4.27336,3.47662-7.75,7.75-7.75h18m0-1.25H10C5.02942,1,1,5.02944,1,10v18c0,4.97057,4.02942,9,9,9h18c4.97058,0,9-4.02943,9-9V10c0-4.97056-4.02942-9-9-9h0Z"/>
-  <path className="uuid-2a01d04c-89d4-48ba-a2d8-51034215da9b" d="m15,23.625c-.08594,0-.17383-.01758-.25684-.05566-.31445-.1416-.45508-.51172-.3125-.82617l2.02051-4.48145c.00293-.00586.00586-.01172.00781-.01758l1.97168-4.36914c.20117-.44922.9375-.44922,1.13867,0l4,8.86816c.11814.25977.04395.56641-.17871.74512-.22266.17773-.53613.18262-.7666.01172l-5.34961-4.02148-1.70508,3.77832c-.10352.23145-.33105.36816-.56934.36816Zm2.80078-5.31445l3.62891,2.72754-2.42969-5.38574-1.19922,2.6582Z"/>
-  <path className="uuid-6998fa22-ec9a-4e2f-9d0d-f4bc3361e80e" d="m19,30.125c-6.13477,0-11.125-4.99023-11.125-11.125s4.99023-11.125,11.125-11.125,11.125,4.99023,11.125,11.125-4.99023,11.125-11.125,11.125Zm0-21c-5.44531,0-9.875,4.42969-9.875,9.875s4.42969,9.875,9.875,9.875,9.875-4.42969,9.875-9.875-4.42969-9.875-9.875-9.875Z"/>
-</svg>
+const RHAAPTechnologyIcon = (
+  <svg width="24" height="24" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+      <style>
+        {`.uuid-6998fa22-ec9a-4e2f-9d0d-f4bc3361e80e{fill:#e00;}`}
+        {`.uuid-2a01d04c-89d4-48ba-a2d8-51034215da9b{fill:#fff;}`}
+        {`.uuid-a19226e8-b71f-481c-815f-1ed60f4363a6{fill:#4d4d4d;}`}
+      </style>
+    </defs>
+    <rect x="1" y="1" width="36" height="36" rx="9" ry="9" />
+    <path
+      className="uuid-a19226e8-b71f-481c-815f-1ed60f4363a6"
+      d="m28,2.25c4.27338,0,7.75,3.47664,7.75,7.75v18c0,4.27336-3.47662,7.75-7.75,7.75H10c-4.27338,0-7.75-3.47664-7.75-7.75V10c0-4.27336,3.47662-7.75,7.75-7.75h18m0-1.25H10C5.02942,1,1,5.02944,1,10v18c0,4.97057,4.02942,9,9,9h18c4.97058,0,9-4.02943,9-9V10c0-4.97056-4.02942-9-9-9h0Z"
+    />
+    <path
+      className="uuid-2a01d04c-89d4-48ba-a2d8-51034215da9b"
+      d="m15,23.625c-.08594,0-.17383-.01758-.25684-.05566-.31445-.1416-.45508-.51172-.3125-.82617l2.02051-4.48145c.00293-.00586.00586-.01172.00781-.01758l1.97168-4.36914c.20117-.44922.9375-.44922,1.13867,0l4,8.86816c.11814.25977.04395.56641-.17871.74512-.22266.17773-.53613.18262-.7666.01172l-5.34961-4.02148-1.70508,3.77832c-.10352.23145-.33105.36816-.56934.36816Zm2.80078-5.31445l3.62891,2.72754-2.42969-5.38574-1.19922,2.6582Z"
+    />
+    <path
+      className="uuid-6998fa22-ec9a-4e2f-9d0d-f4bc3361e80e"
+      d="m19,30.125c-6.13477,0-11.125-4.99023-11.125-11.125s4.99023-11.125,11.125-11.125,11.125,4.99023,11.125,11.125-4.99023,11.125-11.125,11.125Zm0-21c-5.44531,0-9.875,4.42969-9.875,9.875s4.42969,9.875,9.875,9.875,9.875-4.42969,9.875-9.875-4.42969-9.875-9.875-9.875Z"
+    />
+  </svg>
+);
 
 const useStyles = createUseStyles({
   ansible: {
@@ -41,18 +49,24 @@ const useStyles = createUseStyles({
   },
   ansibleSupported: {
     '& .st0': {
-      fill: 'var(--pf-t-global--icon--color--regular)',
+      fill: 'var(--pf-t-global--icon--color--regular)'
     }
   },
   ansibleUnsupported: {
     '& .st0, .st1, .st2': {
       fill: 'var(--pf-t--global--icon--color--disabled)',
-      cursor: 'not-allowed',
+      cursor: 'not-allowed'
     }
   }
-})
+});
 
-const Ansible: FunctionComponent<AnsibleProps> = ({ isSupported = true, isRHAAP, className, ouiaId = "Ansible-icon", ...props }: AnsibleProps) => {
+const Ansible: FunctionComponent<AnsibleProps> = ({
+  isSupported = true,
+  isRHAAP,
+  className,
+  ouiaId = 'Ansible-icon',
+  ...props
+}: AnsibleProps) => {
   const classes = useStyles();
   const ansibleLogoClass = clsx(
     classes.ansible,
@@ -71,7 +85,7 @@ const Ansible: FunctionComponent<AnsibleProps> = ({ isSupported = true, isRHAAP,
         width="803.8"
         height="221.5"
       />
-  
+
       <rect
         x="-279.7"
         y="904"
@@ -80,7 +94,7 @@ const Ansible: FunctionComponent<AnsibleProps> = ({ isSupported = true, isRHAAP,
         width="2590.2"
         height="221.5"
       />
-  
+
       <rect
         x="17.1"
         y="1620.5"
@@ -93,13 +107,18 @@ const Ansible: FunctionComponent<AnsibleProps> = ({ isSupported = true, isRHAAP,
   );
 
   return (
-    (<Fragment>
+    <Fragment>
       {isRHAAP ? (
         <i title="Red Hat Ansible Automation Platform" data-ouia-component-id={ouiaId} {...props}>
           {RHAAPTechnologyIcon}
         </i>
       ) : (
-        <i className={ansibleLogoClass} title={isSupported ? "Ansible supported" : "Ansible is not supported" } data-ouia-component-id={ouiaId} {...props}>
+        <i
+          className={ansibleLogoClass}
+          title={isSupported ? 'Ansible supported' : 'Ansible is not supported'}
+          data-ouia-component-id={ouiaId}
+          {...props}
+        >
           <svg
             version="1.1"
             x="0px"
@@ -117,8 +136,8 @@ const Ansible: FunctionComponent<AnsibleProps> = ({ isSupported = true, isRHAAP,
             {isSupported ? null : unsupportedSlash}
           </svg>
         </i>
-      ) }
-    </Fragment>)
+      )}
+    </Fragment>
   );
 };
 

packages/module/src/Ansible/Ansible.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode, MouseEvent, FunctionComponent } from 'react';
+import type { MouseEvent as ReactMouseEvent, FunctionComponent } from 'react';
 import { useState } from 'react';
 import {
   Button,
@@ -18,50 +18,50 @@ import { ModalProps, Modal, ModalVariant } from '@patternfly/react-core/deprecat
 
 export interface ColumnManagementModalColumn {
   /** Internal identifier of a column by which table displayed columns are filtered. */
-  key: string,
+  key: string;
   /** The actual display name of the column possibly with a tooltip or icon. */
-  title: ReactNode,
+  title: React.ReactNode;
   /** If user changes checkboxes, the component will send back column array with this property altered. */
-  isShown?: boolean,
+  isShown?: boolean;
   /** Set to false if the column should be hidden initially */
-  isShownByDefault: boolean,
+  isShownByDefault: boolean;
   /** The checkbox will be disabled, this is applicable to columns which should not be toggleable by user */
-  isUntoggleable?: boolean
+  isUntoggleable?: boolean;
 }
 
 /** extends ModalProps */
 export interface ColumnManagementModalProps extends Omit<ModalProps, 'ref' | 'children'> {
   /** Flag to show the modal */
-  isOpen?: boolean,
+  isOpen?: boolean;
   /** Invoked when modal visibility is changed */
-  onClose?: (event: KeyboardEvent | MouseEvent) => void,
+  onClose?: (event: KeyboardEvent | ReactMouseEvent) => void;
   /** Current column state */
-  appliedColumns: ColumnManagementModalColumn[],
+  appliedColumns: ColumnManagementModalColumn[];
   /** Invoked with new column state after save button is clicked */
-  applyColumns: (newColumns: ColumnManagementModalColumn[]) => void,
+  applyColumns: (newColumns: ColumnManagementModalColumn[]) => void;
   /* Modal description text */
-  description?: string,
+  description?: string;
   /* Modal title text */
-  title?: string,
+  title?: string;
   /** Custom OUIA ID */
-  ouiaId?: string | number,
+  ouiaId?: string | number;
 }
 
-const ColumnManagementModal: FunctionComponent<ColumnManagementModalProps> = (
-  { title = 'Manage columns',
-    description = 'Selected categories will be displayed in the table.',
-    isOpen = false,
-    onClose = () => undefined,
-    appliedColumns,
-    applyColumns,
-    ouiaId = 'ColumnManagementModal',
-    ...props }: ColumnManagementModalProps) => {
-
+const ColumnManagementModal: FunctionComponent<ColumnManagementModalProps> = ({
+  title = 'Manage columns',
+  description = 'Selected categories will be displayed in the table.',
+  isOpen = false,
+  onClose = () => undefined,
+  appliedColumns,
+  applyColumns,
+  ouiaId = 'ColumnManagementModal',
+  ...props
+}: ColumnManagementModalProps) => {
   const [ currentColumns, setCurrentColumns ] = useState(
-    appliedColumns.map(column => ({ ...column, isShown: column.isShown ?? column.isShownByDefault }))
+    appliedColumns.map((column) => ({ ...column, isShown: column.isShown ?? column.isShownByDefault }))
   );
 
-  const handleChange = index => {
+  const handleChange = (index) => {
     const newColumns = [ ...currentColumns ];
     const changedColumn = { ...newColumns[index] };
 
@@ -73,22 +73,24 @@ const ColumnManagementModal: FunctionComponent<ColumnManagementModalProps> = (
 
   const selectAll = () => {
     let newColumns = [ ...currentColumns ];
-    newColumns = newColumns.map(column => ({ ...column, isShown: true }));
+    newColumns = newColumns.map((column) => ({ ...column, isShown: true }));
 
     setCurrentColumns(newColumns);
   };
 
   const resetToDefault = () => {
-    setCurrentColumns(currentColumns.map(column => ({ ...column, isShown: column.isShownByDefault ?? false })));
+    setCurrentColumns(currentColumns.map((column) => ({ ...column, isShown: column.isShownByDefault ?? false })));
   };
 
-  const handleSave = event => {
+  const handleSave = (event) => {
     applyColumns(currentColumns);
     onClose(event);
   };
 
-  const handleCancel = event => {
-    setCurrentColumns(appliedColumns.map(column => ({ ...column, isShown: column.isShown ?? column.isShownByDefault })));
+  const handleCancel = (event) => {
+    setCurrentColumns(
+      appliedColumns.map((column) => ({ ...column, isShown: column.isShown ?? column.isShownByDefault }))
+    );
     onClose(event);
   };
 
@@ -116,7 +118,13 @@ const ColumnManagementModal: FunctionComponent<ColumnManagementModalProps> = (
         </>
       }
       actions={[
-        <Button key="save" className='pf-v6-u-mr-md' variant={ButtonVariant.primary} onClick={handleSave} ouiaId={`${ouiaId}-save-button`}>
+        <Button
+          key="save"
+          className="pf-v6-u-mr-md"
+          variant={ButtonVariant.primary}
+          onClick={handleSave}
+          ouiaId={`${ouiaId}-save-button`}
+        >
           Save
         </Button>,
         <Button key="cancel" variant={ButtonVariant.link} onClick={handleCancel} ouiaId={`${ouiaId}-cancel-button`}>
@@ -127,7 +135,7 @@ const ColumnManagementModal: FunctionComponent<ColumnManagementModalProps> = (
       {...props}
     >
       <DataList aria-label="Selected columns" isCompact data-ouia-component-id={`${ouiaId}-column-list`}>
-        {currentColumns.map((column, index) =>
+        {currentColumns.map((column, index) => (
           <DataListItem key={column.key}>
             <DataListItemRow>
               <DataListCheck
@@ -149,10 +157,10 @@ const ColumnManagementModal: FunctionComponent<ColumnManagementModalProps> = (
               />
             </DataListItemRow>
           </DataListItem>
-        )}
+        ))}
       </DataList>
     </Modal>
   );
-}
+};
 
 export default ColumnManagementModal;