linters

Author: himdel

src/components/pulp-about-modal.tsx

@@ -26,14 +26,14 @@ const Value = ({ children }: { children: ReactNode }) => (
 interface IProps {
   isOpen: boolean;
   onClose: () => void;
-  userName: string;
+  username: string;
 }
 
 interface IApplicationInfo {
   pulp_core_version?: string;
 }
 
-export const PulpAboutModal = ({ isOpen, onClose, userName }: IProps) => {
+export const PulpAboutModal = ({ isOpen, onClose, username }: IProps) => {
   const [applicationInfo, setApplicationInfo] = useState<IApplicationInfo>({});
 
   useEffect(() => {
@@ -54,7 +54,7 @@ export const PulpAboutModal = ({ isOpen, onClose, userName }: IProps) => {
   const ui_extra = config.EXTRA_VERSION;
 
   // FIXME
-  const user = { username: userName, id: null, groups: [] };
+  const user = { username, id: null, groups: [] };
 
   return (
     <AboutModal
@@ -115,10 +115,10 @@ export const PulpAboutModal = ({ isOpen, onClose, userName }: IProps) => {
                   ? formatPath(Paths.core.user.detail, { user_id: user.id })
                   : null
               }
-              title={userName}
+              title={username}
             >
-              {userName}
-              {user?.username && user.username !== userName ? (
+              {username}
+              {user?.username && user.username !== username ? (
                 <> ({user.username})</>
               ) : null}
             </MaybeLink>

src/layout.tsx

@@ -31,38 +31,12 @@ import { StandaloneMenu } from './menu';
 import { Paths, formatPath } from './paths';
 import { useUserContext } from './user-context';
 
-export const StandaloneLayout = ({ children }: { children: ReactNode }) => {
-  const [aboutModalVisible, setAboutModalVisible] = useState<boolean>(false);
-  const { getUsername, clearCredentials } = useUserContext();
-
-  const userName = getUsername();
-  let aboutModal = null;
-  let docsDropdownItems = [];
-  let userDropdownItems = [];
-
-  if (userName) {
-    userDropdownItems = [
-      <DropdownItem isDisabled key='username'>
-        <Trans>Username: {userName}</Trans>
-      </DropdownItem>,
-      <DropdownSeparator key='separator' />,
-      <DropdownItem
-        key='profile'
-        component={
-          <Link to={formatPath(Paths.core.user.profile)}>{t`My profile`}</Link>
-        }
-      />,
-
-      <DropdownItem
-        key='logout'
-        aria-label={'logout'}
-        onClick={() => clearCredentials()}
-      >
-        {t`Logout`}
-      </DropdownItem>,
-    ];
-
-    docsDropdownItems = [
+const DocsDropdown = ({ showAbout }: { showAbout: () => void }) => (
+  <StatefulDropdown
+    ariaLabel={t`Docs dropdown`}
+    data-cy='docs-dropdown'
+    defaultText={<QuestionCircleIcon />}
+    items={[
       <DropdownItem
         key='documentation'
         component={
@@ -72,19 +46,56 @@ export const StandaloneLayout = ({ children }: { children: ReactNode }) => {
           >{t`Documentation`}</ExternalLink>
         }
       />,
-      <DropdownItem key='about' onClick={() => setAboutModalVisible(true)}>
+      <DropdownItem key='about' onClick={() => showAbout()}>
         {t`About`}
       </DropdownItem>,
-    ].filter(Boolean);
+    ]}
+    toggleType='icon'
+  />
+);
 
-    aboutModal = (
-      <PulpAboutModal
-        isOpen={aboutModalVisible}
-        onClose={() => setAboutModalVisible(false)}
-        userName={userName}
-      />
-    );
-  }
+const UserDropdown = ({
+  username,
+  clearCredentials,
+}: {
+  username?: string;
+  clearCredentials: () => void;
+}) =>
+  username ? (
+    <StatefulDropdown
+      ariaLabel={t`User dropdown`}
+      data-cy='user-dropdown'
+      defaultText={username}
+      items={[
+        <DropdownItem isDisabled key='username'>
+          <Trans>Username: {username}</Trans>
+        </DropdownItem>,
+        <DropdownSeparator key='separator' />,
+        <DropdownItem
+          key='profile'
+          component={
+            <Link
+              to={formatPath(Paths.core.user.profile)}
+            >{t`My profile`}</Link>
+          }
+        />,
+        <DropdownItem
+          key='logout'
+          aria-label={'logout'}
+          onClick={() => clearCredentials()}
+        >
+          {t`Logout`}
+        </DropdownItem>,
+      ]}
+      toggleType='dropdown'
+    />
+  ) : null;
+
+export const StandaloneLayout = ({ children }: { children: ReactNode }) => {
+  const [aboutModalVisible, setAboutModalVisible] = useState<boolean>(false);
+  const { getUsername, clearCredentials } = useUserContext();
+
+  const username = getUsername();
 
   const Header = (
     <Masthead>
@@ -103,33 +114,22 @@ export const StandaloneLayout = ({ children }: { children: ReactNode }) => {
               padding: '9px 0 0 4px',
             }}
           >
-            Pulp UI
+            {APPLICATION_NAME}
           </span>
         </MastheadBrand>
       </MastheadMain>
       <MastheadContent>
         <span style={{ flexGrow: 1 }} />
         <DarkmodeSwitcher />
         <LanguageSwitcher />
-        {credentials ? (
-          <StatefulDropdown
-            ariaLabel={t`Docs dropdown`}
-            data-cy='docs-dropdown'
-            defaultText={<QuestionCircleIcon />}
-            items={docsDropdownItems}
-            toggleType='icon'
+        <DocsDropdown showAbout={() => setAboutModalVisible(true)} />
+        {username ? (
+          <UserDropdown
+            clearCredentials={clearCredentials}
+            username={username}
           />
-        ) : null}
-        {!credentials ? (
-          <LoginLink />
         ) : (
-          <StatefulDropdown
-            ariaLabel={t`User dropdown`}
-            data-cy='user-dropdown'
-            defaultText={userName}
-            items={userDropdownItems}
-            toggleType='dropdown'
-          />
+          <LoginLink />
         )}
       </MastheadContent>
     </Masthead>
@@ -146,7 +146,13 @@ export const StandaloneLayout = ({ children }: { children: ReactNode }) => {
   return (
     <Page isManagedSidebar header={Header} sidebar={Sidebar}>
       {children}
-      {aboutModalVisible && aboutModal}
+      {aboutModalVisible ? (
+        <PulpAboutModal
+          isOpen
+          onClose={() => setAboutModalVisible(false)}
+          username={username}
+        />
+      ) : null}
     </Page>
   );
 };