Expose NamespaceBar in the core API

Author: pcbailey

dynamic-demo-plugin/console-extensions.json

@@ -349,5 +349,25 @@
       "name": "Modal Launchers",
       "href": "/test-modal"
     }
+  },
+  {
+    "type": "console.page/route",
+    "properties": {
+      "exact": false,
+      "path": ["/example-namespaced-page/ns/:ns", "/example-namespaced-page/all-namespaces"],
+      "component": {
+        "$codeRef": "exampleNamespacedPage.ExampleNamespacedPage"
+      }
+    }
+  },
+  {
+    "type": "console.navigation/href",
+    "properties": {
+      "namespaced": true,
+      "id": "demo-example-namespaced-page",
+      "perspective": "demo",
+      "name": "%plugin__console-demo-plugin~Example Namespaced Page%",
+      "href": "/example-namespaced-page"
+    }
   }
 ]

dynamic-demo-plugin/locales/en/plugin__console-demo-plugin.json

@@ -2,12 +2,17 @@
   "{{count}} Worker Node": "{{count}} Worker Node",
   "{{count}} Worker Node_plural": "{{count}} Worker Nodes",
   "Worker Nodes": "Worker Nodes",
+  "Example page with a namespace bar": "Example page with a namespace bar",
+  "Currently selected namespace": "Currently selected namespace",
   "Example info alert": "Example info alert",
   "Example warning alert": "Example warning alert",
   "Example hint": "Example hint",
   "This page shows an example gallery view with cards": "This page shows an example gallery view with cards",
   "Example card": "Example card",
   "Card content goes here.": "Card content goes here.",
+  "Prometheus error": "Prometheus error",
+  "Prometheus loading": "Prometheus loading",
+  "Prometheus data": "Prometheus data",
   "Dynamic Plugin Proxy Services example": "Dynamic Plugin Proxy Services example",
   "Proxy: consoleFetchJSON": "Proxy: consoleFetchJSON",
   "Extensions of type Console.flag/Model": "Extensions of type Console.flag/Model",
@@ -25,6 +30,9 @@
   "My value": "My value",
   "Added title - error": "Added title - error",
   "Error text": "Error text",
+  "{{count}} Cron Job": "{{count}} Cron Job",
+  "{{count}} Cron Job_plural": "{{count}} Cron Jobs",
+  "Cron Jobs": "Cron Jobs",
   "Utilities from Dynamic Plugin SDK": "Utilities from Dynamic Plugin SDK",
   "Utility: consoleFetchJSON": "Utility: consoleFetchJSON",
   "Demo": "Demo",
@@ -35,9 +43,7 @@
   "Test Utilities": "Test Utilities",
   "Foo item": "Foo item",
   "Bar item": "Bar item",
+  "Example Namespaced Page": "Example Namespaced Page",
   "Dynamic Page 1": "Dynamic Page 1",
-  "Dynamic Page 2": "Dynamic Page 2",
-  "Prometheus error": "Prometheus error",
-  "Prometheus loading": "Prometheus loading",
-  "Prometheus data": "Prometheus data"
+  "Dynamic Page 2": "Dynamic Page 2"
 }

dynamic-demo-plugin/package.json

@@ -56,6 +56,7 @@
       "utilityConsumer": "./components/UtilityConsumer",
       "exampleProxyPage": "./components/ExampleProxyPage",
       "K8sAPIConsumer": "./components/k8sConsumer/K8sAPIConsumer",
+      "exampleNamespacedPage": "./components/ExampleNamespacedPage",
       "navPage": "./components/Nav",
       "listPage": "./components/ListPage",
       "projectTabContent": "./components/ProjectTabExtensionContent",

