update mc app rbac to allow only 2 roles and def to project-member

rancher/rancher#18326

lib/global-admin/addon/components/new-multi-cluster-app/component.js

@@ -35,26 +35,6 @@ const OVERRIDE_HEADERS = [
   },
 ];
 
-const ROLES_HEADERS = [
-  {
-    translationKey: 'newMultiClusterApp.roles.table.name',
-    name:           'name',
-    sort:           ['name'],
-  },
-  {
-    translationKey: 'newMultiClusterApp.roles.table.builtIn',
-    name:           'builtIn',
-    sort:           ['builtIn'],
-  },
-  {
-    translationKey: 'newMultiClusterApp.roles.table.external',
-    name:           'external',
-    sort:           ['external'],
-  },
-]
-
-
-
 export default Component.extend(NewOrEdit, CatalogApp, {
   catalog:                   service(),
   intl:                      service(),
@@ -62,7 +42,6 @@ export default Component.extend(NewOrEdit, CatalogApp, {
   router:                    service(),
   settings:                  service(),
   globalStore:               service(),
-  roleTemplateService:       service('roleTemplate'),
 
   layout,
   allTemplates:              null,
@@ -106,7 +85,6 @@ export default Component.extend(NewOrEdit, CatalogApp, {
   projectsToRemoveOnUpgrade: null,
 
   overridesHeaders:          OVERRIDE_HEADERS,
-  rolesHeaders:              ROLES_HEADERS,
 
   isGKE:                     alias('scope.currentCluster.isGKE'),
 
@@ -185,25 +163,28 @@ export default Component.extend(NewOrEdit, CatalogApp, {
       get(this, 'multiClusterApp.targets').removeObject(target);
     },
 
-    addRole(roleTemplate) {
+    addRole(roleId, roleToRemove) {
-      if (roleTemplate) {
+      let { roles } = this.multiClusterApp;
-        let { roles } = this.multiClusterApp;
 
-        if (!roles) {
+      if (!roles) {
-          roles = [];
+        roles = [];
-        }
+      }
 
-        roles.pushObject(get(roleTemplate, 'id'));
+      if (roles.indexOf(roleToRemove) > -1) {
+        roles.removeObject(roleToRemove);
+      }
+
+      if (roleId !== '') {
+        roles.pushObject(roleId);
 
         set(this, 'multiClusterApp.roles', roles);
-      }
+      } else {
-    },
+        // its possible that the user set extra roles via the api, we shouldn't clobber those roles as well.
-
+        if (roles.length > 1) {
-    removeRole(roleTemplate) {
+          set(this, 'multiClusterApp.roles', roles);
-      if (roleTemplate) {
+        } else {
-        let { roles } = this.multiClusterApp;
+          set(this, 'multiClusterApp.roles', null);
-
+        }
-        roles.removeObject(get(roleTemplate, 'id'));
       }
     },
 
@@ -365,24 +346,6 @@ export default Component.extend(NewOrEdit, CatalogApp, {
     }
   }),
 
-  roleChoices: computed('roleTemplateService.allFilteredRoleTemplates.@each.{name,id,locked,hidden}', function() {
-    return this.roleTemplateService.get('allFilteredRoleTemplates').sortBy('name')
-  }),
-
-  appRoles: computed('multiClusterApp.roles.[]', function() {
-    let { multiClusterApp } = this;
-    let { allFilteredRoleTemplates } = this.roleTemplateService;
-    let out = [];
-
-    if (multiClusterApp && allFilteredRoleTemplates) {
-      out = ( multiClusterApp.roles || [] ).map((role) => {
-        return allFilteredRoleTemplates.findBy('id', role);
-      });
-    }
-
-    return out;
-  }),
-
   templateOrHelmChartQuestions: computed('selectedTemplateModel', function() {
     let { selectedTemplateModel, multiClusterApp } = this;
     let nueQuestions = [];

lib/global-admin/addon/components/new-multi-cluster-app/template.hbs

@@ -233,81 +233,10 @@
      expandOnInit=false
      expand=(action expandFn)
   }}
-    <div class="row">
+    {{form-global-resource-roles
-      <div class="col span-6">
+      multiClusterApp=multiClusterApp
-        <label class="acc-label">{{t "newMultiClusterApp.roles.title"}}</label>
+      addRole=(action "addRole")
-        {{searchable-select
+    }}
-          prompt="newMultiClusterApp.roles.table.prompt"
-          localizedPrompt=true
-          optionLabelPath="displayName"
-          optionValuePath="id"
-          content=roleChoices
-          change="addRole"
-          readOnly=readOnly
-        }}
-      </div>
-      <div class="col span-12">
-        {{#sortable-table
-           classNames="grid sortable-table"
-           sortBy=sortBy
-           headers=rolesHeaders
-           stickyHeader=false
-           bulkActions=false
-           search=false
-           pagingLabel="pagination.role"
-           descending=descending
-           body=appRoles
-           actionsWidth="75"
-           as |sortable kind role dt|
-        }}
-          {{#if (eq kind "row")}}
-            <tr class="main-row">
-              <td data-title="{{dt.roleName}}:" >
-                {{role.displayName}}
-              </td>
-              <td data-title="{{dt.builtin}}:" >
-                {{#if role.builtin}}
-                  <i class="icon icon-check"/>
-                {{else}}
-                  <span class="text-muted">&ndash;</span>
-                {{/if}}
-              </td>
-              <td data-title="{{dt.external}}:" >
-                {{#if role.external}}
-                  <i class="icon icon-check"/>
-                {{else}}
-                  <span class="text-muted">&ndash;</span>
-                {{/if}}
-              </td>
-              <td data-title="{{t "generic.actions"}}:" class="actions">
-                <div class="p-5">
-                  <button
-                    class="btn bg-primary btn-sm"
-                    {{action "removeRole" role}}
-                  >
-                    <i class="icon icon-minus"/>
-                  </button>
-                </div>
-              </td>
-            </tr>
-          {{else if (eq kind "nomatch")}}
-            <td
-              colspan="5"
-              class="text-center text-muted lacsso pt-20 pb-20"
-            >
-              {{t "newMultiClusterApp.roles.table.noMatch"}}
-            </td>
-          {{else if (eq kind "norows")}}
-            <td
-              colspan="5"
-              class="text-center text-muted lacsso pt-20 pb-20"
-            >
-              {{t "newMultiClusterApp.roles.table.noData"}}
-            </td>
-          {{/if}}
-        {{/sortable-table}}
-      </div>
-    </div>
   {{/accordion-list-item}}
 
 

lib/global-admin/addon/multi-cluster-apps/catalog/launch/route.js

@@ -78,6 +78,7 @@ export default Route.extend({
           catalogId: results.tpl.catalogId,
           targets:   [],
           members:   [],
+          roles:     ['project-member'],
         });
       }
 

lib/shared/addon/components/form-global-resource-roles/component.js

@@ -0,0 +1,35 @@
+import Component from '@ember/component';
+import layout from './template';
+import { computed } from '@ember/object';
+import { next } from '@ember/runloop';
+
+export default Component.extend({
+  layout,
+
+  classNames: ['row'],
+
+  multiClusterApp: null,
+
+  didReceiveAttrs() {
+    let { roles } = this.multiClusterApp;
+
+    if (!roles || roles.length === 0) {
+      next(() => {
+        this.addRole('project-member', '');
+      });
+    }
+  },
+
+  role: computed('multiClusterApp.roles.[]', {
+    get() {
+      let { roles = [] } = this.multiClusterApp;
+
+      return roles.find((role) => role === 'project-member' || role === 'cluster-owner');
+    },
+    set(key, value) {
+      this.addRole(value, this.role);
+
+      return value;
+    }
+  }),
+});

lib/shared/addon/components/form-global-resource-roles/template.hbs

@@ -0,0 +1,25 @@
+<div class="col span-12">
+  <label class="acc-label">
+    {{t "newMultiClusterApp.roles.label"}}
+  </label>
+  <div class="radio">
+    <label class="acc-label" id="mc-app-role-project-member">
+      {{radio-button
+        selection=role
+        value="project-member"
+        id="mc-app-role-project-member"
+      }}
+      {{t "newMultiClusterApp.roles.radios.project"}}
+    </label>
+  </div>
+  <div class="radio">
+    <label class="acc-label" id="mc-app-role-cluster-owner">
+      {{radio-button
+        selection=role
+        value="cluster-owner"
+        id="mc-app-role-cluster-owner"
+      }}
+      {{t "newMultiClusterApp.roles.radios.cluster"}}
+    </label>
+  </div>
+</div>

lib/shared/app/components/form-global-resource-roles/component.js

@@ -0,0 +1 @@
+export { default } from 'shared/components/form-global-resource-roles/component';

translations/en-us.yaml

@@ -5781,8 +5781,14 @@ newMultiClusterApp:
     answerOverride:
       placeholder: Question required
   roles:
-    title: Roles
+    title: Application Access Roles
-    detail: Select roles required to view this application
+    detail: Select a role to assign this app given this app the selected access.
+    label: Available Roles
+    radios:
+      cluster: "Cluster - This app will be able access and manage all resources in the clusters in which it is deployed"
+      project: "Project - This app will be able to access and manage resources in the projects in which it is deployed"
+    help: "Note: This may not be the full list of roles. The list is limited to the roles available to your user. If you are missing a required role, please ask your system administrator."
+    noRoles: "You can not add new roles because you do not have any roles available. Please speak to your system administrator about gaining role access."
     table:
       name: Name
       builtIn: Built In