fix(ui): Remove the ability to change namespaces via the UI in Manage…

…d Namespace Mode. Closes #5577

Signed-off-by: Saravanan Balasubramanian <sarabala1979@gmail.com>

USERS.md

@@ -23,7 +23,9 @@ Currently, the following organizations are **officially** using Argo Workflows:
 1. [BEI.RE](https://www.bei.re/)
 1. [BioBox Analytics](https://biobox.io)
 1. [BlackRock](https://www.blackrock.com/)
+1. [Bloomberg](https://www.bloomberg.com/)
 1. [bonprix](https://en.bonprix.de/corporate/our-company/)
+1. [ByteDance](https://www.bytedance.com/en/)
 1. [Canva](https://www.canva.com/)
 1. [Capital One](https://www.capitalone.com/tech/)
 1. [CarTrack](https://www.cartrack.com/)

ui/src/app/app-router.tsx

@@ -69,6 +69,7 @@ export const AppRouter = ({popupManager, history, notificationsManager}: {popupM
             .catch(setError);
     }, []);
 
+    const namespaceSuffix = Utils.managedNamespace ? '' : '/' + namespace;
     return (
         <>
             {popupProps && <Popup {...popupProps} />}
@@ -79,12 +80,12 @@ export const AppRouter = ({popupManager, history, notificationsManager}: {popupM
                         navItems={[
                             {
                                 title: 'Workflows',
-                                path: workflowsUrl + '/' + namespace,
+                                path: workflowsUrl + namespaceSuffix,
                                 iconClassName: 'fa fa-stream'
                             },
                             {
                                 title: 'Workflow Templates',
-                                path: workflowTemplatesUrl + '/' + namespace,
+                                path: workflowTemplatesUrl + namespaceSuffix,
                                 iconClassName: 'fa fa-window-maximize'
                             },
                             {
@@ -94,37 +95,37 @@ export const AppRouter = ({popupManager, history, notificationsManager}: {popupM
                             },
                             {
                                 title: 'Cron Workflows',
-                                path: cronWorkflowsUrl + '/' + namespace,
+                                path: cronWorkflowsUrl + namespaceSuffix,
                                 iconClassName: 'fa fa-clock'
                             },
                             {
                                 title: 'Event Flow',
-                                path: eventFlowUrl + '/' + namespace,
+                                path: eventFlowUrl + namespaceSuffix,
                                 iconClassName: 'fa fa-broadcast-tower'
                             },
                             {
                                 title: 'Event Sources',
-                                path: eventSourceUrl + '/' + namespace,
+                                path: eventSourceUrl + namespaceSuffix,
                                 iconClassName: 'fas fa-bolt'
                             },
                             {
                                 title: 'Sensors',
-                                path: sensorUrl + '/' + namespace,
+                                path: sensorUrl + namespaceSuffix,
                                 iconClassName: 'fa fa-satellite-dish'
                             },
                             {
                                 title: 'Workflow Event Bindings',
-                                path: workflowsEventBindingsUrl + '/' + namespace,
+                                path: workflowsEventBindingsUrl + namespaceSuffix,
                                 iconClassName: 'fa fa-link'
                             },
                             {
                                 title: 'Archived Workflows',
-                                path: archivedWorkflowsUrl + '/' + namespace,
+                                path: archivedWorkflowsUrl + namespaceSuffix,
                                 iconClassName: 'fa fa-archive'
                             },
                             {
                                 title: 'Reports',
-                                path: reportsUrl + '/' + namespace,
+                                path: reportsUrl + namespaceSuffix,
                                 iconClassName: 'fa fa-chart-bar'
                             },
                             {
@@ -164,6 +165,7 @@ export const AppRouter = ({popupManager, history, notificationsManager}: {popupM
                                 <Route exact={true} strict={true} path={apiDocsUrl} component={apidocs.component} />
                                 <Route exact={true} strict={true} path={userInfoUrl} component={userinfo.component} />
                                 <Route exact={true} strict={true} path={loginUrl} component={login.component} />
+                                {Utils.managedNamespace && <Redirect to={workflowsUrl} />}
                                 {namespace && <Redirect to={workflowsUrl + '/' + namespace} />}
                             </Switch>
                         </ErrorBoundary>

ui/src/app/archived-workflows/components/archived-workflow-list/archived-workflow-list.tsx

@@ -47,7 +47,7 @@ export class ArchivedWorkflowList extends BasePage<RouteComponentProps<any>, Sta
         const labelQueryParam = this.queryParams('label');
         this.state = {
             pagination: {offset: this.queryParam('offset'), limit: parseLimit(this.queryParam('limit')) || savedOptions.pagination.limit},
-            namespace: this.props.match.params.namespace || '',
+            namespace: Utils.getNamespace(this.props.match.params.namespace) || '',
             selectedPhases: phaseQueryParam.length > 0 ? phaseQueryParam : savedOptions.selectedPhases,
             selectedLabels: labelQueryParam.length > 0 ? labelQueryParam : savedOptions.selectedLabels,
             minStartedAt: this.parseTime(this.queryParam('minStartedAt')) || this.lastMonth(),
@@ -144,7 +144,8 @@ export class ArchivedWorkflowList extends BasePage<RouteComponentProps<any>, Sta
 
     private saveHistory() {
         this.storage.setItem('options', this.state, {} as State);
-        this.url = uiUrl('archived-workflows/' + (this.state.namespace || '') + '?' + this.filterParams.toString());
+        const newNamespace = Utils.managedNamespace ? '' : this.state.namespace;
+        this.url = uiUrl('archived-workflows' + (newNamespace ? '/' + newNamespace : '') + '?' + this.filterParams.toString());
         Utils.currentNamespace = this.state.namespace;
     }
 

ui/src/app/cluster-workflow-templates/components/cluster-workflow-template-details/cluster-workflow-template-details.tsx

@@ -56,7 +56,7 @@ export const ClusterWorkflowTemplateDetails = ({history, location, match}: Route
     useEffect(() => {
         services.info
             .getInfo()
-            .then(info => setNamespace(Utils.getNamespace(info.managedNamespace)))
+            .then(info => setNamespace(Utils.getNamespaceWithDefault(info.managedNamespace)))
             .then(() => setError(null))
             .catch(setError);
     }, []);

ui/src/app/cron-workflows/components/cron-workflow-creator.tsx

@@ -11,7 +11,7 @@ import {Utils} from '../../shared/utils';
 import {CronWorkflowEditor} from './cron-workflow-editor';
 
 export const CronWorkflowCreator = ({onCreate, namespace}: {namespace: string; onCreate: (cronWorkflow: CronWorkflow) => void}) => {
-    const [cronWorkflow, setCronWorkflow] = useState<CronWorkflow>(exampleCronWorkflow(Utils.getNamespace(namespace)));
+    const [cronWorkflow, setCronWorkflow] = useState<CronWorkflow>(exampleCronWorkflow(Utils.getNamespaceWithDefault(namespace)));
     const [error, setError] = useState<Error>();
     return (
         <>
@@ -21,7 +21,7 @@ export const CronWorkflowCreator = ({onCreate, namespace}: {namespace: string; o
                     icon='plus'
                     onClick={() => {
                         services.cronWorkflows
-                            .create(cronWorkflow, Utils.getNamespace(cronWorkflow.metadata.namespace))
+                            .create(cronWorkflow, Utils.getNamespaceWithDefault(cronWorkflow.metadata.namespace))
                             .then(onCreate)
                             .catch(setError);
                     }}>

ui/src/app/cron-workflows/components/cron-workflow-list/cron-workflow-list.tsx

@@ -89,7 +89,8 @@ export class CronWorkflowList extends BasePage<RouteComponentProps<any>, State>
     }
 
     private saveHistory() {
-        this.url = uiUrl('cron-workflows/' + this.state.namespace || '');
+        const newNamespace = Utils.managedNamespace ? '' : this.state.namespace;
+        this.url = uiUrl('cron-workflows' + (newNamespace ? '/' + newNamespace : ''));
         Utils.currentNamespace = this.state.namespace;
     }
 

ui/src/app/event-flow/components/event-flow-details/event-flow-page.tsx

@@ -23,6 +23,7 @@ import {ListWatch} from '../../../shared/list-watch';
 import {RetryObservable} from '../../../shared/retry-observable';
 import {services} from '../../../shared/services';
 import {useQueryParams} from '../../../shared/use-query-params';
+import {Utils} from '../../../shared/utils';
 import {EventsPanel} from '../../../workflows/components/events-panel';
 import {FullHeightLogsViewer} from '../../../workflows/components/workflow-logs-viewer/full-height-logs-viewer';
 import {buildGraph} from './build-graph';
@@ -37,7 +38,7 @@ export const EventFlowPage = ({history, location, match}: RouteComponentProps<an
     const queryParams = new URLSearchParams(location.search);
 
     // state for URL and query parameters
-    const [namespace, setNamespace] = useState(match.params.namespace || '');
+    const [namespace, setNamespace] = useState(Utils.getNamespace(match.params.namespace) || '');
     const [showFlow, setShowFlow] = useState(queryParams.get('showFlow') === 'true');
     const [showWorkflows, setShowWorkflows] = useState(queryParams.get('showWorkflows') !== 'false');
     const [expanded, setExpanded] = useState(queryParams.get('expanded') === 'true');
@@ -58,7 +59,7 @@ export const EventFlowPage = ({history, location, match}: RouteComponentProps<an
     useEffect(
         () =>
             history.push(
-                historyUrl('event-flow/{namespace}', {
+                historyUrl('event-flow' + (Utils.managedNamespace ? '' : '/{namespace}'), {
                     namespace,
                     showFlow,
                     showWorkflows,

ui/src/app/event-sources/components/event-source-creator.tsx

@@ -10,7 +10,7 @@ import {Utils} from '../../shared/utils';
 import {EventSourceEditor} from './event-source-editor';
 
 export const EventSourceCreator = ({onCreate, namespace}: {namespace: string; onCreate: (eventSource: EventSource) => void}) => {
-    const [eventSource, setEventSource] = useState<EventSource>(exampleEventSource(Utils.getNamespace(namespace)));
+    const [eventSource, setEventSource] = useState<EventSource>(exampleEventSource(Utils.getNamespaceWithDefault(namespace)));
     const [error, setError] = useState<Error>();
     return (
         <>
@@ -20,7 +20,7 @@ export const EventSourceCreator = ({onCreate, namespace}: {namespace: string; on
                     icon='plus'
                     onClick={() => {
                         services.eventSource
-                            .create(eventSource, Utils.getNamespace(eventSource.metadata.namespace))
+                            .create(eventSource, Utils.getNamespaceWithDefault(eventSource.metadata.namespace))
                             .then(onCreate)
                             .catch(setError);
                     }}>

ui/src/app/event-sources/components/event-source-list/event-source-list.tsx

@@ -19,6 +19,7 @@ import {Footnote} from '../../../shared/footnote';
 import {historyUrl} from '../../../shared/history';
 import {services} from '../../../shared/services';
 import {useQueryParams} from '../../../shared/use-query-params';
+import {Utils} from '../../../shared/utils';
 import {EventsPanel} from '../../../workflows/components/events-panel';
 import {EventSourceCreator} from '../event-source-creator';
 import {EventSourceLogsViewer} from '../event-source-log-viewer';
@@ -31,7 +32,7 @@ export const EventSourceList = ({match, location, history}: RouteComponentProps<
     const {navigation} = useContext(Context);
 
     // state for URL and query parameters
-    const [namespace, setNamespace] = useState(match.params.namespace || '');
+    const [namespace, setNamespace] = useState(Utils.getNamespace(match.params.namespace) || '');
     const [sidePanel, setSidePanel] = useState(queryParams.get('sidePanel') === 'true');
     const [selectedNode, setSelectedNode] = useState<Node>(queryParams.get('selectedNode'));
     const [tab, setTab] = useState<Node>(queryParams.get('tab'));
@@ -48,7 +49,7 @@ export const EventSourceList = ({match, location, history}: RouteComponentProps<
     useEffect(
         () =>
             history.push(
-                historyUrl('event-sources/{namespace}', {
+                historyUrl('event-sources' + (Utils.managedNamespace ? '' : '/{namespace}'), {
                     namespace,
                     sidePanel,
                     selectedNode,

ui/src/app/reports/components/reports.tsx

@@ -58,7 +58,7 @@ export class Reports extends BasePage<RouteComponentProps<any>, State> {
         super(props, context);
         this.state = {
             archivedWorkflows: !!this.queryParam('archivedWorkflows'),
-            namespace: this.props.match.params.namespace || '',
+            namespace: Utils.getNamespace(this.props.match.params.namespace) || '',
             labels: (this.queryParam('labels') || '').split(',').filter(v => v !== '')
         };
     }
@@ -119,9 +119,10 @@ export class Reports extends BasePage<RouteComponentProps<any>, State> {
     }
 
     private saveHistory() {
+        const newNamespace = Utils.managedNamespace ? '' : this.state.namespace;
         this.url = uiUrl(
-            'reports/' +
-                this.state.namespace +
+            'reports' +
+                (newNamespace ? '/' + newNamespace : '') +
                 '?labels=' +
                 this.state.labels.join(',') +
                 (this.state.archivedWorkflows ? '&archivedWorkflows=' + this.state.archivedWorkflows : '')

ui/src/app/sensors/components/sensor-creator.tsx

@@ -10,7 +10,7 @@ import {Utils} from '../../shared/utils';
 import {SensorEditor} from './sensor-editor';
 
 export const SensorCreator = ({namespace, onCreate}: {namespace: string; onCreate: (sensor: Sensor) => void}) => {
-    const [sensor, setSensor] = useState<Sensor>(exampleSensor(Utils.getNamespace(namespace)));
+    const [sensor, setSensor] = useState<Sensor>(exampleSensor(Utils.getNamespaceWithDefault(namespace)));
     const [error, setError] = useState<Error>();
     return (
         <>
@@ -20,7 +20,7 @@ export const SensorCreator = ({namespace, onCreate}: {namespace: string; onCreat
                     icon='plus'
                     onClick={() => {
                         services.sensor
-                            .create(sensor, Utils.getNamespace(sensor.metadata.namespace))
+                            .create(sensor, Utils.getNamespaceWithDefault(sensor.metadata.namespace))
                             .then(onCreate)
                             .catch(setError);
                     }}>

ui/src/app/sensors/components/sensor-list/sensor-list.tsx

@@ -18,6 +18,7 @@ import {Footnote} from '../../../shared/footnote';
 import {historyUrl} from '../../../shared/history';
 import {services} from '../../../shared/services';
 import {useQueryParams} from '../../../shared/use-query-params';
+import {Utils} from '../../../shared/utils';
 import {SensorCreator} from '../sensor-creator';
 import {SensorSidePanel} from '../sensor-side-panel';
 import {Utils as EventsUtils} from '../utils';
@@ -30,7 +31,7 @@ export const SensorList = ({match, location, history}: RouteComponentProps<any>)
     const {navigation} = useContext(Context);
 
     // state for URL and query parameters
-    const [namespace, setNamespace] = useState(match.params.namespace || '');
+    const [namespace, setNamespace] = useState(Utils.getNamespace(match.params.namespace) || '');
     const [sidePanel, setSidePanel] = useState(queryParams.get('sidePanel') === 'true');
     const [selectedNode, setSelectedNode] = useState<Node>(queryParams.get('selectedNode'));
 
@@ -45,7 +46,7 @@ export const SensorList = ({match, location, history}: RouteComponentProps<any>)
     useEffect(
         () =>
             history.push(
-                historyUrl('sensors/{namespace}', {
+                historyUrl('sensors' + (Utils.managedNamespace ? '' : '/{namespace}'), {
                     namespace,
                     sidePanel,
                     selectedNode

ui/src/app/shared/utils.ts

@@ -102,8 +102,13 @@ export const Utils = {
         return this.managedNamespace || localStorage.getItem(currentNamespaceKey);
     },
 
-    // return a namespace, never return null/undefined, defaults to "default"
+    // return a namespace, favoring managed namespace when set
     getNamespace(namespace: string) {
+        return this.managedNamespace || namespace;
+    },
+
+    // return a namespace, never return null/undefined, defaults to "default"
+    getNamespaceWithDefault(namespace: string) {
         return this.managedNamespace || namespace || this.currentNamespace || 'default';
     }
 };

ui/src/app/workflow-event-bindings/components/workflow-event-bindings/workflow-event-bindings.tsx

@@ -17,6 +17,7 @@ import {Footnote} from '../../../shared/footnote';
 import {historyUrl} from '../../../shared/history';
 import {services} from '../../../shared/services';
 import {useQueryParams} from '../../../shared/use-query-params';
+import {Utils} from '../../../shared/utils';
 import {ID} from './id';
 
 const introductionText = (
@@ -33,7 +34,7 @@ export const WorkflowEventBindings = ({match, location, history}: RouteComponent
     const queryParams = new URLSearchParams(location.search);
 
     // state for URL and query parameters
-    const [namespace, setNamespace] = useState(match.params.namespace || '');
+    const [namespace, setNamespace] = useState(Utils.getNamespace(match.params.namespace) || '');
     const [selectedWorkflowEventBinding, setSelectedWorkflowEventBinding] = useState(queryParams.get('selectedWorkflowEventBinding'));
 
     useEffect(
@@ -46,7 +47,7 @@ export const WorkflowEventBindings = ({match, location, history}: RouteComponent
     useEffect(
         () =>
             history.push(
-                historyUrl('workflow-event-bindings/{namespace}', {
+                historyUrl('workflow-event-bindings' + (Utils.managedNamespace ? '' : '/{namespace}'), {
                     namespace,
                     selectedWorkflowEventBinding
                 })

ui/src/app/workflow-templates/components/workflow-template-creator.tsx

@@ -11,7 +11,7 @@ import {Utils} from '../../shared/utils';
 import {WorkflowTemplateEditor} from './workflow-template-editor';
 
 export const WorkflowTemplateCreator = ({namespace, onCreate}: {namespace: string; onCreate: (workflow: WorkflowTemplate) => void}) => {
-    const [template, setTemplate] = useState<WorkflowTemplate>(exampleWorkflowTemplate(Utils.getNamespace(namespace)));
+    const [template, setTemplate] = useState<WorkflowTemplate>(exampleWorkflowTemplate(Utils.getNamespaceWithDefault(namespace)));
     const [error, setError] = useState<Error>();
     return (
         <>
@@ -21,7 +21,7 @@ export const WorkflowTemplateCreator = ({namespace, onCreate}: {namespace: strin
                     icon='plus'
                     onClick={() => {
                         services.workflowTemplate
-                            .create(template, Utils.getNamespace(template.metadata.namespace))
+                            .create(template, Utils.getNamespaceWithDefault(template.metadata.namespace))
                             .then(onCreate)
                             .catch(setError);
                     }}>

ui/src/app/workflow-templates/components/workflow-template-list/workflow-template-list.tsx

@@ -16,6 +16,7 @@ import {Footnote} from '../../../shared/footnote';
 import {historyUrl} from '../../../shared/history';
 import {services} from '../../../shared/services';
 import {useQueryParams} from '../../../shared/use-query-params';
+import {Utils} from '../../../shared/utils';
 import {WorkflowTemplateCreator} from '../workflow-template-creator';
 
 require('./workflow-template-list.scss');
@@ -28,7 +29,7 @@ export const WorkflowTemplateList = ({match, location, history}: RouteComponentP
     const {navigation} = useContext(Context);
 
     // state for URL and query parameters
-    const [namespace, setNamespace] = useState(match.params.namespace || '');
+    const [namespace, setNamespace] = useState(Utils.getNamespace(match.params.namespace) || '');
     const [sidePanel, setSidePanel] = useState(queryParams.get('sidePanel') === 'true');
 
     useEffect(
@@ -41,7 +42,7 @@ export const WorkflowTemplateList = ({match, location, history}: RouteComponentP
     useEffect(
         () =>
             history.push(
-                historyUrl('workflow-templates/{namespace}', {
+                historyUrl('workflow-templates' + (Utils.managedNamespace ? '' : '/{namespace}'), {
                     namespace,
                     sidePanel
                 })