dynamic-demo-plugin/src/components/ExampleNamespacedPage.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { useTranslation } from 'react-i18next';
+import { match as RMatch } from 'react-router-dom';
+import {
+  Card,
+  CardBody,
+  Flex,
+  Page,
+  PageSection,
+  PageSectionVariants,
+  Title,
+} from '@patternfly/react-core';
+import { NamespaceBar } from '@openshift-console/dynamic-plugin-sdk';
+
+const NamespacePageContent = ({ namespace }: { namespace?: string }) => {
+  const { t } = useTranslation('plugin__console-demo-plugin');
+
+  return (
+    <Page>
+      <PageSection variant={PageSectionVariants.light}>
+        <Title headingLevel="h1">{t('Example page with a namespace bar')}</Title>
+      </PageSection>
+      <PageSection>
+        <Card>
+          <CardBody>
+            <Flex
+              alignItems={{ default: 'alignItemsCenter' }}
+              justifyContent={{ default: 'justifyContentCenter' }}
+              grow={{ default: 'grow' }}
+              direction={{ default: 'column' }}
+            >
+              <h1>{t('Currently selected namespace')}</h1>
+              <h2>{namespace}</h2>
+            </Flex>
+          </CardBody>
+        </Card>
+      </PageSection>
+    </Page>
+  );
+};
+
+export const ExampleNamespacedPage: React.FC<ExampleNamespacedPageProps> = ({ match }) => {
+  const { ns } = match?.params;
+  const activeNamespace = ns || 'all-namespaces';
+
+  return (
+    <>
+      <NamespaceBar />
+      <NamespacePageContent namespace={activeNamespace} />
+    </>
+  );
+};
+
+type ExampleNamespacedPageProps = {
+  match: RMatch<{
+    ns?: string;
+  }>;
+};

dynamic-demo-plugin/src/i18n.ts

@@ -12,3 +12,4 @@
 // t('plugin__console-demo-plugin~Test Utilities')
 // t('plugin__console-demo-plugin~Foo item')
 // t('plugin__console-demo-plugin~Bar item')
+// t('plugin__console-demo-plugin~Example Namespaced Page')

dynamic-demo-plugin/yarn.lock

@@ -162,6 +162,11 @@
     tippy.js "5.1.2"
     tslib "^2.0.0"
 
+"@patternfly/react-icons@^4.13.0":
+  version "4.19.8"
+  resolved "https://registry.yarnpkg.com/@patternfly/react-icons/-/react-icons-4.19.8.tgz#376cfe136b3acef86fa28081c99e4e88bd13457c"
+  integrity sha512-JBBcVntRLspe857JnGo8lFaZfy+WOR/IYe2E9W3Rknqm1T8WO6oXpeEnrr5r9bpYDFUa4ttcb/acuQXc1xypxg==
+
 "@patternfly/react-icons@^4.72.3":
   version "4.72.3"
   resolved "https://registry.yarnpkg.com/@patternfly/react-icons/-/react-icons-4.72.3.tgz#5886755a2b516d49d97ed3bdc88609d9b3c4fc2a"
@@ -177,7 +182,7 @@
   resolved "https://registry.yarnpkg.com/@patternfly/react-styles/-/react-styles-4.71.3.tgz#4f1cf4624a675751f035dc3bfa4cb3c6ca48e43b"
   integrity sha512-JpMBIrJfco3JwK9KbJvjr+tKZidVhbkGrQT7GyWbYAwZ2bOmCmeCPJYc0xhAWcvNumn9a7AhYzAWPJVlQQue3g==
 
-"@patternfly/react-styles@^4.85.7":
+"@patternfly/react-styles@^4.12.4", "@patternfly/react-styles@^4.85.7":
   version "4.85.7"
   resolved "https://registry.yarnpkg.com/@patternfly/react-styles/-/react-styles-4.85.7.tgz#93afa64c81cf74f7fa050fb787f02348113d62a6"
   integrity sha512-XSa8Loaouj1XEmbJmEeURXxKu5ub1VCRV0yN5YOnRo7j7XI4Yw9QarSHODzhkquI3AhkD0dPyMOaefz4P6lJKw==
