RDISCROWD-7660-2 show authorized servcies to non-admins

static/src/components/setting/index.vue

@@ -5,6 +5,17 @@
       class="col-md-12"
       :style="waiting && 'opacity: 0.5'"
     >
+      <div
+        v-if="!isAdmin"
+        class="form-group row"
+      >
+        <div class="col-md-5">
+          <p>Authorized Services</p>
+        </div>
+        <div class="col-md-7 pull-right">
+          <span>{{ authorizedServices.join(", ") }}</span>
+        </div>
+      </div>
       <div
         v-for="category in inputFields"
         :key="category.display"
@@ -113,7 +124,9 @@
                       :value="u.id"
                       @click="remove($event, u.id)"
                     >
-                      <p> {{ u.fullname }}</p>
+                      <p class="assigned-user">
+                        {{ u.fullname }}
+                      </p>
                     </div>
                   </div>
                 </td>
@@ -192,13 +205,14 @@ export default {
       externalConfigDict: {},
       waiting: false,
       completed_tasks_cleanup_days: null,
-      allow_taskrun_edit: false
+      allow_taskrun_edit: false,
+      authorizedServices: [],
+      isAdmin: false
     };
   },
   created () {
     this.getData();
   },
-
   methods: {
     hasLevel (level) {
       return this.dataAccessConfig.includes(level);
@@ -278,6 +292,8 @@ export default {
         }
         this.inputFields = dataProjConfig.forms;
         this.externalConfigDict = JSON.parse(dataProjConfig.external_config_dict);
+        this.authorizedServices = dataProjConfig.authorized_services;
+        this.isAdmin = dataProjConfig.is_admin;
         if (JSON.parse(dataProjConfig.data_access).length > 0) {
             this.dataAccessConfigured = true;
         }

static/src/test/components/setting/index.spec.js

@@ -1,4 +1,4 @@
-import { mount, shallowMount, createLocalVue } from '@vue/test-utils';
+import { createLocalVue, mount, shallowMount } from '@vue/test-utils';
 import projectConfig from '../../../components/setting/index.vue';
 
 const localVue = createLocalVue();
@@ -14,7 +14,7 @@ describe('projectConfig', () => {
   });
 
   let VALID_ACCESS_LEVELS = [ [ 'L1', 'L1' ], [ 'L2', 'L2' ], [ 'L3', 'L3' ], [ 'L4', 'L4' ] ];
-  let EXT_CONF = { target_bucket: 'bucket' };
+  let EXT_CONF = { target_bucket: 'bucket', authorized_services: [] };
 
   it('fetch external config and access data', async () => {
     let response = {
@@ -66,51 +66,72 @@ describe('projectConfig', () => {
     expect(wrapper.vm._data.assignee).toEqual(['1']);
   });
 
-it('load empty data', () => {
-  propsData = {
-    csrfTRoken: null,
-    externalConfig: {},
-    externalConfigForm: []
-  };
-  const wrapper = shallowMount(projectConfig, { propsData });
-  expect(wrapper.vm._data.dataAccessConfigured).toEqual(false);
-  expect(wrapper.vm._data.users).toEqual({});
-});
+  it('load empty data', () => {
+    propsData = {
+      csrfTRoken: null,
+      externalConfig: {},
+      externalConfigForm: []
+    };
+    const wrapper = shallowMount(projectConfig, { propsData });
+    expect(wrapper.vm._data.dataAccessConfigured).toEqual(false);
+    expect(wrapper.vm._data.users).toEqual({});
+  });
 
   it('show external config', () => {
-    const wrapper = shallowMount(projectConfig, { propsData });
-    wrapper.vm._data.externalConfigDict = { target_bucket: 'bucket', cluster: 'c1' };
-    wrapper.vm._data.inputFields = {
-      gigwork_poller: { display: 'test1', fields: [{ type: 'TextField', name: 'target_bucket' }] },
-      hdfs: { display: 'test2', fields: [{ type: 'SelectField', name: 'cluster', choices: [('c1', 'option1')] }] }
-    };
-    expect(wrapper.findAll('p')).toHaveLength(4);
+    const wrapper = shallowMount(projectConfig,
+      {
+        data () {
+          return {
+            externalConfigDict: { target_bucket: 'bucket', cluster: 'c1' },
+            inputFields: {
+              gigwork_poller: { display: 'test1', fields: [{ type: 'TextField', name: 'target_bucket' }] },
+              hdfs: { display: 'test2', fields: [{ type: 'SelectField', name: 'cluster', choices: [('c1', 'option1')] }] }
+            },
+            isAdmin: false
+          };
+        }
+      }
+    );
+    expect(wrapper.findAll('p')).toHaveLength(5);
     expect(wrapper.findAll('input')).toHaveLength(2);
     expect(wrapper.findAll('select')).toHaveLength(2);
   });
 
   it('add assigned user', () => {
-    const wrapper = shallowMount(projectConfig);
-    wrapper.vm._data.assignee = ['1'];
-    wrapper.vm._data.users = { 1: { id: 1, fullname: 'user1' }, 2: { id: 2, fullname: 'user2' } };
-    wrapper.vm._data.searchResult = [{ id: 1, fullname: 'user1' }, { id: 2, fullname: 'user2' }];
-
-    expect(wrapper.findAll('p')).toHaveLength(2);
-    const user2 = wrapper.findAll('p').at(1);
+    const wrapper = shallowMount(projectConfig,
+      {
+        data () {
+          return {
+            assignee: ['1'],
+            users: [{ 1: { id: 1, fullname: 'sally fields', last_name: 'fields' } }, { 2: { id: 2, fullname: 'tom hanks', last_name: 'hanks' } }],
+            searchResult: [{ id: 1, fullname: 'sally fields', last_name: 'fields' }, { id: 2, fullname: 'tom hanks', last_name: 'hanks' }]
+          };
+        }
+      }
+    );
+    expect(wrapper.findAll('#assign-user-column p')).toHaveLength(2);
+    const user2 = wrapper.findAll('#assign-user-column p').at(1);
     user2.trigger('click');
-    expect(wrapper.findAll('p')).toHaveLength(2);
+    expect(wrapper.findAll('#assign-user-column p')).toHaveLength(2);
   });
 
-  it('remove assigned user', () => {
-    const wrapper = shallowMount(projectConfig);
-    wrapper.vm._data.assignee = ['1'];
-    wrapper.vm._data.users = { 1: { id: 1, fullname: 'user' } };
-    wrapper.vm._data.searchResult = [{ id: 1, fullname: 'user' }];
-
-    expect(wrapper.findAll('p')).toHaveLength(5);
-    const user1 = wrapper.findAll('p').at(2);
+  it('remove assigned user', async () => {
+    const wrapper = shallowMount(projectConfig,
+    {
+        data () {
+          return {
+            assignee: ['1'],
+            users: { 1: { id: 1, fullname: 'user 1', last_name: '1' } },
+            searchResult: [{ id: 1, fullname: 'user 1', last_name: '1' }],
+            isAdmin: false
+          };
+        }
+    });
+    expect(wrapper.findAll('p.assigned-user')).toHaveLength(1);
+    const user1 = wrapper.findAll('#users').at(1);
     user1.trigger('click');
-    expect(wrapper.findAll('p')).toHaveLength(5);
+    await localVue.nextTick();
+    expect(wrapper.findAll('p.assigned-user')).toHaveLength(1);
   });
 
   it('saves config', async () => {

templates/projects/external_config.html

@@ -23,6 +23,11 @@ <h3>{{_('No external services have been configured')}}</h3>
 <p>For more information on these settings, please consult the <a href={{config.EXT_CONFIG_DOCS}}>External Configurations documentation</a>.</p>
 {% endif %}
 
+{% if not is_admin %}
+    <h3>Authorized Services</h3>
+    <span>{{ authorized_services|join(', ') }}</span>
+{% endif %}
+
 {% for (form_name, display, form) in forms %}
     <h3>{{display}}</h3>
     {{render_form(form, form_id=form_name, action_url=url_for('project.ext_config', short_name=project.short_name), action_text='Submit', class_='', btn_name=form_name, btn_class='btn btn-default', btn_value=None)}}