Various UI improvements (#1663)

https://github.com/woodpecker-ci/woodpecker/issues/1314#issuecomment-1475128683

https://github.com/woodpecker-ci/woodpecker/issues/1314#issuecomment-1477858832
(2.)

and the last two tasks from
https://github.com/woodpecker-ci/woodpecker/issues/1314#issue-1418804461

---------

Co-authored-by: Anbraten <anton@ju60.de>

web/src/assets/locales/en.json

@@ -213,6 +213,10 @@
                     "disable": "Disable repository",
                     "success": "Repository disabled"
                 },
+                "enable": {
+                  "enable": "Enable repository",
+                  "success": "Repository enabled"
+                },
                 "delete": {
                     "delete": "Delete repository",
                     "confirm": "All data will be lost after this action!!!\n\nDo you really want to proceed?",

web/src/components/admin/settings/AdminQueueTab.vue

@@ -65,12 +65,9 @@
           <span class="ml-2">{{ task.id }}</span>
           <span class="flex ml-auto gap-2">
             <Badge v-if="task.agent_id !== 0" :label="$t('admin.settings.queue.agent')" :value="task.agent_id" />
-            <Badge
+            <template v-for="(value, label) in task.labels">
-              v-for="(value, label) in task.labels"
+              <Badge v-if="value" :key="label" :label="label.toString()" :value="value" />
-              :key="label"
+            </template>
-              :label="label.toString()"
-              :value="value || '???'"
-            />
             <Badge
               v-if="task.dependencies"
               :label="$t('admin.settings.queue.waiting_for')"

web/src/components/repo/pipeline/PipelineStepList.vue

@@ -43,7 +43,7 @@
     </div>
 
     <div class="flex-grow min-h-0 w-full relative">
-      <div class="absolute top-0 left-0 -right-3 h-full flex flex-col overflow-y-scroll gap-y-2">
+      <div class="absolute top-0 left-0 right-0 h-full flex flex-col overflow-y-scroll gap-y-2">
         <div
           v-for="workflow in pipeline.steps"
           :key="workflow.id"

web/src/components/repo/settings/ActionsTab.vue

@@ -15,6 +15,7 @@
       />
 
       <Button
+        v-if="isActive"
         class="mr-auto mt-4"
         color="blue"
         start-icon="turn-off"
@@ -22,6 +23,15 @@
         :text="$t('repo.settings.actions.disable.disable')"
         @click="deactivateRepo"
       />
+      <Button
+        v-else
+        class="mr-auto mt-4"
+        color="blue"
+        start-icon="turn-off"
+        :is-loading="isActivatingRepo"
+        :text="$t('repo.settings.actions.enable.enable')"
+        @click="activateRepo"
+      />
 
       <Button
         class="mr-auto mt-4"
@@ -85,6 +95,15 @@ export default defineComponent({
       await router.replace({ name: 'repos' });
     });
 
+    const { doSubmit: activateRepo, isLoading: isActivatingRepo } = useAsyncAction(async () => {
+      if (!repo) {
+        throw new Error('Unexpected: Repo should be set');
+      }
+
+      await apiClient.activateRepo(repo.value.owner, repo.value.name);
+      notifications.notify({ title: i18n.t('repo.settings.actions.enable.success'), type: 'success' });
+    });
+
     const { doSubmit: deactivateRepo, isLoading: isDeactivatingRepo } = useAsyncAction(async () => {
       if (!repo) {
         throw new Error('Unexpected: Repo should be set');
@@ -96,12 +115,15 @@ export default defineComponent({
     });
 
     return {
+      isActive: repo?.value.active,
       isRepairingRepo,
       isDeletingRepo,
       isDeactivatingRepo,
+      isActivatingRepo,
       deleteRepo,
       repairRepo,
       deactivateRepo,
+      activateRepo,
     };
   },
 });

web/src/views/repo/pipeline/Pipeline.vue

@@ -17,7 +17,7 @@
         <div v-else-if="pipeline.status === 'blocked'" class="flex flex-col flex-grow justify-center items-center p-2">
           <Icon name="status-blocked" class="w-16 h-16 text-color mb-4" />
           <p class="text-xl text-color mb-4">{{ $t('repo.pipeline.protected.awaits') }}</p>
-          <div v-if="repoPermissions.push" class="flex mt-2 space-x-4">
+          <div v-if="repoPermissions.push" class="flex space-x-4">
             <Button
               color="green"
               :text="$t('repo.pipeline.protected.approve')"
@@ -34,7 +34,7 @@
         </div>
 
         <div v-else-if="pipeline.status === 'declined'" class="flex flex-col flex-grow justify-center items-center">
-          <Icon name="status-blocked" class="w-32 h-32 text-color" />
+          <Icon name="status-blocked" class="w-16 h-16 text-color mb-4" />
           <p class="text-xl text-color">{{ $t('repo.pipeline.protected.declined') }}</p>
         </div>