shell: Import ShellManifest as part of maintaining ShellState

This way, it is only validated once and not on every render.

Author: mvollmer

pkg/shell/shell-modals.tsx

@@ -33,7 +33,7 @@ import { SearchIcon } from '@patternfly/react-icons';
 
 import { useInit } from "hooks";
 
-import { import_ShellManifest } from "./manifests";
+import { ShellState } from "./state";
 
 import "menu-select-widget.scss";
 
@@ -90,7 +90,7 @@ export const AboutCockpitModal = ({ dialogResult }) => {
     );
 };
 
-export const LangModal = ({ dialogResult }) => {
+export const LangModal = ({ dialogResult, state } : { dialogResult, state: ShellState }) => {
     const language = document.cookie.replace(/(?:(?:^|.*;\s*)CockpitLang\s*=\s*([^;]*).*$)|^.*$/, "$1") || "en-us";
 
     const [selected, setSelected] = useState(language);
@@ -106,8 +106,6 @@ export const LangModal = ({ dialogResult }) => {
         window.location.reload();
     }
 
-    const manifest = import_ShellManifest(cockpit.manifests.shell || { });
-
     return (
         <Modal isOpen position="top" variant="small"
                id="display-language-modal"
@@ -144,7 +142,7 @@ export const LangModal = ({ dialogResult }) => {
                         <MenuList>
                             {
                                 (() => {
-                                    const locales = manifest.locales || {};
+                                    const locales = state.config.manifest.locales || {};
                                     const filteredLocales = Object.keys(locales)
                                             .filter(key => !searchInput || locales[key].toLowerCase().includes(searchInput.toString().toLowerCase()));
 

pkg/shell/state.tsx

@@ -32,12 +32,13 @@ import {
     compile_manifests, compute_frame_url,
     Location, ManifestItem, CompiledComponents,
 } from "./util.jsx";
-import { Manifest } from "./manifests";
+import { Manifest, ShellManifest, import_ShellManifest } from "./manifests";
 
 export interface ShellConfig {
     language: string;
     language_direction: string;
     host_switcher_enabled: boolean;
+    manifest: ShellManifest;
 }
 
 export interface ShellFrame {
@@ -109,6 +110,7 @@ export class ShellState extends EventEmitter<ShellStateEvents> {
             language,
             language_direction: cockpit.language_direction,
             host_switcher_enabled: false,
+            manifest: import_ShellManifest(cockpit.manifests.shell || {}),
         };
 
         /* Host switcher enabled? */

pkg/shell/topnav.tsx

@@ -30,7 +30,7 @@ import { Toolbar, ToolbarContent, ToolbarItem } from "@patternfly/react-core/dis
 import { CogIcon, ExternalLinkAltIcon, HelpIcon } from '@patternfly/react-icons';
 
 import { ShellState } from "./state";
-import { ManifestDocs, ManifestParentSection, import_ShellManifest } from "./manifests";
+import { ManifestDocs, ManifestParentSection } from "./manifests";
 import { ActivePagesDialog } from "./active-pages-modal.jsx";
 import { CredentialsModal } from './credentials.jsx';
 import { AboutCockpitModal, LangModal, OopsModal } from "./shell-modals.jsx";
@@ -150,7 +150,7 @@ export class TopNav extends React.Component {
                 {cockpit.format(_("$0 documentation"), this.state.osRelease.NAME)}
             </DropdownItem>);
 
-        const shell_manifest = import_ShellManifest(cockpit.manifests.shell || {});
+        const shell_manifest = this.props.state.config.manifest;
 
         // global documentation for cockpit as a whole
         (shell_manifest.docs ?? []).forEach(doc => {
@@ -208,7 +208,7 @@ export class TopNav extends React.Component {
 
         if (shell_manifest.locales)
             main_menu.push(<DropdownItem key="languages" className="display-language-menu"
-                                         onClick={() => Dialogs.run(LangModal, {})}>
+                                         onClick={() => Dialogs.run(LangModal, { state: this.props.state })}>
                 {_("Display language")}
             </DropdownItem>);