rework catalogs/apps/tools nav menus

rancher/rancher#18847

app/components/page-header-project/template.hbs

@@ -1,23 +1,22 @@
 {{#hover-dropdown
-     horizontalPosition="left"
-     verticalPosition="below"
-     renderInPlace=true
-     onOpen=(action "onOpen")
-     onClose=(action "onClose")
-     as |dd|
+   horizontalPosition="left"
+   verticalPosition="below"
+   renderInPlace=true
+   onOpen=(action "onOpen")
+   onClose=(action "onClose")
+   as |dd|
 }}
 
   {{#dd.trigger
-       ariaLabel=(t 'nav.projectDropdown.label')
+     ariaLabel=(t "nav.projectDropdown.label")
   }}
 
-    <a class="{{if twoLine 'two-line'}} text-white">
+    <a class="{{if twoLine "two-line"}} text-white">
       {{#if (eq pageScope "project")}}
         <div class="clip">
           <span>{{project.cluster.displayName}}</span>
         </div>
         <div class="pl-15 clip text-muted">
-          <i class="{{project.icon}} project-icon icon-fw"></i>
           <span>{{project.displayName}}</span>
         </div>
       {{else if (eq pageScope "cluster")}}
@@ -26,17 +25,15 @@
         </div>
       {{else if (eq pageScope "global")}}
         <div class="clip">
-          <i class="icon icon-globe icon-fw"></i>
-          <span>{{t 'nav.admin.tab'}}</span>
+          <span>{{t "nav.admin.tab"}}</span>
         </div>
       {{else}}
         <div class="clip">
-          <i class="icon icon-question icon-fw"></i>
           <span>{{pageScope}}</span>
         </div>
       {{/if}}
 
-      <span class="sr-only">{{t 'nav.srToggleDropdown'}}</span>
+      <span class="sr-only">{{t "nav.srToggleDropdown"}}</span>
       <i class="icon icon-chevron-down chevron"></i>
 
     </a>
@@ -44,56 +41,68 @@
   {{/dd.trigger}}
 
   {{#dd.content
-       class="project-menu"
-       style=menuStyle
+     class="project-menu"
+     style=menuStyle
   }}
     <div class="global">
       <ul class="list-unstyled">
-        <li class="item clip {{if (eq pageScope 'global') 'active selected' 'inactive'}}">
-          <a href="{{href-to "global-admin"}}" class="{{if (eq pageScope "global") 'active selected' 'inactive'}}">
-            <i class="icon icon-globe icon-fw"></i>
-            {{t 'nav.admin.tab'}}
+        <li class="item clip {{if (eq pageScope "global") "active selected" "inactive"}}">
+          <a href="{{href-to "global-admin"}}" class="{{if (eq pageScope "global") "active selected" "inactive"}}">
+            {{t "nav.admin.tab"}}
           </a>
         </li>
       </ul>
     </div>
     <div class="search">
-      {{input type="text" placeholder=(t 'nav.projectDropdown.search') value=searchInput}}
+      {{input
+        type="text"
+        placeholder=(t "nav.projectDropdown.search")
+        value=searchInput
+      }}
     </div>
 
     <div class="clusters">
-      <label>{{t 'nav.projectDropdown.clusters'}}</label>
+      <label class="acc-label">
+        {{t "nav.projectDropdown.clusters"}}
+      </label>
 
       <ul class="list-unstyled" style="{{columnStyle}}">
         {{#if searchInput}}
           {{#each clusterSearchResults as |entry|}}
             <li data-cluster-id={{entry.cluster.id}} class="item clip cluster">
               {{#link-to
-                'authenticated.cluster'
-                entry.cluster.id
-                class="top"
+                 "authenticated.cluster"
+                 entry.cluster.id
+                 class="top"
               }}
                 {{entry.searchMatch}}
               {{/link-to}}
               <p class="state">{{entry.cluster.displayState}}</p>
             </li>
           {{else}}
-            <li class="text-muted p-10">{{t 'nav.projectDropdown.clustersNoMatch' searchInput=searchInput}}</li>
+            <li class="text-muted p-10">
+              {{t "nav.projectDropdown.clustersNoMatch" searchInput=searchInput}}
+            </li>
           {{/each}}
         {{else}}
           {{#each byCluster as |entry|}}
-            <li data-cluster-id={{entry.cluster.id}} class="item clip cluster {{if entry.active 'active' 'inactive'}} {{if (eq hoverEntry entry) 'hover'}}">
+            <li
+              data-cluster-id={{entry.cluster.id}}
+              class="item clip cluster {{if entry.active "active" "inactive"}} {{if (eq hoverEntry entry) "hover"}}"
+            >
               {{#link-to
-                'authenticated.cluster'
-                entry.cluster.id
-                class="top"
+                 "authenticated.cluster"
+                 entry.cluster.id
+                 class="top"
               }}
                 {{entry.cluster.displayName}}
               {{/link-to}}
               <p class="state">{{entry.cluster.displayState}}</p>
             </li>
           {{else}}
-            <li class="text-muted p-10">{{t 'nav.projectDropdown.clustersNoData'}}</li>
+            <li class="text-muted p-10">
+              {{t "nav.projectDropdown.clustersNoData"}}
+            </li>
           {{/each}}
         {{/if}}
       </ul>
@@ -101,39 +110,48 @@
 
     <div class="projects">
       {{#if (or searchInput (not clusterEntry)) }}
-        <label>{{t 'nav.projectDropdown.projects'}}</label>
+        <label class="acc-label">
+          {{t "nav.projectDropdown.projects"}}
+        </label>
       {{else}}
-        <label>{{t 'nav.projectDropdown.projectsIn' cluster=clusterEntry.cluster.displayName}}</label>
+        <label class="acc-label">
+          {{t "nav.projectDropdown.projectsIn" cluster=clusterEntry.cluster.displayName}}
+        </label>
       {{/if}}
 
       <ul class="list-unstyled" style="{{columnStyle}}">
         {{#if searchInput}}
           {{#each projectSearchResults as |entry|}}
-            <li class="item clip project {{unless entry.project.isReady 'not-ready'}}">
+            <li class="item clip project {{unless entry.project.isReady "not-ready"}}">
               {{#link-to
-                'authenticated.project'
-                entry.project.id
-                class="top"
+                 "authenticated.project"
+                 entry.project.id
+                 class="top"
               }}
                 {{entry.searchMatch}}
               {{/link-to}}
               <p class="state">
-                {{t 'nav.projectDropdown.projectInCluster' cluster=entry.cluster.displayName}}
+                {{t "nav.projectDropdown.projectInCluster" cluster=entry.cluster.displayName}}
                 {{~#unless entry.project.isReady~}}
-                  , {{t 'nav.projectDropdown.projectNotReady'}}
+                , {{t "nav.projectDropdown.projectNotReady"}}
                 {{/unless}}
               </p>
             </li>
           {{else}}
-            <li class="text-muted p-10">{{t 'nav.projectDropdown.projectsNoMatch' searchInput=searchInput}}</li>
+            <li class="text-muted p-10">
+              {{t "nav.projectDropdown.projectsNoMatch" searchInput=searchInput}}
+            </li>
           {{/each}}
         {{else if clusterEntry}}
           {{#each clusterEntry.projects as |project|}}
-            <li data-project-id={{project.id}} class="item clip project {{unless project.isReady 'not-ready'}} {{if project.active 'active' 'inactive'}}">
+            <li
+              data-project-id={{project.id}}
+              class="item clip project {{unless project.isReady "not-ready"}} {{if project.active "active" "inactive"}}"
+            >
               {{#link-to
-                'authenticated.project'
-                project.id
-                class="top"
+                 "authenticated.project"
+                 project.id
+                 class="top"
               }}
                 {{project.displayName}}
               {{/link-to}}
@@ -141,15 +159,19 @@
                 {{#if project.isReady}}
                   {{project.displayState}}
                 {{else}}
-                  {{t 'nav.projectDropdown.projectNotReady'}}
+                  {{t "nav.projectDropdown.projectNotReady"}}
                 {{/if}}
               </p>
             </li>
-          {{else}}
-            <li class="text-muted p-10">{{t 'nav.projectDropdown.projectNoData'}}</li>
+        {{else}}
+            <li class="text-muted p-10">
+              {{t "nav.projectDropdown.projectNoData"}}
+            </li>
           {{/each}}
         {{else}}
-          <li class="text-muted p-10">{{t 'nav.projectDropdown.projectsNoData'}}</li>
+          <li class="text-muted p-10">
+            {{t "nav.projectDropdown.projectsNoData"}}
+          </li>
         {{/if}}
       </ul>
     </div>

app/components/page-header/template.hbs

@@ -147,32 +147,28 @@
       <li>
         {{#link-to "authenticated.apikeys"}}
           <span>{{t "nav.api.link"}}</span>
-          <i class="icon icon-key icon-fw"/>{{/link-to}}
+        {{/link-to}}
       </li>
       <li>
         {{#link-to "global-admin.security.cloud-credentials"}}
           <span>{{t "nav.admin.security.cloudCredentials"}}</span>
-          <i class="icon icon-secrets icon-fw"/>
         {{/link-to}}
       </li>
       <li>
         {{#link-to "nodes.node-templates"}}
           <span>{{t "nav.nodeTemplates.link"}}</span>
-          <i class="icon icon-host icon-fw"/>
         {{/link-to}}
       </li>
       <li role="separator" class="divider"></li>
       <li>
         {{#link-to "authenticated.prefs"}}
           <span>{{t "nav.userPreferences.link"}}</span>
-          <i class="icon icon-gear icon-fw"/>
         {{/link-to}}
       </li>
       <li role="separator" class="divider"></li>
       <li>
         {{#link-to "logout" class="user-logout"}}
           <span>{{t "nav.user.logout"}}</span>
-          <i class="icon icon-logout icon-fw"/>
         {{/link-to}}
       </li>
     {{/dd.content}}

app/instance-initializers/nav.js

@@ -40,7 +40,6 @@ const rootNav = [
       {
         id:             'infra-certificates',
         localizedLabel: 'nav.infra.certificates',
-        icon:           'icon icon-certificate',
         route:          'authenticated.project.certificates',
         ctx:            [getProjectId],
         resource:       ['certificate'],
@@ -49,7 +48,6 @@ const rootNav = [
       {
         id:             'infra-config-maps',
         localizedLabel: 'nav.infra.configMaps',
-        icon:           'icon icon-file',
         route:          'authenticated.project.config-maps',
         ctx:            [getProjectId],
         resource:       ['configmap'],
@@ -58,7 +56,6 @@ const rootNav = [
       {
         id:             'infra-registries',
         localizedLabel: 'nav.infra.registries',
-        icon:           'icon icon-database',
         route:          'authenticated.project.registries',
         ctx:            [getProjectId],
         resource:       ['dockercredential'],
@@ -67,7 +64,6 @@ const rootNav = [
       {
         id:             'infra-secrets',
         localizedLabel: 'nav.infra.secrets',
-        icon:           'icon icon-secrets',
         route:          'authenticated.project.secrets',
         ctx:            [getProjectId],
         resource:       ['namespacedsecret', 'secret'],
@@ -88,7 +84,6 @@ const rootNav = [
     scope:          'project',
     id:             'project-security-roles',
     localizedLabel: 'nav.infra.members',
-    icon:           'icon icon-users',
     route:          'authenticated.project.security.members',
     resource:       ['projectroletemplatebinding'],
     resourceScope:  'global',
@@ -111,6 +106,14 @@ const rootNav = [
         ctx:            [getProjectId],
         resourceScope:  'global',
       },
+      {
+        id:             'manage-catalogs',
+        localizedLabel: 'nav.tools.catalogs',
+        route:          'authenticated.project.project-catalogs',
+        ctx:            [getProjectId],
+        resource:       ['catalog', 'project-catalog'],
+        resourceScope:  'global',
+      },
       {
         id:             'tools-logging',
         localizedLabel: 'nav.tools.logging',
@@ -194,20 +197,10 @@ const rootNav = [
     resource:       ['project'],
     resourceScope:  'global',
   },
-  {
-    scope:          'cluster',
-    id:             'cluster-catalogs',
-    localizedLabel: 'nav.admin.catalogs',
-    route:          'authenticated.cluster.cluster-catalogs',
-    ctx:            [getClusterId],
-    resource:       ['catalog', 'cluster-catalog'],
-    resourceScope:  'global',
-  },
   {
     scope:          'cluster',
     id:             'cluster-security-roles',
     localizedLabel: 'nav.cluster.members',
-    icon:           'icon icon-users',
     route:          'authenticated.cluster.security.members.index',
     resource:       ['clusterroletemplatebinding'],
     resourceScope:  'global',
@@ -225,7 +218,6 @@ const rootNav = [
       {
         id:             'cluster-tools-alert',
         localizedLabel: 'nav.tools.alerts',
-        // icon: 'icon icon-key',
         route:          'authenticated.cluster.alert',
         resourceScope:  'global',
         resource:       [],
@@ -242,6 +234,15 @@ const rootNav = [
           return get(this, 'cluster.rancherKubernetesEngineConfig')
         }
       },
+      {
+        scope:          'cluster',
+        id:             'cluster-catalogs',
+        localizedLabel: 'nav.admin.catalogs',
+        route:          'authenticated.cluster.cluster-catalogs',
+        ctx:            [getClusterId],
+        resource:       ['catalog', 'cluster-catalog'],
+        resourceScope:  'global',
+      },
       {
         id:             'cluster-tools-notifiers',
         localizedLabel: 'nav.tools.notifiers',
@@ -280,18 +281,10 @@ const rootNav = [
   },
   {
     scope:          'global',
-    id:             'nodes-node-drivers',
-    localizedLabel: 'nav.admin.drivers',
-    route:          'nodes.custom-drivers',
-    resource:       ['nodedriver', 'kontainerdriver'],
-    resourceScope:  'global',
-  },
-  {
-    scope:          'global',
-    id:             'global-catalogs',
-    localizedLabel: 'nav.admin.catalogs',
-    route:          'global-admin.catalog',
-    resource:       ['catalog'],
+    id:             'multi-cluster-apps',
+    localizedLabel: 'nav.admin.multiClusterApps',
+    route:          'global-admin.multi-cluster-apps',
+    resource:       ['multiclusterapp'],
     resourceScope:  'global',
   },
   {
@@ -318,7 +311,6 @@ const rootNav = [
       {
         id:             'global-security-roles',
         localizedLabel: 'nav.admin.security.roles',
-        icon:           'icon icon-users',
         route:          'global-admin.security.roles',
         resource:       ['roletemplate'],
         resourceScope:  'global',
@@ -326,7 +318,6 @@ const rootNav = [
       {
         id:             'global-security-roles',
         localizedLabel: 'nav.admin.security.podSecurityPolicies',
-        icon:           'icon icon-files',
         route:          'global-admin.security.policies',
         resource:       ['podsecuritypolicytemplate'],
         resourceScope:  'global',
@@ -334,7 +325,6 @@ const rootNav = [
       {
         id:             'global-security-authentication',
         localizedLabel: 'nav.admin.security.authentication',
-        icon:           'icon icon-users',
         route:          'global-admin.security.authentication',
         condition() {
           const authConfigs = this.get('globalStore').all('authConfig');
@@ -349,11 +339,26 @@ const rootNav = [
     id:             'global-tools',
     localizedLabel: 'nav.tools.tab',
     submenu:        [
+      {
+        scope:          'global',
+        id:             'global-catalogs',
+        localizedLabel: 'nav.admin.catalogs',
+        route:          'global-admin.catalog',
+        resource:       ['catalog'],
+        resourceScope:  'global',
+      },
+      {
+        scope:          'global',
+        id:             'nodes-node-drivers',
+        localizedLabel: 'nav.admin.drivers',
+        route:          'nodes.custom-drivers',
+        resource:       ['nodedriver', 'kontainerdriver'],
+        resourceScope:  'global',
+      },
       {
         id:             'global-dns-entries',
         localizedLabel: 'nav.admin.globalDnsEntries',
         route:          'global-admin.global-dns.entries',
-        icon:           'icon icon-network',
         resource:       ['globaldns'],
         resourceScope:  'global',
       },
@@ -361,19 +366,9 @@ const rootNav = [
         id:             'global-dns-providers',
         localizedLabel: 'nav.admin.globalDnsProviders',
         route:          'global-admin.global-dns.providers',
-        icon:           'icon icon-globe',
         resource:       ['globaldnsprovider'],
         resourceScope:  'global',
       },
-      {
-        scope:          'global',
-        id:             'multi-cluster-apps',
-        localizedLabel: 'nav.admin.multiClusterApps',
-        route:          'global-admin.multi-cluster-apps',
-        icon:           'icon icon-catalog',
-        resource:       ['multiclusterapp'],
-        resourceScope:  'global',
-      },
     ],
   },
 //  {

translations/en-us.yaml

@@ -7011,8 +7011,8 @@ nav:
     library: Library
     community: Community
   apps:
-    tab: Catalog Apps
-    apps: Catalog Apps
+    tab: Apps
+    apps: Apps
     launch: Launch
     manage: Manage Catalogs
   infra:
@@ -7033,7 +7033,7 @@ nav:
     globalDns: Global DNS
     globalDnsEntries: Global DNS Entries
     globalDnsProviders: Global DNS Providers
-    multiClusterApps: Multi-Cluster Apps
+    multiClusterApps: Apps
     security:
       cloudCredentials: Cloud Credentials
       tab: Security
@@ -7061,6 +7061,7 @@ nav:
   tools:
     alerts: Alerts
     backups: Snapshots
+    catalogs: Catalogs
     logging: Logging
     monitoring: Monitoring
     notifiers: Notifiers