@@ -194,16 +199,16 @@
     lodash "^4.17.19"
     tslib "^2.0.0"
 
+"@patternfly/react-tokens@^4.14.0", "@patternfly/react-tokens@^4.87.7":
+  version "4.87.7"
+  resolved "https://registry.yarnpkg.com/@patternfly/react-tokens/-/react-tokens-4.87.7.tgz#f96de3d2469b23ba86ead36bf8bac4ae9e7e0559"
+  integrity sha512-07A7Ya4zIAYyYn3mOCG82wMC3/Y8mtTw95a//Onu/H0oDPMJ5oT7Vd14YN7pHexCAtWvc36Mp46iZ1osIQ7yVQ==
+
 "@patternfly/react-tokens@^4.73.3":
   version "4.73.3"
   resolved "https://registry.yarnpkg.com/@patternfly/react-tokens/-/react-tokens-4.73.3.tgz#dae690220c25c242d2c45ec571e46d8cdcc7de13"
   integrity sha512-WyEcV9jiMZzscQMBhlDkypHw9qg0wbX7r/fe8HcWws+jnYWGVjwUdnr18ktI9aw/h/oQS46sirf8xbNTlIiQFg==
 
-"@patternfly/react-tokens@^4.87.7":
-  version "4.87.7"
-  resolved "https://registry.yarnpkg.com/@patternfly/react-tokens/-/react-tokens-4.87.7.tgz#f96de3d2469b23ba86ead36bf8bac4ae9e7e0559"
-  integrity sha512-07A7Ya4zIAYyYn3mOCG82wMC3/Y8mtTw95a//Onu/H0oDPMJ5oT7Vd14YN7pHexCAtWvc36Mp46iZ1osIQ7yVQ==
-
 "@types/eslint-scope@^3.7.3":
   version "3.7.3"
   resolved "https://registry.yarnpkg.com/@types/eslint-scope/-/eslint-scope-3.7.3.tgz#125b88504b61e3c8bc6f870882003253005c3224"
@@ -1408,6 +1413,13 @@ flush-write-stream@^1.0.2:
     inherits "^2.0.3"
     readable-stream "^2.3.6"
 
+[email protected]:
+  version "6.2.2"
+  resolved "https://registry.yarnpkg.com/focus-trap/-/focus-trap-6.2.2.tgz#0e6f391415b0697c99da932702dedd13084fa131"
+  integrity sha512-qWovH9+LGoKqREvJaTCzJyO0hphQYGz+ap5Hc4NqXHNhZBdxCi5uBPPcaOUw66fHmzXLVwvETLvFgpwPILqKpg==
+  dependencies:
+    tabbable "^5.1.4"
+
 [email protected]:
   version "6.9.2"
   resolved "https://registry.yarnpkg.com/focus-trap/-/focus-trap-6.9.2.tgz#a9ef72847869bd2cbf62cb930aaf8e138fef1ca9"
@@ -3437,7 +3449,7 @@ symlink-or-copy@^1.1.8, symlink-or-copy@^1.2.0, symlink-or-copy@^1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/symlink-or-copy/-/symlink-or-copy-1.3.1.tgz#9506dd64d8e98fa21dcbf4018d1eab23e77f71fe"
 
-tabbable@^5.3.2:
+tabbable@^5.1.4, tabbable@^5.3.2:
   version "5.3.3"
   resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-5.3.3.tgz#aac0ff88c73b22d6c3c5a50b1586310006b47fbf"
   integrity sha512-QD9qKY3StfbZqWOPLp0++pOrAVb/HbUi5xCc8cUo4XjP19808oaMiDzn0leBY5mCespIBM0CIZePzZjgzR83kA==

frontend/packages/console-dynamic-plugin-sdk/docs/api.md

