[ui] Move import identities and jobs to settings

Moves the views to import identities and the list of jobs inside the `settings` section. `Import identities` is renamed to `Sync data`. Signed-off-by: Eva Millán <evamillan@bitergia.com>
chaoss · Aug 22, 2023 · ea749c6 · ea749c6
1 parent 5d2a635
commit ea749c6
Show file tree

Hide file tree

Showing 10 changed files with 152 additions and 163 deletions.
diff --git a/releases/unreleased/manage-app-settings.yml b/releases/unreleased/manage-app-settings.yml
@@ -0,0 +1,8 @@
+---
+title: Manage app settings
+category: added
+author: Eva Millan <evamillan@bitergia.com>
+issue: null
+notes: >
+  Users can configure automatic affiliations, profile unification
+  and identity data synchronization from the new `Settings` section.
diff --git a/ui/src/App.vue b/ui/src/App.vue
@@ -8,50 +8,40 @@
       </router-link>
 
       <v-spacer></v-spacer>
-      <v-menu v-if="user && $route.name !== 'Login'" offset-y left>
-        <template v-slot:activator="{ on }">
-          <v-btn depressed small color="primary" v-on="on">
-            <v-icon small left> mdi-account-circle </v-icon>
-            {{ user }}
-            <v-icon small right> mdi-chevron-down </v-icon>
-          </v-btn>
-        </template>
-        <v-list color="primary" dark dense>
-          <v-list-item to="/">
-            <v-list-item-icon class="mr-2">
-              <v-icon small>mdi-view-dashboard-variant</v-icon>
-            </v-list-item-icon>
-            <v-list-item-title>Dashboard</v-list-item-title>
-          </v-list-item>
-          <v-divider />
-          <v-list-item to="/import-identities">
-            <v-list-item-icon class="mr-2">
-              <v-icon small>mdi-account-sync</v-icon>
-            </v-list-item-icon>
-            <v-list-item-title>Import identities</v-list-item-title>
-          </v-list-item>
-          <v-list-item to="/jobs">
-            <v-list-item-icon class="mr-2">
-              <v-icon small>mdi-tray-full</v-icon>
-            </v-list-item-icon>
-            <v-list-item-title>Jobs</v-list-item-title>
-          </v-list-item>
-          <v-divider />
-          <v-list-item to="/change-password">
-            <v-list-item-icon class="mr-2">
-              <v-icon small>mdi-cog-outline</v-icon>
-            </v-list-item-icon>
-            <v-list-item-title>Change password</v-list-item-title>
-          </v-list-item>
-          <v-divider />
-          <v-list-item @click="logOut">
-            <v-list-item-icon class="mr-2">
-              <v-icon small>mdi-logout-variant</v-icon>
-            </v-list-item-icon>
-            <v-list-item-title>Log out</v-list-item-title>
-          </v-list-item>
-        </v-list>
-      </v-menu>
+      <div v-if="user && $route.name !== 'Login'">
+        <v-btn to="/" depressed small color="primary" class="mr-2">
+          <v-icon small left> mdi-view-dashboard-variant </v-icon>
+          Dashboard
+        </v-btn>
+        <v-btn to="/settings" depressed small color="primary" class="mr-2">
+          <v-icon small left> mdi-cog </v-icon>
+          Settings
+        </v-btn>
+        <v-menu offset-y left>
+          <template v-slot:activator="{ on }">
+            <v-btn depressed small color="primary" v-on="on">
+              <v-icon small left> mdi-account-circle </v-icon>
+              {{ user }}
+              <v-icon small right> mdi-chevron-down </v-icon>
+            </v-btn>
+          </template>
+          <v-list color="primary" dark dense>
+            <v-list-item to="/change-password">
+              <v-list-item-icon class="mr-2">
+                <v-icon small>mdi-form-textbox-password</v-icon>
+              </v-list-item-icon>
+              <v-list-item-title>Change password</v-list-item-title>
+            </v-list-item>
+            <v-divider />
+            <v-list-item @click="logOut">
+              <v-list-item-icon class="mr-2">
+                <v-icon small>mdi-logout-variant</v-icon>
+              </v-list-item-icon>
+              <v-list-item-title>Log out</v-list-item-title>
+            </v-list-item>
+          </v-list>
+        </v-menu>
+      </div>
     </v-app-bar>
     <transition name="fade" mode="out-in">
       <router-view />

