fix: hide app namespace on the ui (argoproj#11111) (argoproj#11247)

* fix: hide app namespace when irrelevant (argoproj#11111) Signed-off-by: Michael Crenshaw <350466+crenshaw-dev@users.noreply.github.com> * wire up setting Signed-off-by: Michael Crenshaw <350466+crenshaw-dev@users.noreply.github.com> * fix: hide app namespace Signed-off-by: ashutosh16 <11219262+ashutosh16@users.noreply.github.com> * fix: hide app namespace Signed-off-by: ashutosh16 <11219262+ashutosh16@users.noreply.github.com> * add null check Signed-off-by: ashutosh16 <11219262+ashutosh16@users.noreply.github.com> * Update ui/src/app/applications/components/utils.tsx Co-authored-by: Blake Pettersson <blake.pettersson@gmail.com> Signed-off-by: asingh <11219262+ashutosh16@users.noreply.github.com> * lint Signed-off-by: ashutosh16 <11219262+ashutosh16@users.noreply.github.com> * fix name generation Signed-off-by: Michael Crenshaw <350466+crenshaw-dev@users.noreply.github.com> Signed-off-by: Michael Crenshaw <350466+crenshaw-dev@users.noreply.github.com> Signed-off-by: ashutosh16 <11219262+ashutosh16@users.noreply.github.com> Signed-off-by: asingh <11219262+ashutosh16@users.noreply.github.com> Co-authored-by: Michael Crenshaw <350466+crenshaw-dev@users.noreply.github.com> Co-authored-by: Blake Pettersson <blake.pettersson@gmail.com>
ashutosh16 · Nov 23, 2022 · 35c1464 · 35c1464
1 parent 44b1267
commit 35c1464
Show file tree

Hide file tree

Showing 12 changed files with 223 additions and 153 deletions.
diff --git a/assets/swagger.json b/assets/swagger.json
@@ -4097,6 +4097,9 @@
         "appLabelKey": {
           "type": "string"
         },
+        "appsInAnyNamespaceEnabled": {
+          "type": "boolean"
+        },
         "configManagementPlugins": {
           "type": "array",
           "items": {

diff --git a/pkg/apiclient/settings/settings.pb.go b/pkg/apiclient/settings/settings.pb.go
diff --git a/server/server.go b/server/server.go
@@ -2,6 +2,7 @@ package server
 
 import (
 	"context"
+	netCtx "context"
 	"crypto/tls"
 	"fmt"
 	goio "io"
@@ -24,8 +25,6 @@ import (
 	// nolint:staticcheck
 	golang_proto "github.com/golang/protobuf/proto"
 
-	netCtx "context"
-
 	"github.com/argoproj/notifications-engine/pkg/api"
 	"github.com/argoproj/pkg/sync"
 	"github.com/go-redis/redis/v8"
@@ -61,6 +60,8 @@ import (
 	accountpkg "github.com/argoproj/argo-cd/v2/pkg/apiclient/account"
 	applicationpkg "github.com/argoproj/argo-cd/v2/pkg/apiclient/application"
 
+	"github.com/pkg/errors"
+
 	applicationsetpkg "github.com/argoproj/argo-cd/v2/pkg/apiclient/applicationset"
 	certificatepkg "github.com/argoproj/argo-cd/v2/pkg/apiclient/certificate"
 	clusterpkg "github.com/argoproj/argo-cd/v2/pkg/apiclient/cluster"
@@ -121,7 +122,6 @@ import (
 	"github.com/argoproj/argo-cd/v2/util/swagger"
 	tlsutil "github.com/argoproj/argo-cd/v2/util/tls"
 	"github.com/argoproj/argo-cd/v2/util/webhook"
-	"github.com/pkg/errors"
 )
 
 const maxConcurrentLoginRequestsCountEnv = "ARGOCD_MAX_CONCURRENT_LOGIN_REQUESTS_COUNT"
@@ -733,7 +733,8 @@ func (a *ArgoCDServer) newGRPCServer() (*grpc.Server, application.AppResourceTre
 
 	applicationSetService := applicationset.NewServer(a.db, a.KubeClientset, a.enf, a.Cache, a.AppClientset, a.appLister, a.appsetInformer, a.appsetLister, a.projLister, a.settingsMgr, a.Namespace, projectLock)
 	projectService := project.NewServer(a.Namespace, a.KubeClientset, a.AppClientset, a.enf, projectLock, a.sessionMgr, a.policyEnforcer, a.projInformer, a.settingsMgr, a.db)
-	settingsService := settings.NewServer(a.settingsMgr, a, a.DisableAuth)
+	appsInAnyNamespaceEnabled := len(a.ArgoCDServerOpts.ApplicationNamespaces) > 0
+	settingsService := settings.NewServer(a.settingsMgr, a, a.DisableAuth, appsInAnyNamespaceEnabled)
 	accountService := account.NewServer(a.sessionMgr, a.settingsMgr, a.enf)
 
 	notificationService := notification.NewServer(a.apiFactory)

diff --git a/server/settings/settings.go b/server/settings/settings.go
@@ -2,6 +2,7 @@ package settings
 
 import (
 	"context"
+
 	"github.com/ghodss/yaml"
 
 	sessionmgr "github.com/argoproj/argo-cd/v2/util/session"
@@ -13,18 +14,19 @@ import (
 
 // Server provides a Settings service
 type Server struct {
-	mgr           *settings.SettingsManager
-	authenticator Authenticator
-	disableAuth   bool
+	mgr                       *settings.SettingsManager
+	authenticator             Authenticator
+	disableAuth               bool
+	appsInAnyNamespaceEnabled bool
 }
 
 type Authenticator interface {
 	Authenticate(ctx context.Context) (context.Context, error)
 }
 
 // NewServer returns a new instance of the Settings service
-func NewServer(mgr *settings.SettingsManager, authenticator Authenticator, disableAuth bool) *Server {
-	return &Server{mgr: mgr, authenticator: authenticator, disableAuth: disableAuth}
+func NewServer(mgr *settings.SettingsManager, authenticator Authenticator, disableAuth, appsInAnyNamespaceEnabled bool) *Server {
+	return &Server{mgr: mgr, authenticator: authenticator, disableAuth: disableAuth, appsInAnyNamespaceEnabled: appsInAnyNamespaceEnabled}
 }
 
 // Get returns Argo CD settings
@@ -102,13 +104,14 @@ func (s *Server) Get(ctx context.Context, q *settingspkg.SettingsQuery) (*settin
 			ChatText:   help.ChatText,
 			BinaryUrls: help.BinaryURLs,
 		},
-		Plugins:            plugins,
-		UserLoginsDisabled: userLoginsDisabled,
-		KustomizeVersions:  kustomizeVersions,
-		UiCssURL:           argoCDSettings.UiCssURL,
-		PasswordPattern:    argoCDSettings.PasswordPattern,
-		TrackingMethod:     trackingMethod,
-		ExecEnabled:        argoCDSettings.ExecEnabled,
+		Plugins:                   plugins,
+		UserLoginsDisabled:        userLoginsDisabled,
+		KustomizeVersions:         kustomizeVersions,
+		UiCssURL:                  argoCDSettings.UiCssURL,
+		PasswordPattern:           argoCDSettings.PasswordPattern,
+		TrackingMethod:            trackingMethod,
+		ExecEnabled:               argoCDSettings.ExecEnabled,
+		AppsInAnyNamespaceEnabled: s.appsInAnyNamespaceEnabled,
 	}
 
 	if sessionmgr.LoggedIn(ctx) || s.disableAuth {

diff --git a/server/settings/settings.proto b/server/settings/settings.proto
@@ -40,6 +40,7 @@ message Settings {
     string statusBadgeRootUrl = 21;
     bool execEnabled = 22;
     string controllerNamespace = 23;
+    bool appsInAnyNamespaceEnabled = 24;
 }
 
 message GoogleAnalyticsConfig {

diff --git a/ui/src/app/app.tsx b/ui/src/app/app.tsx
@@ -10,12 +10,13 @@ import login from './login';
 import settings from './settings';
 import {Layout} from './shared/components/layout/layout';
 import {VersionPanel} from './shared/components/version-info/version-info-panel';
-import {Provider} from './shared/context';
+import {AuthSettingsCtx, Provider} from './shared/context';
 import {services} from './shared/services';
 import requests from './shared/services/requests';
 import {hashCode} from './shared/utils';
 import {Banner} from './ui-banner/ui-banner';
 import userInfo from './user-info';
+import {AuthSettings} from './shared/models';
 
 services.viewPreferences.init();
 const bases = document.getElementsByTagName('base');
@@ -71,8 +72,8 @@ const versionLoader = services.version.version();
 async function isExpiredSSO() {
     try {
         const {iss} = await services.users.get();
+        const authSettings = React.useContext(AuthSettingsCtx);
         if (iss && iss !== 'argocd') {
-            const authSettings = await services.authService.settings();
             return ((authSettings.dexConfig && authSettings.dexConfig.connectors) || []).length > 0 || authSettings.oidcConfig;
         }
     } catch {
@@ -106,7 +107,10 @@ requests.onError.subscribe(async err => {
     }
 });
 
-export class App extends React.Component<{}, {popupProps: PopupProps; showVersionPanel: boolean; error: Error; navItems: NavItem[]; routes: Routes; extensionsLoaded: boolean}> {
+export class App extends React.Component<
+    {},
+    {popupProps: PopupProps; showVersionPanel: boolean; error: Error; navItems: NavItem[]; routes: Routes; extensionsLoaded: boolean; authSettings: AuthSettings}
+> {
     public static childContextTypes = {
         history: PropTypes.object,
         apis: PropTypes.object
@@ -124,7 +128,7 @@ export class App extends React.Component<{}, {popupProps: PopupProps; showVersio
 
     constructor(props: {}) {
         super(props);
-        this.state = {popupProps: null, error: null, showVersionPanel: false, navItems: [], routes: null, extensionsLoaded: false};
+        this.state = {popupProps: null, error: null, showVersionPanel: false, navItems: [], routes: null, extensionsLoaded: false, authSettings: null};
         this.popupManager = new PopupManager();
         this.notificationsManager = new NotificationsManager();
         this.navigationManager = new NavigationManager(history);
@@ -181,7 +185,7 @@ export class App extends React.Component<{}, {popupProps: PopupProps; showVersio
             };
         }
 
-        this.setState({...this.state, navItems: extendedNavItems, routes: extendedRoutes, extensionsLoaded: true});
+        this.setState({...this.state, navItems: extendedNavItems, routes: extendedRoutes, extensionsLoaded: true, authSettings});
     }
 
     public render() {
@@ -211,42 +215,44 @@ export class App extends React.Component<{}, {popupProps: PopupProps; showVersio
                 <PageContext.Provider value={{title: 'Argo CD'}}>
                     <Provider value={{history, popup: this.popupManager, notifications: this.notificationsManager, navigation: this.navigationManager, baseHref: base}}>
                         {this.state.popupProps && <Popup {...this.state.popupProps} />}
-                        <Router history={history}>
-                            <Switch>
-                                <Redirect exact={true} path='/' to='/applications' />
-                                {Object.keys(this.routes).map(path => {
-                                    const route = this.routes[path];
-                                    return (
-                                        <Route
-                                            key={path}
-                                            path={path}
-                                            render={routeProps =>
-                                                route.noLayout ? (
-                                                    <div>
-                                                        <route.component {...routeProps} />
-                                                    </div>
-                                                ) : (
-                                                    <DataLoader load={() => services.viewPreferences.getPreferences()}>
-                                                        {pref => (
-                                                            <Layout
-                                                                onVersionClick={() => this.setState({showVersionPanel: true})}
-                                                                navItems={this.navItems}
-                                                                pref={pref}
-                                                                isExtension={route.extension}>
-                                                                <Banner>
-                                                                    <route.component {...routeProps} />
-                                                                </Banner>
-                                                            </Layout>
-                                                        )}
-                                                    </DataLoader>
-                                                )
-                                            }
-                                        />
-                                    );
-                                })}
-                                {this.state.extensionsLoaded && <Redirect path='*' to='/' />}
-                            </Switch>
-                        </Router>
+                        <AuthSettingsCtx.Provider value={this.state.authSettings}>
+                            <Router history={history}>
+                                <Switch>
+                                    <Redirect exact={true} path='/' to='/applications' />
+                                    {Object.keys(this.routes).map(path => {
+                                        const route = this.routes[path];
+                                        return (
+                                            <Route
+                                                key={path}
+                                                path={path}
+                                                render={routeProps =>
+                                                    route.noLayout ? (
+                                                        <div>
+                                                            <route.component {...routeProps} />
+                                                        </div>
+                                                    ) : (
+                                                        <DataLoader load={() => services.viewPreferences.getPreferences()}>
+                                                            {pref => (
+                                                                <Layout
+                                                                    onVersionClick={() => this.setState({showVersionPanel: true})}
+                                                                    navItems={this.navItems}
+                                                                    pref={pref}
+                                                                    isExtension={route.extension}>
+                                                                    <Banner>
+                                                                        <route.component {...routeProps} />
+                                                                    </Banner>
+                                                                </Layout>
+                                                            )}
+                                                        </DataLoader>
+                                                    )
+                                                }
+                                            />
+                                        );
+                                    })}
+                                    {this.state.extensionsLoaded && <Redirect path='*' to='/' />}
+                                </Switch>
+                            </Router>
+                        </AuthSettingsCtx.Provider>
                     </Provider>
                 </PageContext.Provider>
                 <Notifications notifications={this.notificationsManager.notifications} />

diff --git a/ui/src/app/applications/components/applications-list/applications-tiles.tsx b/ui/src/app/applications/components/applications-list/applications-tiles.tsx
@@ -3,7 +3,7 @@ import * as classNames from 'classnames';
 import * as React from 'react';
 import {Key, KeybindingContext, NumKey, NumKeyToNumber, NumPadKey, useNav} from 'argo-ui/v2';
 import {Cluster} from '../../../shared/components';
-import {Consumer, Context} from '../../../shared/context';
+import {Consumer, Context, AuthSettingsCtx} from '../../../shared/context';
 import * as models from '../../../shared/models';
 import {ApplicationURLs} from '../application-urls';
 import * as AppUtils from '../utils';
@@ -53,6 +53,7 @@ export const ApplicationTiles = ({applications, syncApplication, refreshApplicat
     const appRef = {ref: React.useRef(null), set: false};
     const appContainerRef = React.useRef(null);
     const appsPerRow = useItemsPerContainer(appRef.ref, appContainerRef);
+    const authSettingsCtx = React.useContext(AuthSettingsCtx);
 
     const {useKeybinding} = React.useContext(KeybindingContext);
 
@@ -97,7 +98,6 @@ export const ApplicationTiles = ({applications, syncApplication, refreshApplicat
             return navApp(NumKeyToNumber(n));
         }
     });
-
     return (
         <Consumer>
             {ctx => (
@@ -130,7 +130,9 @@ export const ApplicationTiles = ({applications, syncApplication, refreshApplicat
                                                             }>
                                                             <i className={'icon argo-icon-' + (app.spec.source.chart != null ? 'helm' : 'git')} />
                                                             <Tooltip content={AppUtils.appInstanceName(app)}>
-                                                                <span className='applications-list__title'>{AppUtils.appQualifiedName(app)}</span>
+                                                                <span className='applications-list__title'>
+                                                                    {AppUtils.appQualifiedName(app, authSettingsCtx?.appsInAnyNamespaceEnabled)}
+                                                                </span>
                                                             </Tooltip>
                                                         </div>
                                                         <div

diff --git a/ui/src/app/applications/components/utils.tsx b/ui/src/app/applications/components/utils.tsx
@@ -1150,8 +1150,8 @@ export const urlPattern = new RegExp(
     )
 );
 
-export function appQualifiedName(app: appModels.Application): string {
-    return app.metadata.namespace + '/' + app.metadata.name;
+export function appQualifiedName(app: appModels.Application, nsEnabled: boolean): string {
+    return (nsEnabled ? app.metadata.namespace + '/' : '') + app.metadata.name;
 }
 
 export function appInstanceName(app: appModels.Application): string {

diff --git a/ui/src/app/shared/components/application-selector/application-selector.tsx b/ui/src/app/shared/components/application-selector/application-selector.tsx
@@ -3,8 +3,10 @@ import {FormFunctionProps} from 'react-form';
 import {CheckboxField} from '..';
 import * as models from '../../models';
 import {appInstanceName, appQualifiedName, ComparisonStatusIcon, HealthStatusIcon, OperationPhaseIcon} from '../../../applications/components/utils';
+import {AuthSettingsCtx} from '../../context';
 
 export const ApplicationSelector = ({apps, formApi}: {apps: models.Application[]; formApi: FormFunctionProps}) => {
+    const authSettingsCtx = React.useContext(AuthSettingsCtx);
     return (
         <>
             <label>
@@ -18,7 +20,9 @@ export const ApplicationSelector = ({apps, formApi}: {apps: models.Application[]
                     <label key={appInstanceName(app)} style={{marginTop: '0.5em', cursor: 'pointer'}}>
                         <CheckboxField field={`app/${i}`} />
                         &nbsp;
-                        {app.isAppOfAppsPattern ? `(App of Apps) ${appQualifiedName(app)}` : appQualifiedName(app)}
+                        {app.isAppOfAppsPattern
+                            ? `(App of Apps) ${appQualifiedName(app, authSettingsCtx?.appsInAnyNamespaceEnabled)}`
+                            : appQualifiedName(app, authSettingsCtx?.appsInAnyNamespaceEnabled)}
                         &nbsp;
                         <ComparisonStatusIcon status={app.status.sync.status} />
                         &nbsp;

diff --git a/ui/src/app/shared/context.ts b/ui/src/app/shared/context.ts
@@ -1,6 +1,7 @@
 import {AppContext as ArgoAppContext, NavigationApi, NotificationsApi, PopupApi} from 'argo-ui';
 import {History} from 'history';
 import * as React from 'react';
+import * as models from './models';
 
 export type AppContext = ArgoAppContext & {apis: {popup: PopupApi; notifications: NotificationsApi; navigation: NavigationApi; baseHref: string}};
 
@@ -11,4 +12,6 @@ export interface ContextApis {
     baseHref: string;
 }
 export const Context = React.createContext<ContextApis & {history: History}>(null);
-export const {Provider, Consumer} = Context;
+export let {Provider, Consumer} = Context;
+
+export const AuthSettingsCtx = React.createContext<models.AuthSettings>(null);
diff --git a/ui/src/app/shared/models.ts b/ui/src/app/shared/models.ts
@@ -456,6 +456,7 @@ export interface AuthSettings {
     uiBannerPermanent: boolean;
     uiBannerPosition: string;
     execEnabled: boolean;
+    appsInAnyNamespaceEnabled: boolean;
 }
 
 export interface UserInfo {

diff --git a/util/settings/settings.go b/util/settings/settings.go
@@ -108,6 +108,8 @@ type ArgoCDSettings struct {
 	// token verification to pass despite the OIDC provider having an invalid certificate. Only set to `true` if you
 	// understand the risks.
 	OIDCTLSInsecureSkipVerify bool `json:"oidcTLSInsecureSkipVerify"`
+	// AppsInAnyNamespaceEnabled indicates whether applications are allowed to be created in any namespace
+	AppsInAnyNamespaceEnabled bool `json:"appsInAnyNamespaceEnabled"`
 }
 
 type GoogleAnalytics struct {