@@ -60,9 +60,10 @@
 58.  [`Timestamp`](#timestamp)
 59.  [`useModal`](#usemodal)
 60.  [`ActionServiceProvider`](#actionserviceprovider)
-61. [DEPRECATED] [`PerspectiveContext`](#perspectivecontext)
-62. [DEPRECATED] [`useAccessReviewAllowed`](#useaccessreviewallowed)
-63. [DEPRECATED] [`useSafetyFirst`](#usesafetyfirst)
+61.  [`NamespaceBar`](#namespacebar)
+62. [DEPRECATED] [`PerspectiveContext`](#perspectivecontext)
+63. [DEPRECATED] [`useAccessReviewAllowed`](#useaccessreviewallowed)
+64. [DEPRECATED] [`useSafetyFirst`](#usesafetyfirst)
 
 ---
 
@@ -2077,6 +2078,46 @@ Component that allows to receive contributions from other plugins for the `conso
 
 
 
+---
+
+## `NamespaceBar`
+
+### Summary 
+
+A component that renders a horizontal toolbar with a namespace dropdown menu in the leftmost position. Additional components can be passed in as children and will be rendered to the right of the namespace dropdown. This component is designed to be used at the top of the page. It should be used on pages where the user needs to be able to change the active namespace, such as on pages with k8s resources.
+
+
+
+### Example
+
+
+```tsx
+   const logNamespaceChange = (namespace) => console.log(`New namespace: ${namespace}`);
+
+   ...
+
+   <NamespaceBar onNamespaceChange={logNamespaceChange}>
+     <NamespaceBarApplicationSelector />
+   </NamespaceBar>
+   <Page>
+
+     ...
+```
+
+
+
+
+
+### Parameters
+
+| Parameter Name | Description |
+| -------------- | ----------- |
+| `onNamespaceChange` | (optional) A function that is executed when a namespace option is selected. It accepts the new namespace in the form of a string as its only argument. The active namespace is updated automatically when an option is selected, but additional logic can be applied via this function. When the namespace is changed, the namespace parameter in the URL will be changed from the previous namespace to the newly selected namespace. |
+| `isDisabled` | (optional) A boolean flag that disables the namespace dropdown if set to true. This option only applies to the namespace dropdown and has no effect on child components. |
+| `children` | (optional) Additional elements to be rendered inside the toolbar to the right of the namespace dropdown. |
+
+
+
 ---
 
 ## `PerspectiveContext`

frontend/packages/console-dynamic-plugin-sdk/src/api/dynamic-core-api.ts

@@ -26,6 +26,7 @@ import {
   ResourceEventStreamProps,
   UsePrometheusPoll,
   TimestampProps,
+  NamespaceBarProps,
 } from '../extensions/console-types';
 import { StatusPopupSectionProps, StatusPopupItemProps } from '../extensions/dashboard-types';
 
@@ -669,3 +670,25 @@ export { useModal } from '../app/modal-support/useModal';
  */
 export const ActionServiceProvider: React.FC<ActionServiceProviderProps> = require('@console/shared/src/components/actions/ActionServiceProvider')
   .default;
+
+/**
+ * A component that renders a horizontal toolbar with a namespace dropdown menu in the leftmost position. Additional components can be passed in as children and will be rendered to the right of the namespace dropdown. This component is designed to be used at the top of the page. It should be used on pages where the user needs to be able to change the active namespace, such as on pages with k8s resources.
+ * @param {function} onNamespaceChange - (optional) A function that is executed when a namespace option is selected. It accepts the new namespace in the form of a string as its only argument. The active namespace is updated automatically when an option is selected, but additional logic can be applied via this function. When the namespace is changed, the namespace parameter in the URL will be changed from the previous namespace to the newly selected namespace.
+ * @param {boolean} isDisabled - (optional) A boolean flag that disables the namespace dropdown if set to true. This option only applies to the namespace dropdown and has no effect on child components.
+ * @param {React.ReactNode} children - (optional) Additional elements to be rendered inside the toolbar to the right of the namespace dropdown.
+ * @example
+ * ```tsx
+ *    const logNamespaceChange = (namespace) => console.log(`New namespace: ${namespace}`);
+ *
+ *    ...
+ *
+ *    <NamespaceBar onNamespaceChange={logNamespaceChange}>
+ *      <NamespaceBarApplicationSelector />
+ *    </NamespaceBar>
+ *    <Page>
+ *
+ *      ...
+ * ```
+ */
+export const NamespaceBar: React.FC<NamespaceBarProps> = require('@console/internal/components/namespace-bar')
+  .NamespaceBar;

frontend/packages/console-dynamic-plugin-sdk/src/extensions/console-types.ts

@@ -643,3 +643,9 @@ export type TimestampProps = {
   omitSuffix?: boolean;
   className?: string;
 };
+
+export type NamespaceBarProps = {
+  onNamespaceChange?: (namespace: string) => void;
+  isDisabled?: boolean;
+  children?: React.ReactNode;
+};

frontend/packages/dev-console/src/components/NamespacedPage.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as cx from 'classnames';
-import { NamespaceBar } from '@console/internal/components/namespace';
+import { NamespaceBar } from '@console/internal/components/namespace-bar';
 import NamespaceBarApplicationSelector from '@console/topology/src/components/dropdowns/NamespaceBarApplicationSelector';
 
 import './NamespacedPage.scss';
@@ -30,7 +30,7 @@ const NamespacedPage: React.FC<NamespacedPageProps> = ({
 }) => (
   <div className="odc-namespaced-page">
     <NamespaceBar
-      disabled={disabled}
+      isDisabled={disabled}
       onNamespaceChange={onNamespaceChange}
       hideProjects={hideProjects}
     >

frontend/packages/knative-plugin/src/components/eventing/EventingListPage.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { match as Rmatch } from 'react-router-dom';
-import { NamespaceBar } from '@console/internal/components/namespace';
+import { NamespaceBar } from '@console/internal/components/namespace-bar';
 import { Page } from '@console/internal/components/utils';
 import { MenuActions, MultiTabListPage } from '@console/shared';
 import { EventingBrokerModel } from '../../models';

frontend/packages/knative-plugin/src/components/eventing/__tests__/EventingListPage.spec.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { shallow, ShallowWrapper } from 'enzyme';
-import { NamespaceBar } from '@console/internal/components/namespace';
+import { NamespaceBar } from '@console/internal/components/namespace-bar';
 import { MultiTabListPage } from '@console/shared';
 import EventingListPage from '../EventingListPage';
 

frontend/packages/knative-plugin/src/components/overview/serving-list/ServingListsPage.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { match as Rmatch } from 'react-router-dom';
-import { NamespaceBar } from '@console/internal/components/namespace';
+import { NamespaceBar } from '@console/internal/components/namespace-bar';
 import { Page } from '@console/internal/components/utils';
 import { referenceForModel } from '@console/internal/module/k8s';
 import { MenuActions, MultiTabListPage } from '@console/shared';

frontend/packages/knative-plugin/src/components/overview/serving-list/__tests__/ServingListPage.spec.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { shallow, ShallowWrapper } from 'enzyme';
-import { NamespaceBar } from '@console/internal/components/namespace';
+import { NamespaceBar } from '@console/internal/components/namespace-bar';
 import { MultiTabListPage } from '@console/shared';
 import { RevisionModel } from '../../../../models';
 import ServingListPage from '../ServingListsPage';

frontend/public/components/app-contents.tsx

@@ -15,7 +15,7 @@ import { ErrorBoundaryPage } from '@console/shared/src/components/error';
 import { connectToFlags } from '../reducers/connectToFlags';
 import { flagPending, FlagsObject } from '../reducers/features';
 import { GlobalNotifications } from './global-notifications';
-import { NamespaceBar } from './namespace';
+import { NamespaceBar } from './namespace-bar';
 import { SearchPage } from './search';
 import { ResourceDetailsPage, ResourceListPage } from './resource-list';
 import { AsyncComponent, LoadingBox } from './utils';