From a03a55ffe0ee17fef480f392d43e8a06732c6a71 Mon Sep 17 00:00:00 2001 From: Martin Hradil Date: Mon, 30 Dec 2024 18:42:27 +0000 Subject: [PATCH 1/3] layout - pull out UserDropdown, DocsDropdown --- src/layout.tsx | 99 +++++++++++++++++++++++++------------------------- 1 file changed, 50 insertions(+), 49 deletions(-) diff --git a/src/layout.tsx b/src/layout.tsx index be6920a5..4da90b91 100644 --- 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(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 }) => ( + } + items={[ + {t`Documentation`} + } + />, + showAbout()}> + {t`About`} + , + ]} + toggleType='icon' + /> +); - userDropdownItems = [ +const UserDropdown = ({ + username, + logout, +}: { + username: string; + logout: () => void; +}) => ( + {t`Username: ${username}`} , @@ -54,30 +76,23 @@ export const StandaloneLayout = ({ children }: { children: ReactNode }) => { {t`My profile`} } />, - - clearCredentials()} - > + logout()}> {t`Logout`} , - ]; + ]} + toggleType='dropdown' + /> +); - docsDropdownItems = [ - {t`Documentation`} - } - />, - setAboutModalVisible(true)}> - {t`About`} - , - ].filter(Boolean); +export const StandaloneLayout = ({ children }: { children: ReactNode }) => { + const [aboutModalVisible, setAboutModalVisible] = useState(false); + const { credentials, clearCredentials } = useUserContext(); + + let aboutModal = null; + let username: string; + + if (credentials) { + username = credentials.username; aboutModal = ( { - {credentials ? ( - } - items={docsDropdownItems} - toggleType='icon' - /> - ) : null} + setAboutModalVisible(true)} /> {!credentials ? ( ) : ( - + clearCredentials()} /> )} From f1d5a3436a62a9234a8e65b56ebe2bbf9cecdd30 Mon Sep 17 00:00:00 2001 From: Martin Hradil Date: Mon, 30 Dec 2024 18:51:34 +0000 Subject: [PATCH 2/3] drop APPLICATION_NAME, UI_DOCS_URL no need to have these overridable anymore --- config/shared.config.js | 15 +++------------ src/components/base-header.tsx | 4 +--- src/components/pulp-about-modal.tsx | 2 +- src/containers/about-project.tsx | 2 +- .../execution-environment-list.tsx | 2 +- src/index.d.ts | 4 +--- src/index.html | 2 +- src/layout.tsx | 11 +++++------ 8 files changed, 14 insertions(+), 28 deletions(-) diff --git a/config/shared.config.js b/config/shared.config.js index e46c77b6..b4c96b4d 100644 --- 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 index 9097a4fa..7ffa0a98 100644 --- 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 index 9865f1c2..95674a3d 100644 --- 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' > diff --git a/src/containers/about-project.tsx b/src/containers/about-project.tsx index ae4d8150..9d4867ba 100644 --- 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%' }} > - {APPLICATION_NAME} + Pulp UI {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.`} {' '} diff --git a/src/containers/execution-environment-list/execution-environment-list.tsx b/src/containers/execution-environment-list/execution-environment-list.tsx index 2d2cb9e3..459bcad7 100644 --- 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 { content={ <> {instructions} - {t`Documentation`} + {t`Documentation`} } hasAutoWidth diff --git a/src/index.d.ts b/src/index.d.ts index 3268ed3d..1e310c9b 100644 --- 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 index 99bdc731..9956022c 100644 --- a/src/index.html +++ b/src/index.html @@ -2,7 +2,7 @@ - <%= htmlWebpackPlugin.options.applicationName %> + Pulp UI
diff --git a/src/layout.tsx b/src/layout.tsx index 4da90b91..9afd51b7 100644 --- a/src/layout.tsx +++ b/src/layout.tsx @@ -41,7 +41,7 @@ const DocsDropdown = ({ showAbout }: { showAbout: () => void }) => ( key='documentation' component={ {t`Documentation`} } @@ -113,7 +113,7 @@ export const StandaloneLayout = ({ children }: { children: ReactNode }) => { - + { setAboutModalVisible(true)} /> - {!credentials ? ( - - ) : ( + {credentials ? ( clearCredentials()} /> - )} + ) : null} + {!credentials ? : null} ); From 52568849fede8d051366f53204c02c47b7828dd8 Mon Sep 17 00:00:00 2001 From: Martin Hradil Date: Mon, 30 Dec 2024 18:56:48 +0000 Subject: [PATCH 3/3] inline AboutModal, dont condition on username --- src/layout.tsx | 23 ++++++++--------------- 1 file changed, 8 insertions(+), 15 deletions(-) diff --git a/src/layout.tsx b/src/layout.tsx index 9afd51b7..43c4cb54 100644 --- a/src/layout.tsx +++ b/src/layout.tsx @@ -88,20 +88,7 @@ export const StandaloneLayout = ({ children }: { children: ReactNode }) => { const [aboutModalVisible, setAboutModalVisible] = useState(false); const { credentials, clearCredentials } = useUserContext(); - let aboutModal = null; - let username: string; - - if (credentials) { - username = credentials.username; - - aboutModal = ( - setAboutModalVisible(false)} - username={username} - /> - ); - } + const username = credentials?.username; const Header = ( @@ -148,7 +135,13 @@ export const StandaloneLayout = ({ children }: { children: ReactNode }) => { return ( {children} - {aboutModalVisible && aboutModal} + {aboutModalVisible ? ( + setAboutModalVisible(false)} + username={username} + /> + ) : null} ); };