pulp · himdel · Dec 30, 2024 · Dec 30, 2024 · Dec 30, 2024 · Dec 30, 2024
diff --git a/config/shared.config.js b/config/shared.config.js
@@ -22,20 +22,12 @@ const buildInfo = {
   version: require('../package.json').version,
 };
 
-const appName = 'Pulp UI';
-const docsURL = 'https://docs.pulpproject.org/';
-
 // Default user defined settings
 const defaultConfigs = [
-  // scope = webpack | browser | both
-  // webpack: will only be available to webpack config, via `customConfigs`
   // browser: will only be available in the browser, as DefinePlugin constants
-  // both: means both
-  { name: 'APPLICATION_NAME', default: appName, scope: 'both' },
-
   { name: 'UI_BUILD_INFO', default: buildInfo, scope: 'browser' },
-  { name: 'UI_DOCS_URL', default: docsURL, scope: 'browser' },
 
+  // webpack: will only be available to webpack config, via `customConfigs`
   { name: 'DEV_PORT', scope: 'webpack' },
   { name: 'DEV_HTTPS', scope: 'webpack' },
   { name: 'DEV_PROXY', scope: 'webpack' },
@@ -47,13 +39,13 @@ module.exports = (inputConfigs) => {
   const globals = {};
 
   defaultConfigs
-    .filter(({ scope }) => ['both', 'webpack'].includes(scope))
+    .filter(({ scope }) => ['webpack'].includes(scope))
     .forEach((item) => {
       customConfigs[item.name] = inputConfigs[item.name] ?? item.default;
     });
 
   defaultConfigs
-    .filter(({ scope }) => ['both', 'browser'].includes(scope))
+    .filter(({ scope }) => ['browser'].includes(scope))
     .forEach((item) => {
       globals[item.name] = JSON.stringify(
         inputConfigs[item.name] ?? item.default,
@@ -142,7 +134,6 @@ module.exports = (inputConfigs) => {
       new ForkTsCheckerWebpackPlugin(),
       // inject src/index.html
       new HtmlWebpackPlugin({
-        applicationName: customConfigs.APPLICATION_NAME,
         favicon: 'static/images/favicon.ico',
         template: resolve(__dirname, '../src/index.html'),
       }),

diff --git a/src/components/base-header.tsx b/src/components/base-header.tsx
@@ -28,9 +28,7 @@ export const BaseHeader = ({
   subTitle,
 }: IProps) => {
   useEffect(() => {
-    document.title = title
-      ? `${APPLICATION_NAME} - ${title}`
-      : APPLICATION_NAME;
+    document.title = title ? `Pulp UI - ${title}` : 'Pulp UI';
   }, [title]);
 
   return (

diff --git a/src/components/pulp-about-modal.tsx b/src/components/pulp-about-modal.tsx
@@ -62,7 +62,7 @@ export const PulpAboutModal = ({ isOpen, onClose, username }: IProps) => {
       brandImageSrc={PulpLogo}
       isOpen={isOpen}
       onClose={onClose}
-      productName={APPLICATION_NAME}
+      productName='Pulp UI'
     >
       <TextContent>
         <TextList component={TextListVariants.dl}>

diff --git a/src/containers/about-project.tsx b/src/containers/about-project.tsx
@@ -38,7 +38,7 @@ const AboutProject = (_props: RouteProps) => (
             style={{ gridTemplateColumns: '32.5% 32.5% 32.5%' }}
           >
             <Card>
-              <CardTitle>{APPLICATION_NAME}</CardTitle>
+              <CardTitle>Pulp UI</CardTitle>
               <CardBody>{t`This project is an attempt to up-cycle the Ansible Galaxy UI codebase. The first version contains mostly saved code with minor fixes. In the future more types of content will be added. We welcome kindly any contributions.`}</CardBody>
               <CardFooter>
                 {' '}

diff --git a/src/containers/execution-environment-list/execution-environment-list.tsx b/src/containers/execution-environment-list/execution-environment-list.tsx
@@ -154,7 +154,7 @@ class ExecutionEnvironmentList extends Component<RouteProps, IState> {
         content={
           <>
             {instructions}
-            <ExternalLink href={UI_DOCS_URL}>{t`Documentation`}</ExternalLink>
+            <ExternalLink href='https://docs.pulpproject.org/'>{t`Documentation`}</ExternalLink>
           </>
         }
         hasAutoWidth

diff --git a/src/index.d.ts b/src/index.d.ts
@@ -5,7 +5,5 @@ declare module '*.png';
 declare module '*.svg';
 
 // Declare configuration globals here so that TypeScript compiles
-/* eslint-disable no-var */
-declare var APPLICATION_NAME;
+/* eslint-disable-next-line no-var */
 declare var UI_BUILD_INFO;
-declare var UI_DOCS_URL;
diff --git a/src/index.html b/src/index.html
@@ -2,7 +2,7 @@
 <html lang="en-US">
   <head>
     <meta charset="UTF-8" />
-    <title><%= htmlWebpackPlugin.options.applicationName %></title>
+    <title>Pulp UI</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/layout.tsx b/src/layout.tsx
@@ -31,19 +31,41 @@ 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 { credentials, clearCredentials } = useUserContext();
-
-  let aboutModal = null;
-  let docsDropdownItems = [];
-  let userDropdownItems = [];
-  let username: string;
-
-  if (credentials) {
-    username = credentials.username;
+const DocsDropdown = ({ showAbout }: { showAbout: () => void }) => (
+  <StatefulDropdown
+    ariaLabel={t`Docs dropdown`}
+    data-cy='docs-dropdown'
+    defaultText={<QuestionCircleIcon />}
+    items={[
+      <DropdownItem
+        key='documentation'
+        component={
+          <ExternalLink
+            href='https://docs.pulpproject.org/'
+            variant='menu'
+          >{t`Documentation`}</ExternalLink>
+        }
+      />,
+      <DropdownItem key='about' onClick={() => showAbout()}>
+        {t`About`}
+      </DropdownItem>,
+    ]}
+    toggleType='icon'
+  />
+);
 
-    userDropdownItems = [
+const UserDropdown = ({
+  username,
+  logout,
+}: {
+  username: string;
+  logout: () => void;
+}) => (
+  <StatefulDropdown
+    ariaLabel={t`User dropdown`}
+    data-cy='user-dropdown'
+    defaultText={username}
+    items={[
       <DropdownItem isDisabled key='username'>
         {t`Username: ${username}`}
       </DropdownItem>,
@@ -54,39 +76,19 @@ export const StandaloneLayout = ({ children }: { children: ReactNode }) => {
           <Link to={formatPath(Paths.core.user.profile)}>{t`My profile`}</Link>
         }
       />,
-
-      <DropdownItem
-        key='logout'
-        aria-label={'logout'}
-        onClick={() => clearCredentials()}
-      >
+      <DropdownItem key='logout' aria-label={'logout'} onClick={() => logout()}>
         {t`Logout`}
       </DropdownItem>,
-    ];
+    ]}
+    toggleType='dropdown'
+  />
+);
 
-    docsDropdownItems = [
-      <DropdownItem
-        key='documentation'
-        component={
-          <ExternalLink
-            href={UI_DOCS_URL}
-            variant='menu'
-          >{t`Documentation`}</ExternalLink>
-        }
-      />,
-      <DropdownItem key='about' onClick={() => setAboutModalVisible(true)}>
-        {t`About`}
-      </DropdownItem>,
-    ].filter(Boolean);
+export const StandaloneLayout = ({ children }: { children: ReactNode }) => {
+  const [aboutModalVisible, setAboutModalVisible] = useState<boolean>(false);
+  const { credentials, clearCredentials } = useUserContext();
 
-    aboutModal = (
-      <PulpAboutModal
-        isOpen={aboutModalVisible}
-        onClose={() => setAboutModalVisible(false)}
-        username={username}
-      />
-    );
-  }
+  const username = credentials?.username;
 
   const Header = (
     <Masthead>
@@ -98,7 +100,7 @@ export const StandaloneLayout = ({ children }: { children: ReactNode }) => {
       <MastheadMain>
         <MastheadBrand>
           <Link to={formatPath(Paths.core.status)}>
-            <SmallLogo alt={APPLICATION_NAME} />
+            <SmallLogo alt='Pulp UI' />
           </Link>
           <span
             style={{
@@ -113,26 +115,11 @@ export const StandaloneLayout = ({ children }: { children: ReactNode }) => {
         <span style={{ flexGrow: 1 }} />
         <DarkmodeSwitcher />
         <LanguageSwitcher />
+        <DocsDropdown showAbout={() => setAboutModalVisible(true)} />
         {credentials ? (
-          <StatefulDropdown
-            ariaLabel={t`Docs dropdown`}
-            data-cy='docs-dropdown'
-            defaultText={<QuestionCircleIcon />}
-            items={docsDropdownItems}
-            toggleType='icon'
-          />
+          <UserDropdown username={username} logout={() => clearCredentials()} />
         ) : null}
-        {!credentials ? (
-          <LoginLink />
-        ) : (
-          <StatefulDropdown
-            ariaLabel={t`User dropdown`}
-            data-cy='user-dropdown'
-            defaultText={username}
-            items={userDropdownItems}
-            toggleType='dropdown'
-          />
-        )}
+        {!credentials ? <LoginLink /> : null}
       </MastheadContent>
     </Masthead>
   );
@@ -148,7 +135,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>
   );
 };