From fe2a25b48cdb2ebef5b9c51132d79b4756f9c210 Mon Sep 17 00:00:00 2001
From: DominikKawka <dkawka@redhat.com>
Date: Thu, 12 Dec 2024 10:54:07 +0000
Subject: [PATCH] PF cleanup: general notes, issue #369

Signed-off-by: DominikKawka <dkawka@redhat.com>
---
 src/components/AppLayout.tsx                  |  7 +++-
 .../DownloadAttribution.tsx                   | 15 ++++++-
 .../DownloadDropdown/DownloadDropdown.tsx     | 15 ++++++-
 .../Knowledge/DownloadYaml/DownloadYaml.tsx   | 15 ++++++-
 .../Knowledge/ViewDropdown/ViewDropdown.tsx   | 40 ++++++++++++++++---
 src/components/Dashboard/Github/dashboard.tsx |  4 +-
 6 files changed, 82 insertions(+), 14 deletions(-)

diff --git a/src/components/AppLayout.tsx b/src/components/AppLayout.tsx
index f4a1f944..740427f1 100644
--- a/src/components/AppLayout.tsx
+++ b/src/components/AppLayout.tsx
@@ -21,6 +21,7 @@ import { PageSidebar } from '@patternfly/react-core/dist/dynamic/components/Page
 import { PageSidebarBody } from '@patternfly/react-core/dist/dynamic/components/Page';
 import { SkipToContent } from '@patternfly/react-core/dist/dynamic/components/SkipToContent';
 import { Spinner } from '@patternfly/react-core/dist/dynamic/components/Spinner';
+import { Bullseye } from '@patternfly/react-core';
 import UserMenu from './UserMenu/UserMenu';
 import { useSession } from 'next-auth/react';
 // import { useTheme } from '../context/ThemeContext';
@@ -63,7 +64,11 @@ const AppLayout: React.FunctionComponent<IAppLayout> = ({ children }) => {
   }, [session, status, pathname, router]);
 
   if (status === 'loading') {
-    return <Spinner />;
+    return (
+      <Bullseye>
+        <Spinner />
+      </Bullseye>
+    );
   }
 
   if (!session) {
diff --git a/src/components/Contribute/Knowledge/DownloadAttribution/DownloadAttribution.tsx b/src/components/Contribute/Knowledge/DownloadAttribution/DownloadAttribution.tsx
index 571682af..53b4da89 100644
--- a/src/components/Contribute/Knowledge/DownloadAttribution/DownloadAttribution.tsx
+++ b/src/components/Contribute/Knowledge/DownloadAttribution/DownloadAttribution.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { DropdownItem } from '@patternfly/react-core/dist/esm/components/Dropdown/DropdownItem';
+import { Icon } from '@patternfly/react-core';
 import FileIcon from '@patternfly/react-icons/dist/esm/icons/file-icon';
 import { KnowledgeFormData } from '@/types';
 
@@ -29,8 +30,18 @@ const DownloadAttribution: React.FC<Props> = ({ knowledgeFormData }) => {
   };
 
   return (
-    <DropdownItem key="DownloadAttribution" to="#default-link6" onClick={handleDownloadAttribution}>
-      <FileIcon /> Attribution File
+    <DropdownItem
+      key="DownloadAttribution"
+      to="#default-link6"
+      onClick={handleDownloadAttribution}
+      icon={
+        <Icon>
+          <FileIcon />
+        </Icon>
+      }
+    >
+      {' '}
+      Attribution File
     </DropdownItem>
   );
 };
diff --git a/src/components/Contribute/Knowledge/DownloadDropdown/DownloadDropdown.tsx b/src/components/Contribute/Knowledge/DownloadDropdown/DownloadDropdown.tsx
index 2e216ab1..76a03b59 100644
--- a/src/components/Contribute/Knowledge/DownloadDropdown/DownloadDropdown.tsx
+++ b/src/components/Contribute/Knowledge/DownloadDropdown/DownloadDropdown.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Dropdown } from '@patternfly/react-core/dist/dynamic/components/Dropdown';
 import { DropdownList } from '@patternfly/react-core/dist/dynamic/components/Dropdown';
+import { Icon } from '@patternfly/react-core';
 import { MenuToggle, MenuToggleElement } from '@patternfly/react-core/dist/dynamic/components/MenuToggle';
 import DownloadYaml from '../DownloadYaml/DownloadYaml';
 import DownloadAttribution from '../DownloadAttribution/DownloadAttribution';
@@ -30,8 +31,18 @@ export const DownloadDropdown: React.FunctionComponent<Props> = ({ knowledgeForm
       onSelect={onSelect}
       onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
       toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
-        <MenuToggle ref={toggleRef} onClick={onToggleClick} isExpanded={isOpen}>
-          <DownloadIcon /> Download
+        <MenuToggle
+          ref={toggleRef}
+          onClick={onToggleClick}
+          isExpanded={isOpen}
+          icon={
+            <Icon>
+              <DownloadIcon />{' '}
+            </Icon>
+          }
+        >
+          {' '}
+          Download
         </MenuToggle>
       )}
       ouiaId="DownloadDropdown"
