Remove unused fields from user profile

MetRonnie · MetRonnie · commit 1a4a5123bb11 · 2024-05-22T18:08:20.000+01:00
These jupyterhub-related fields are no longer included by jupyter-server v2, and are not really used for anything
diff --git a/src/components/cylc/workflow/Toolbar.vue b/src/components/cylc/workflow/Toolbar.vue
@@ -180,9 +180,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </v-avatar>
         <v-menu activator="parent">
           <v-card :title="user.username">
-            <v-card-subtitle v-if="user.admin">
-              Admin
-            </v-card-subtitle>
             <v-card-text>
               <v-btn
                 to="/user-profile"
diff --git a/src/lang/en-GB/UserProfile.json b/src/lang/en-GB/UserProfile.json
@@ -1,9 +1,6 @@
 {
-  "tableHeader": "Your Profile",
-  "tableSubHeader": "This is a read-only view of your user",
+  "title": "Settings",
+  "yourProfile": "Your Profile",
   "username": "Username",
-  "administrator": "Administrator",
-  "groups": "Groups",
-  "created": "Created",
   "permissions": "Authorized Operations"
 }
diff --git a/src/lang/pt-BR/UserProfile.json b/src/lang/pt-BR/UserProfile.json
@@ -1,9 +1,6 @@
 {
-  "tableHeader": "Seu perfil de Usuário",
-  "tableSubHeader": "Esta é a lista (modo leitura) do perfil do seu usuário",
+  "title": "Configurações",
+  "yourProfile": "Seu perfil de Usuário",
   "username": "Nome de Usuário",
-  "administrator": "Administrador",
-  "groups": "Grupos",
-  "created": "Criado",
   "permissions": "Operações Autorizadas"
 }
