Merge pull request #78 from dlabaj/issue73

fix(notAuthorized): Updated code to support PF 5 design system with one primary action

Author: dlabaj

packages/module/patternfly-docs/content/extensions/component-groups/examples/NotAuthorized/NotAuthorizedExample.tsx

@@ -3,17 +3,22 @@ import { Button } from '@patternfly/react-core';
 import NotAuthorized from "@patternfly/react-component-groups/dist/dynamic/NotAuthorized";
 
 export const BasicExample: React.FunctionComponent = () => {
-  const actions = [
+  const primaryAction = 
     <Button key="1">
       First action
-    </Button>,
-    <Button key="2" className='pf-v5-u-mx-md'>
+    </Button>;
+  const secondaryActions = [
+    <Button key="2" variant="link">
       Second action
     </Button>,
+    <Button key="3" variant="link">
+      Third action
+    </Button>
   ];
   return (
     <NotAuthorized 
-      actions={actions} 
+      primaryAction={primaryAction} 
+      secondaryActions={secondaryActions}
       className="something" 
       description="Description text" 
       serviceName="Demo bundle"

packages/module/src/NotAuthorized/NotAuthorized.test.tsx

@@ -38,15 +38,19 @@ describe('NotAuthorized component', () => {
   });
 
   it('should show custom actions', () => {
-    const actions = [
+    const primaryAction = 
       <button id="action-one" key="1">
         1
-      </button>,
+      </button>;
+    const secondaryActions = [
       <button id="action-one" key="2">
         2
       </button>,
+      <button id="action-one" key="3">
+        3
+      </button>
     ];
-    const { container } = render(<NotAuthorized {...initialProps} actions={actions} />);
+    const { container } = render(<NotAuthorized {...initialProps} primaryAction={primaryAction} secondaryActions={secondaryActions} />);
     expect(container.firstChild).toMatchSnapshot();
   });
 });

packages/module/src/NotAuthorized/NotAuthorized.tsx

@@ -17,8 +17,10 @@ export interface NotAuthorizedProps extends Omit<EmptyStateProps, 'children' | '
   className?: string;
   /** Custom title */
   title?: React.ReactNode;
-  /** Custom state actions */
-  actions?: React.ReactNode;
+  /** Custom primary action there should only be one primary action*/
+  primaryAction?: React.ReactNode;
+  /** Custom secondary actions */
+  secondaryActions?: React.ReactNode;
   /** Custom landing page button text */
   toLandingPageText?: React.ReactNode;
   /** Custom landing page button URL */
@@ -29,7 +31,8 @@ const NotAuthorized: React.FunctionComponent<NotAuthorizedProps> = ({
   prevPageButtonText = 'Return to previous page',
   toLandingPageText = 'Go to landing page',
   toLandingPageUrl = ".",
-  actions = null,
+  primaryAction = null,
+  secondaryActions = null,
   serviceName,
   title = `You do not have access to ${serviceName}`,
   icon: Icon = LockIcon,
@@ -42,15 +45,16 @@ const NotAuthorized: React.FunctionComponent<NotAuthorizedProps> = ({
     <EmptyStateHeader titleText={<>{title}</>} icon={<EmptyStateIcon icon={Icon} />} headingLevel="h5" />
     <EmptyStateBody>{description}</EmptyStateBody>
     <EmptyStateFooter>
-      {actions && <EmptyStateActions>{actions}</EmptyStateActions>}
+      {primaryAction ? <EmptyStateActions>{primaryAction}</EmptyStateActions> : null}
       <EmptyStateActions>
+        {secondaryActions ? <EmptyStateActions>{secondaryActions}</EmptyStateActions> : null}
         {showReturnButton &&
             (document.referrer ? (
-              <Button variant="primary" onClick={() => history.back()}>
+              <Button variant="link" onClick={() => history.back()}>
                 {prevPageButtonText}
               </Button>
             ) : (
-              <Button variant="primary" component="a" href={toLandingPageUrl}>
+              <Button variant="link" component="a" href={toLandingPageUrl}>
                 {toLandingPageText}
               </Button>
             ))}

packages/module/src/NotAuthorized/__snapshots__/NotAuthorized.test.tsx.snap

@@ -50,8 +50,8 @@ exports[`NotAuthorized component should apply custom styles 1`] = `
       >
         <a
           aria-disabled="false"
-          class="pf-v5-c-button pf-m-primary"
-          data-ouia-component-id="OUIA-Generated-Button-primary-2"
+          class="pf-v5-c-button pf-m-link"
+          data-ouia-component-id="OUIA-Generated-Button-link-2"
           data-ouia-component-type="PF5/Button"
           data-ouia-safe="true"
           href="."
@@ -167,8 +167,8 @@ exports[`NotAuthorized component should render 1`] = `
       >
         <a
           aria-disabled="false"
-          class="pf-v5-c-button pf-m-primary"
-          data-ouia-component-id="OUIA-Generated-Button-primary-1"
+          class="pf-v5-c-button pf-m-link"
+          data-ouia-component-id="OUIA-Generated-Button-link-1"
           data-ouia-component-type="PF5/Button"
           data-ouia-safe="true"
           href="."
@@ -234,19 +234,28 @@ exports[`NotAuthorized component should show custom actions 1`] = `
         >
           1
         </button>
-        <button
-          id="action-one"
-        >
-          2
-        </button>
       </div>
       <div
         class="pf-v5-c-empty-state__actions"
       >
+        <div
+          class="pf-v5-c-empty-state__actions"
+        >
+          <button
+            id="action-one"
+          >
+            2
+          </button>
+          <button
+            id="action-one"
+          >
+            3
+          </button>
+        </div>
         <a
           aria-disabled="false"
-          class="pf-v5-c-button pf-m-primary"
-          data-ouia-component-id="OUIA-Generated-Button-primary-6"
+          class="pf-v5-c-button pf-m-link"
+          data-ouia-component-id="OUIA-Generated-Button-link-6"
           data-ouia-component-type="PF5/Button"
           data-ouia-safe="true"
           href="."
@@ -309,8 +318,8 @@ exports[`NotAuthorized component should show custom description 1`] = `
       >
         <a
           aria-disabled="false"
-          class="pf-v5-c-button pf-m-primary"
-          data-ouia-component-id="OUIA-Generated-Button-primary-4"
+          class="pf-v5-c-button pf-m-link"
+          data-ouia-component-id="OUIA-Generated-Button-link-4"
           data-ouia-component-type="PF5/Button"
           data-ouia-safe="true"
           href="."
@@ -373,8 +382,8 @@ exports[`NotAuthorized component should show custom title 1`] = `
       >
         <a
           aria-disabled="false"
-          class="pf-v5-c-button pf-m-primary"
-          data-ouia-component-id="OUIA-Generated-Button-primary-5"
+          class="pf-v5-c-button pf-m-link"
+          data-ouia-component-id="OUIA-Generated-Button-link-5"
           data-ouia-component-type="PF5/Button"
           data-ouia-safe="true"
           href="."
@@ -437,8 +446,8 @@ exports[`NotAuthorized component should use custom icon 1`] = `
       >
         <a
           aria-disabled="false"
-          class="pf-v5-c-button pf-m-primary"
-          data-ouia-component-id="OUIA-Generated-Button-primary-3"
+          class="pf-v5-c-button pf-m-link"
+          data-ouia-component-id="OUIA-Generated-Button-link-3"
           data-ouia-component-type="PF5/Button"
           data-ouia-safe="true"
           href="."