diff --git a/src/components/Contribute/Knowledge/DownloadYaml/DownloadYaml.tsx b/src/components/Contribute/Knowledge/DownloadYaml/DownloadYaml.tsx
index 78649408..6edb94ad 100644
--- a/src/components/Contribute/Knowledge/DownloadYaml/DownloadYaml.tsx
+++ b/src/components/Contribute/Knowledge/DownloadYaml/DownloadYaml.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { KnowledgeFormData, KnowledgeYamlData } from '@/types';
 import { KnowledgeSchemaVersion } from '@/types/const';
 import { dumpYaml } from '@/utils/yamlConfig';
+import { Icon } from '@patternfly/react-core';
 import { DropdownItem } from '@patternfly/react-core/dist/esm/components/Dropdown/DropdownItem';
 import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
 
@@ -42,8 +43,18 @@ const DownloadYaml: React.FC<Props> = ({ knowledgeFormData, githubUsername }) =>
     document.body.removeChild(a);
   };
   return (
-    <DropdownItem key="Download Yaml" to="#default-link6" onClick={handleDownloadYaml}>
-      <CodeIcon /> Yaml File
+    <DropdownItem
+      key="Download Yaml"
+      to="#default-link6"
+      onClick={handleDownloadYaml}
+      icon={
+        <Icon>
+          <CodeIcon />
+        </Icon>
+      }
+    >
+      {' '}
+      YAML File
     </DropdownItem>
   );
 };
diff --git a/src/components/Contribute/Knowledge/ViewDropdown/ViewDropdown.tsx b/src/components/Contribute/Knowledge/ViewDropdown/ViewDropdown.tsx
index cd22f4a9..c30e85eb 100644
--- a/src/components/Contribute/Knowledge/ViewDropdown/ViewDropdown.tsx
+++ b/src/components/Contribute/Knowledge/ViewDropdown/ViewDropdown.tsx
@@ -8,6 +8,7 @@ import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
 import { AttributionData, KnowledgeFormData, KnowledgeYamlData } from '@/types';
 import { KnowledgeSchemaVersion } from '@/types/const';
 import { dumpYaml } from '@/utils/yamlConfig';
+import { Icon } from '@patternfly/react-core';
 import FileIcon from '@patternfly/react-icons/dist/dynamic/icons/file-icon';
 import EyeIcon from '@patternfly/react-icons/dist/esm/icons/eye-icon';
 
@@ -75,8 +76,17 @@ export const ViewDropdown: React.FunctionComponent<Props> = ({ knowledgeFormData
         onSelect={onSelect}
         onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
         toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
-          <MenuToggle ref={toggleRef} onClick={onToggleClick} isExpanded={isOpen}>
-            <EyeIcon />
+          <MenuToggle
+            ref={toggleRef}
+            onClick={onToggleClick}
+            isExpanded={isOpen}
+            icon={
+              <Icon>
+                <EyeIcon />{' '}
+              </Icon>
+            }
+          >
+            {' '}
             View
           </MenuToggle>
         )}
@@ -84,11 +94,29 @@ export const ViewDropdown: React.FunctionComponent<Props> = ({ knowledgeFormData
         shouldFocusToggleOnSelect
       >
         <DropdownList>
-          <DropdownItem key="view-yaml" onClick={handleViewYaml}>
-            <CodeIcon /> YAML Content
+          <DropdownItem
+            key="view-yaml"
+            onClick={handleViewYaml}
+            icon={
+              <Icon>
+                <CodeIcon />
+              </Icon>
+            }
+          >
+            {' '}
+            YAML Content
           </DropdownItem>
-          <DropdownItem key="view-attribution" onClick={handleViewAttribution}>
-            <FileIcon /> Attribution Content
+          <DropdownItem
+            key="view-attribution"
+            onClick={handleViewAttribution}
+            icon={
+              <Icon>
+                <FileIcon />
+              </Icon>
+            }
+          >
+            {' '}
+            Attribution Content
           </DropdownItem>
         </DropdownList>
       </Dropdown>
diff --git a/src/components/Dashboard/Github/dashboard.tsx b/src/components/Dashboard/Github/dashboard.tsx
index 03a83ac0..c0bb150f 100644
--- a/src/components/Dashboard/Github/dashboard.tsx
+++ b/src/components/Dashboard/Github/dashboard.tsx
@@ -118,7 +118,9 @@ const DashboardGithub: React.FunctionComponent = () => {
               </div>
             }
           >
-            <OutlinedQuestionCircleIcon />
+            <Button variant="plain" aria-label="more information">
+              <OutlinedQuestionCircleIcon />
+            </Button>
           </Popover>
         </Content>
       </PageSection>