diff --git a/src/model/User.model.js b/src/model/User.model.js
@@ -1,4 +1,4 @@
-/**
+/*
  * Copyright (C) NIWA & British Crown (Met Office) & Contributors.
  *
  * This program is free software: you can redistribute it and/or modify
@@ -15,33 +15,37 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-/**
- * @typedef {object} User
- * @property {string} username - user name
- * @property {string[]} groups - user groups
- * @property {string} created - date when the user was created
- * @property {boolean} admin - whether the user is an administrator or not
- * @property {string} server - server URL
- * @property {string} owner - UIS owner
- * @property {string[]} permissions - list of permissions
- * @property {string} mode - single or multi user mode
- * @property {string} initials - user initials
- */
 export default class User {
-  constructor (username, groups, created, admin, server, owner, permissions, mode, initials) {
-    // the authenticated user
-    // (full info only available when authenticated via the hub)
+  constructor ({ username, owner, permissions, mode, initials, color }) {
+    /**
+     * @type {string}
+     */
     this.username = username
-    this.groups = groups
-    this.created = created
-    this.admin = admin
-    this.server = server || '?' // server can be unset
-    // the UIS owner
-    // (i.e. the user who's workflows we are looking at)
-    // (this might not be the authenticated user for multi-user setups)
+    /**
+     * the UIS owner (i.e. the user who's workflows we are looking at)
+     * (this might not be the authenticated user for multi-user setups)
+     * @type {string}
+     */
     this.owner = owner
+    /**
+     * list of permissions
+     * @type {string[]}
+     */
     this.permissions = permissions
+    /**
+     * single or multi user mode
+     * @type {string}
+     */
     this.mode = mode
+    /**
+     * user initials
+     * @type {string}
+     */
     this.initials = initials
+    /**
+     * user avatar color if set
+     * @type {string | null}
+     */
+    this.color = color
   }
 }
diff --git a/src/services/mock/json-server.cjs b/src/services/mock/json-server.cjs
@@ -51,8 +51,8 @@ server.ws('/subscriptions', (ws) => {
  * Render a response. This can be used to customize outputs,
  * map response parameters to other values.
  * @see https://www.rahulpnath.com/blog/setting-up-a-fake-rest-api-using-json-server/
- * @param req - express HTTP request
- * @param res - express HTTP response
+ * @param {import('express').Request} req - express HTTP request
+ * @param {import('express').Response} res - express HTTP response
  */
 router.render = async (req, res) => {
   // This is the original response.
@@ -65,11 +65,12 @@ router.render = async (req, res) => {
     } else {
       responseData = await graphql.handleGraphQLRequest(req)
     }
+    // NB: json-server returns 404 for requests that are not in the router
+    // but we have dynamic requests for the /graphql endpoint (i.e. no single
+    // data response) hence the status(200) below.
+    res.status(200)
   }
-  // NB: json-server returns 404 for requests that are not in db.json, but
-  //     we have dynamic requests for the /graphql endpoint (i.e. no single
-  //     data response) hence the status(200) below.
-  res.status(200).jsonp(responseData)
+  res.jsonp(responseData)
 }
 
 server.use(router)
diff --git a/src/services/user.service.js b/src/services/user.service.js
@@ -1,4 +1,4 @@
-/**
+/*
  * Copyright (C) NIWA & British Crown (Met Office) & Contributors.
  *
  * This program is free software: you can redistribute it and/or modify
@@ -19,29 +19,16 @@ import axios from 'axios'
 import User from '@/model/User.model'
 import { createUrl, getCylcHeaders } from '@/utils/urls'
 
-class UserService {
+export default class UserService {
   /**
    * Gets the user profile from the backend server.
-   * @returns {Promise<*>} - a promise that dispatches Vuex action
+   * @returns {Promise<User>} - a promise that dispatches Vuex action
    */
-  getUserProfile () {
-    return axios.get(
+  async getUserProfile () {
+    const { data } = await axios.get(
       createUrl('userprofile'),
-      { headers: getCylcHeaders() },
-    ).then(({ data }) => {
-      return new User(
-        data.name,
-        data.groups,
-        data.created,
-        data.admin,
-        data.server,
-        data.owner,
-        data.permissions,
-        data.mode,
-        data.initials
-      )
-    })
+      { headers: getCylcHeaders() }
+    )
+    return new User(data)
   }
 }
-
-export default UserService
diff --git a/src/styles/cylc/_user_profile.scss b/src/styles/cylc/_user_profile.scss
@@ -16,6 +16,10 @@
  */
 
 .c-user-profile {
+  .v-field--disabled {
+    // Increase opactity to make it easier to read disabled fields
+    opacity: 0.6;
+  }
   .v-container .v-row {
     margin-bottom: 1em;
   }
diff --git a/src/views/UserProfile.vue b/src/views/UserProfile.vue
@@ -24,12 +24,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           prominent
           color="grey-lighten-3"
         >
-          <h3 class="text-h5">{{ $t('UserProfile.tableHeader') }}</h3>
-          <p class="text-body-1">{{ $t('UserProfile.tableSubHeader') }}</p>
+          <h3 class="text-h5">{{ $t('UserProfile.title') }}</h3>
         </v-alert>
-        <v-form v-if="user !== null">
+        <v-form>
           <v-defaults-provider :defaults="$options.vuetifyDefaults">
             <v-container py-0>
+              <v-row no-gutters>
+                <h3>{{ $t('UserProfile.yourProfile') }}</h3>
+              </v-row>
+
               <v-row no-gutters class="align-center wrap">
                 <v-col cols="3">
                   <span>{{ $t('UserProfile.username') }}</span>
@@ -45,53 +48,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 </v-col>
               </v-row>
 
-              <v-row no-gutters class="align-center wrap">
-                <v-col cols="3">
-                  <span>{{ $t('UserProfile.administrator') }}</span>
-                </v-col>
-                <v-col cols="9">
-                  <v-checkbox
-                      v-model="user.admin"
-                      disabled
-                      id="profile-admin"
-                      aria-disabled="true"
-                      class="text-body-1"
-                  />
-                </v-col>
-              </v-row>
-
-              <v-row no-gutters class="align-center wrap">
-                <v-col cols="3">
-                  <span>{{ $t('UserProfile.groups') }}</span>
-                </v-col>
-                <v-col cols="9">
-                  <v-select
-                      :items="user.groups"
-                      v-model="user.groups"
-                      :menu-props="{ attach: true }"
-                      multiple
-                      disabled
-                      id="profile-groups"
-                      aria-disabled="true"
-                      class="text-body-1"
-                  />
-                </v-col>
-              </v-row>
-
-              <v-row no-gutters class="align-center wrap">
-                <v-col cols="3">
-                  <span>{{ $t('UserProfile.created') }}</span>
-                </v-col>
-                <v-col cols="9">
-                  <v-text-field
-                      :model-value="user.created"
-                      disabled
-                      id="profile-created"
-                      aria-disabled="true"
-                      class="text-body-1"
-                  />
-                </v-col>
-              </v-row>
               <v-row no-gutters class="align-center wrap">
                 <v-col cols="3">
                   <span>{{ $t('UserProfile.permissions') }}</span>
@@ -103,16 +59,22 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     :menu-props="{ attach: true }"
                     multiple
                     disabled
+                    chips
                     id="profile-permissions"
-                    aria-disabled="true"
-                    class="text-body-1"
-                  />
+                  >
+                    <template #chip="{ data }">
+                      <v-chip
+                        v-bind="data"
+                        label
+                        size="default"
+                      />
+                    </template>
+                  </v-select>
                 </v-col>
               </v-row>
+
               <v-row no-gutters class="mt-4">
-                <v-col cols="12">
-                  <p class="text-h6">Preferences</p>
-                </v-col>
+                <h3>Preferences</h3>
               </v-row>
 
               <v-row no-gutters class="align-center wrap">
@@ -158,7 +120,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                         v-for="theme in $options.jobThemes"
                         :key="theme"
                       >
-                        {{ theme.replace('_', ' ') }}
+                        {{ upperFirst(theme.replace('_', ' ')) }}
                       </th>
                     </tr>
                     <tr>
@@ -234,7 +196,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             </v-container>
           </v-defaults-provider>
         </v-form>
-        <v-progress-linear v-else :indeterminate="true" />
       </v-col>
     </v-row>
   </v-container>
@@ -249,6 +210,7 @@ import { decreaseFontSize, getCurrentFontSize, increaseFontSize, resetFontSize }
 import { allViews, useDefaultView } from '@/views/views.js'
 import Job from '@/components/cylc/Job.vue'
 import JobState from '@/model/JobState.model'
+import { upperFirst } from 'lodash-es'
 
 // TODO: update where user preferences are stored after #335
 
@@ -265,6 +227,7 @@ export default {
       cyclePointsOrderDesc: useCyclePointsOrderDesc(),
       jobTheme: useJobTheme(),
       reducedAnimation: useReducedAnimation(),
+      upperFirst,
     }
   },
 
diff --git a/tests/e2e/specs/header.cy.js b/tests/e2e/specs/header.cy.js
@@ -30,14 +30,7 @@ describe('Header Component multiuser', () => {
   beforeEach(() => {
     cy.intercept('/userprofile', {
       body: {
-        name: 'userTest',
-        groups: [
-          'cylc',
-          'developer'
-        ],
-        created: '2021-03-23T23:26:23.606Z',
-        admin: true,
-        server: '/user/cylc/',
+        username: 'userTest',
         permissions: [
           'read',
         ],
diff --git a/tests/e2e/specs/url.cy.js b/tests/e2e/specs/url.cy.js
@@ -39,11 +39,7 @@ describe('URL handling', () => {
   it('reroutes to noAuth page if user isnt authorised', () => {
     cy.intercept('/userprofile', {
       body: {
-        name: 'user',
-        groups: ['cylc', 'developer'],
-        created: '2021-03-23T23:26:23.606Z',
-        admin: true,
-        server: '/user/cylc/',
+        username: 'user',
         permissions: [],
         mode: 'single user',
         owner: 'user'
diff --git a/tests/unit/mixins/graphql.spec.js b/tests/unit/mixins/graphql.spec.js
@@ -24,7 +24,7 @@ import graphqlMixin from '@/mixins/graphql'
 describe('GraphQL mixin', () => {
   const store = createStore(storeOptions)
   it('should create the GraphQL Query variables', () => {
-    const user = new User('cylc', [], new Date(), true, 'localhost', 'owner')
+    const user = new User({ username: 'cylc', permissions: [], owner: 'owner' })
     store.commit('user/SET_USER', user)
     const workflowName = 'test'
     const Component = {
diff --git a/tests/unit/model/user.model.spec.js b/tests/unit/model/user.model.spec.js
diff --git a/tests/unit/services/user.service.spec.js b/tests/unit/services/user.service.spec.js
diff --git a/tests/unit/views/log.vue.spec.js b/tests/unit/views/log.vue.spec.js
diff --git a/tests/unit/views/table.vue.spec.js b/tests/unit/views/table.vue.spec.js
diff --git a/tests/unit/views/tree.vue.spec.js b/tests/unit/views/tree.vue.spec.js

Original file line number	Diff line number	Diff line change
`@@ -1,9 +1,6 @@`
`1`	`1`	`{`
`2`		`- "tableHeader": "Your Profile",`
`3`		`- "tableSubHeader": "This is a read-only view of your user",`
	`2`	`+ "title": "Settings",`
	`3`	`+ "yourProfile": "Your Profile",`
`4`	`4`	`"username": "Username",`
`5`		`- "administrator": "Administrator",`
`6`		`- "groups": "Groups",`
`7`		`- "created": "Created",`
`8`	`5`	`"permissions": "Authorized Operations"`
`9`	`6`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,9 +1,6 @@`
`1`	`1`	`{`
`2`		`- "tableHeader": "Seu perfil de Usuário",`
`3`		`- "tableSubHeader": "Esta é a lista (modo leitura) do perfil do seu usuário",`
	`2`	`+ "title": "Configurações",`
	`3`	`+ "yourProfile": "Seu perfil de Usuário",`
`4`	`4`	`"username": "Nome de Usuário",`
`5`		`- "administrator": "Administrador",`
`6`		`- "groups": "Grupos",`
`7`		`- "created": "Criado",`
`8`	`5`	`"permissions": "Operações Autorizadas"`
`9`	`6`	`}`