SortingHat UI integration

.github/workflows/tests.yml

@@ -92,3 +92,9 @@ jobs:
       - name: Run unit tests
         working-directory: ./ui
         run: yarn test:unit
+      - name: Run end-to-end tests
+        uses: cypress-io/github-action@1b70233146622b69e789ccdd4f9452adc638d25a # 6.6.1
+        with:
+          build: yarn build
+          command: yarn test:e2e
+          working-directory: ./ui

releases/unreleased/identities-management-ui.yml

@@ -0,0 +1,8 @@
+---
+title: Identities management UI
+category: added
+author: Eva Millán <evamillan@bitergia.com>
+issue: null
+notes: >
+  Manage contributor identities directly from the
+  user interface.

ui/.eslintrc.cjs

@@ -4,7 +4,8 @@ require('@rushstack/eslint-patch/modern-module-resolution')
 module.exports = {
   root: true,
   env: {
-    node: true
+    node: true,
+    'cypress/globals': true
   },
   extends: [
     'plugin:vue/vue3-essential',

ui/cypress.config.js

@@ -2,7 +2,9 @@ import { defineConfig } from 'cypress'
 
 export default defineConfig({
   e2e: {
-    specPattern: 'cypress/e2e/**/*.{cy,spec}.{js,jsx,ts,tsx}',
-    baseUrl: 'http://localhost:4173'
+    specPattern: 'tests/e2e/**/*.{cy,spec}.{js,jsx,ts,tsx}',
+    baseUrl: 'http://localhost:4173',
+    supportFile: false,
+    screenshotOnRunFailure: false
   }
 })

ui/package.json

@@ -21,6 +21,7 @@
     "axios": "^1.12.0",
     "js-cookie": "^3.0.5",
     "pinia": "^3.0.3",
+    "sortinghat-ui-core": "https://github.com/evamillan/grimoirelab-sortinghat/releases/download/1.13.0/sortinghat-ui.tgz",
     "vue": "^3.5.18",
     "vue-router": "^4.5.1",
     "vuetify": "^3.9.2"

ui/src/App.vue

@@ -61,6 +61,12 @@ provide('createEcosystem', API.ecosystem.create)
           </template>
           <v-list-item-title>Tasks</v-list-item-title>
         </v-list-item>
+        <v-list-item :to="{ name: 'identities' }">
+          <template #prepend>
+            <v-icon>mdi-account-multiple</v-icon>
+          </template>
+          <v-list-item-title>Identities</v-list-item-title>
+        </v-list-item>
       </v-list>
     </v-navigation-drawer>
     <v-main>

ui/src/components/EcosystemSelector.vue

@@ -58,7 +58,7 @@ export default {
   },
   computed: {
     selectedEcosystem() {
-      if (this.ecosystems.length > 0 && this.$route.query.ecosystem) {
+      if (this.ecosystems?.length > 0 && this.$route.query.ecosystem) {
         const ecosystem = this.ecosystems.find((e) => e.name == this.$route.query.ecosystem)
         return ecosystem
       } else {

ui/src/main.js

@@ -5,10 +5,18 @@ import { createPinia } from 'pinia'
 import App from './App.vue'
 import router from './router'
 import vuetify from './plugins/vuetify'
+import sortinghat from 'sortinghat-ui-core'
+import 'sortinghat-ui-core/dist/sortinghat-ui.css'
+import { base } from './services/api/client'
 
 const pinia = createPinia()
 const app = createApp(App)
 
 app.use(router).use(vuetify).use(pinia)
 
+app.use(sortinghat, {
+  apiURL: `${base}/api/v1/identities/`,
+  router: router
+})
+
 app.mount('#app')

ui/src/plugins/vuetify.js

@@ -22,6 +22,8 @@ export default createVuetify({
           'on-background': '#1f2328',
           surface: '#ffffff',
           'on-surface': '#1f2328',
+          'surface-variant': '#dee3eb',
+          'on-surface-variant': '#42474e',
           running: '#f4bc00',
           new: '#3fa500',
           enqueued: '#003756',

ui/src/router/index.js

@@ -1,5 +1,6 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import { useUserStore } from '@/store'
+import sortinghat from 'sortinghat-ui-core'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -85,6 +86,18 @@ const router = createRouter({
       name: 'signIn',
       component: () => import('../views/SignIn.vue')
     },
+    {
+      path: '/identities',
+      name: 'identities',
+      children: sortinghat.routes,
+      redirect: { name: 'Dashboard' },
+      meta: {
+        breadcrumb: {
+          title: 'Identities',
+          to: { name: 'Dashboard' }
+        }
+      }
+    },
     { path: '/:pathMatch(.*)*', name: 'notFound', component: () => import('../views/NotFound.vue') }
   ]
 })

ui/src/services/api/client.js

@@ -5,7 +5,7 @@ import { useUserStore } from '@/store'
 const AUTHENTICATION_ERROR = 'Authentication credentials were not provided.'
 
 const defaultBase = import.meta.env.MODE === 'development' ? 'http://localhost:8000' : '/'
-const base = import.meta.env.VITE_API_ENDPOINT || defaultBase
+export const base = import.meta.env.VITE_API_ENDPOINT || defaultBase
 
 export const client = axios.create({
   baseURL: base,

ui/tests/e2e/sortinghat.cy.js

@@ -0,0 +1,12 @@
+describe('SortingHat', () => {
+  it('Loads the "identities" section', () => {
+    cy.setCookie('csrftoken', 'testToken')
+    cy.setCookie('gl_user', 'testUser')
+    cy.visit('/identities')
+
+    cy.get('main')
+      .should('contain', 'Workspace')
+      .should('contain', 'Individuals')
+      .should('contain', 'Organizations')
+  })
+})