diff --git a/ui/src/components/TasksTable.stories.js b/ui/src/components/TasksTable.stories.js
@@ -29,12 +29,14 @@ export const Default = () => ({
     },
     tasks: {
       data: {
-        importIdentitiesTask: {
+        scheduledTasks: {
           entities: [
             {
               id: 1,
-              backend: "mailmap",
-              url: "http://test.com",
+              args: {
+                backend_name: "mailmap",
+                url: "http://test.com",
+              },
               interval: 43800,
               lastExecution: "2023-03-14T14:21:10.041445+00:00",
               failed: true,
@@ -44,9 +46,11 @@ export const Default = () => ({
             },
             {
               id: 2,
-              backend: "external plugin",
-              url: "http://test.com",
-              args: JSON.stringify({ token: "XXXX" }),
+              args: {
+                backend_name: "external plugin",
+                url: "http://test.com",
+                token: "XXXX"
+              },
               interval: 0,
               lastExecution: "2023-03-12T11:01:40.041445+00:00",
               failed: false,
@@ -66,8 +70,8 @@ export const Default = () => ({
       return this.tasks;
     },
     deleteTask(id) {
-      this.tasks.data.importIdentitiesTask.entities =
-        this.tasks.data.importIdentitiesTask.entities.filter(
+      this.tasks.data.scheduledTasks.entities =
+        this.tasks.data.scheduledTasks.entities.filter(
           (task) => task.id !== id
         );
       return {

diff --git a/ui/src/components/TasksTable.vue b/ui/src/components/TasksTable.vue
@@ -1,7 +1,7 @@
 <template>
-  <v-container class="section jobs mt-6 pa-0">
+  <section class="section">
     <header class="header">
-      <h1 class="title">Import identities</h1>
+      <h1 class="title">Sync data</h1>
       <v-menu offset-y>
         <template v-slot:activator="{ on }">
           <v-btn color="primary" depressed small v-on="on">
@@ -30,48 +30,37 @@
       indeterminate
       color="primary"
     ></v-progress-linear>
-    <v-simple-table>
+    <v-simple-table v-else>
       <template v-slot:default>
-        <thead v-if="tasks.length > 0">
-          <tr>
-            <th class="text-left">Source</th>
-            <th class="text-left">Last run</th>
-            <th class="text-left">Next run</th>
-            <th class="text-right">Executions</th>
-            <th class="text-right">Failures</th>
-            <th></th>
-          </tr>
-        </thead>
-        <div v-else class="ma-9">
-          <h3 class="text-h6">No scheduled tasks</h3>
+        <div v-if="tasks.length === 0" class="ma-8">
+          <h3 class="text-subtitle-2">No connected sources</h3>
           <p class="text-body-2">
-            You can sync identities from different data sources automatically
-            and periodically.
+            You can sync identities data from different data sources
+            automatically and periodically.
           </p>
         </div>
         <tbody>
           <tr v-for="task in tasks" :key="task.id">
-            <td>
-              <span class="font-weight-medium">
+            <td class="pr-6 py-4 pl-8">
+              <p class="subheader mb-0">
                 {{ task.args.backend_name }}
-              </span>
-            </td>
-            <td>
-              <v-icon
+              </p>
+              <p
                 v-if="task.lastExecution"
-                :color="task.failed ? 'failed' : 'finished'"
-                :aria-label="task.failed ? 'failed' : 'finished'"
-                aria-hidden="false"
-                class="mb-1 mr-1"
-                small
+                class="v-list-item__subtitle text--secondary mb-0"
               >
-                {{ task.failed ? "mdi-alert-circle" : "mdi-check-circle" }}
-              </v-icon>
-              {{ formatDate(task.lastExecution) }}
+                <v-icon
+                  :color="task.failed ? 'failed' : 'finished'"
+                  :aria-label="task.failed ? 'failed' : 'finished'"
+                  aria-hidden="false"
+                  class="mb-1 mr-1"
+                  small
+                >
+                  {{ task.failed ? "mdi-alert" : "mdi-check" }}
+                </v-icon>
+                Last sync {{ formatDate(task.lastExecution) }}
+              </p>
             </td>
-            <td>{{ formatDate(task.scheduledDatetime) }}</td>
-            <td class="text-right">{{ task.executions }}</td>
-            <td class="text-right">{{ task.failures }}</td>
             <td class="text-right pr-8">
               <v-btn
                 class="mr-2"
@@ -109,7 +98,7 @@
       @update:open="modal.isOpen = $event"
       @update:tasks="getTasks()"
     />
-  </v-container>
+  </section>
 </template>
 <script>
 import ImporterModal from "./ImporterModal";
@@ -206,4 +195,7 @@ export default {
 </script>
 <style lang="scss" scoped>
 @import "../styles/index.scss";
+.subheader {
+  line-height: 1.775rem;
+}
 </style>
diff --git a/ui/src/router/index.js b/ui/src/router/index.js
@@ -32,18 +32,6 @@ const routes = [
     component: () => import("../views/SearchHelp"),
     meta: { title: "Search Help - Sorting Hat" },
   },
-  {
-    path: "/jobs",
-    name: "Jobs",
-    component: () => import("../views/Jobs"),
-    meta: { title: "Jobs - Sorting Hat" },
-  },
-  {
-    path: "/import-identities",
-    name: "ImportIdentities",
-    component: () => import("../views/ImportIdentities"),
-    meta: { requiresAuth: true, title: "Import identities - Sorting Hat" },
-  },
   {
     path: "/organization/:name",
     name: "Organization",
@@ -62,6 +50,16 @@ const routes = [
         name: "SettingsGeneral",
         component: () => import("../views/SettingsGeneral"),
       },
+      {
+        path: "sync",
+        name: "SettingsSync",
+        component: () => import("../views/SettingsSync"),
+      },
+      {
+        path: "jobs",
+        name: "SettingsJobs",
+        component: () => import("../views/Jobs"),
+      },
     ],
   },
 ];

diff --git a/ui/src/views/Jobs.vue b/ui/src/views/Jobs.vue
@@ -1,8 +1,7 @@
 <template>
-  <v-main>
+  <section>
     <jobs-table
       :get-jobs="getJobs"
-      class="mt-md-6"
       @affiliate="affiliate"
       @genderize="genderize"
       @unify="unify"
@@ -12,7 +11,7 @@
     <v-snackbar v-model="snackbar.isOpen" color="error" text>
       {{ snackbar.text }}
     </v-snackbar>
-  </v-main>
+  </section>
 </template>
 
 <script>

diff --git a/ui/src/views/SettingsLayout.vue b/ui/src/views/SettingsLayout.vue
@@ -17,6 +17,24 @@
               <v-list-item-title>General</v-list-item-title>
             </v-list-item-content>
           </v-list-item>
+          <v-list-item
+            :to="{ name: 'SettingsSync' }"
+            active-class="primary--text white"
+            link
+          >
+            <v-list-item-content>
+              <v-list-item-title>Sync data</v-list-item-title>
+            </v-list-item-content>
+          </v-list-item>
+          <v-list-item
+            :to="{ name: 'SettingsJobs' }"
+            active-class="primary--text white"
+            link
+          >
+            <v-list-item-content>
+              <v-list-item-title>Job log</v-list-item-title>
+            </v-list-item-content>
+          </v-list-item>
         </v-list>
       </v-navigation-drawer>
       <v-container class="pa-0 pr-6">

diff --git a/ui/src/views/ImportIdentities.vue → ui/src/views/SettingsSync.vue b/ui/src/views/ImportIdentities.vue → ui/src/views/SettingsSync.vue
@@ -1,13 +1,11 @@
 <template>
-  <v-main>
-    <tasks-table
-      :fetch-backends="fetchBackends"
-      :fetch-tasks="fetchTasks"
-      :create-task="createTask"
-      :delete-task="deleteTask"
-      :edit-task="editTask"
-    />
-  </v-main>
+  <tasks-table
+    :fetch-backends="fetchBackends"
+    :fetch-tasks="fetchTasks"
+    :create-task="createTask"
+    :delete-task="deleteTask"
+    :edit-task="editTask"
+  />
 </template>
 <script>
 import {
@@ -22,7 +20,7 @@ import {
 import TasksTable from "./../components/TasksTable";
 
 export default {
-  name: "ImportIdentities",
+  name: "SettingsSync",
   components: { TasksTable },
   methods: {
     async fetchBackends() {
@@ -48,8 +46,3 @@ export default {
   },
 };
 </script>
-<style lang="scss" scoped>
-.container {
-  max-width: 1160px;
-}
-</style>