UI cleanups and improvements (#2548)

web/components.d.ts

@@ -21,6 +21,7 @@ declare module 'vue' {
     Button: typeof import('./src/components/atomic/Button.vue')['default']
     Checkbox: typeof import('./src/components/form/Checkbox.vue')['default']
     CheckboxesField: typeof import('./src/components/form/CheckboxesField.vue')['default']
+    Container: typeof import('./src/components/layout/Container.vue')['default']
     CronTab: typeof import('./src/components/repo/settings/CronTab.vue')['default']
     DeployPipelinePopup: typeof import('./src/components/layout/popups/DeployPipelinePopup.vue')['default']
     DocsLink: typeof import('./src/components/atomic/DocsLink.vue')['default']

web/src/assets/locales/en.json

@@ -489,5 +489,6 @@
     "oauth_error": "Error while authenticating against OAuth provider",
     "internal_error": "Some internal error occurred",
     "access_denied": "You are not allowed to login"
-  }
+  },
+  "default": "default"
 }

web/src/components/atomic/Button.vue

@@ -1,6 +1,6 @@
 <template>
   <component
-    :is="to === null ? 'button' : httpLink ? 'a' : 'router-link'"
+    :is="to === undefined ? 'button' : httpLink ? 'a' : 'router-link'"
     v-bind="btnAttrs"
     class="relative flex items-center py-1 px-2 rounded-md border shadow-sm cursor-pointer transition-all duration-150 overflow-hidden disabled:opacity-50 disabled:cursor-not-allowed"
     :class="{
@@ -19,10 +19,9 @@
       <span :class="{ invisible: isLoading }">{{ text }}</span>
       <Icon v-if="endIcon" :name="endIcon" class="ml-2 w-6 h-6" :class="{ invisible: isLoading }" />
       <div
+        v-if="isLoading"
         class="absolute left-0 top-0 right-0 bottom-0 flex items-center justify-center"
         :class="{
-          'opacity-100': isLoading,
-          'opacity-0': !isLoading,
           'bg-wp-control-neutral-200': color === 'gray',
           'bg-wp-control-ok-200': color === 'green',
           'bg-wp-control-info-200': color === 'blue',
@@ -43,22 +42,22 @@ import Icon, { IconNames } from '~/components/atomic/Icon.vue';
 
 const props = withDefaults(
   defineProps<{
-    text: string;
+    text?: string;
     title?: string;
     disabled?: boolean;
-    to: RouteLocationRaw | null;
-    color: 'blue' | 'green' | 'red' | 'gray';
-    startIcon: IconNames | null;
-    endIcon: IconNames | null;
+    to?: RouteLocationRaw;
+    color?: 'blue' | 'green' | 'red' | 'gray';
+    startIcon?: IconNames;
+    endIcon?: IconNames;
     isLoading?: boolean;
   }>(),
   {
-    text: '',
+    text: undefined,
     title: undefined,
-    to: null,
+    to: undefined,
     color: 'gray',
-    startIcon: null,
-    endIcon: null,
+    startIcon: undefined,
+    endIcon: undefined,
   },
 );
 

web/src/components/atomic/IconButton.vue

@@ -32,22 +32,14 @@ import { RouteLocationRaw } from 'vue-router';
 
 import Icon, { IconNames } from '~/components/atomic/Icon.vue';
 
-withDefaults(
 defineProps<{
-    icon: IconNames | null;
+  icon?: IconNames;
   disabled?: boolean;
-    to: RouteLocationRaw | null;
+  to?: RouteLocationRaw;
   isLoading?: boolean;
-    title: string;
+  title?: string;
   href?: string;
-  }>(),
-  {
-    icon: null,
-    to: null,
-    title: undefined,
-    href: '',
-  },
-);
+}>();
 </script>
 
 <style scoped>

web/src/components/form/CheckboxesField.vue

@@ -16,24 +16,17 @@ import { computed, toRef } from 'vue';
 import Checkbox from './Checkbox.vue';
 import { CheckboxOption } from './form.types';
 
-const props = withDefaults(
-  defineProps<{
-    modelValue: CheckboxOption['value'][];
-    options: CheckboxOption[];
-  }>(),
-  {
-    modelValue: () => [],
-    options: undefined,
-  },
-);
-
+const props = defineProps<{
+  modelValue?: CheckboxOption['value'][];
+  options?: CheckboxOption[];
+}>();
 const emit = defineEmits<{
   (event: 'update:modelValue', value: CheckboxOption['value'][]): void;
 }>();
 
 const modelValue = toRef(props, 'modelValue');
 const innerValue = computed({
-  get: () => modelValue.value,
+  get: () => modelValue.value || [],
   set: (value) => {
     emit('update:modelValue', value);
   },

web/src/components/form/SelectField.vue

@@ -15,17 +15,11 @@ import { computed, toRef } from 'vue';
 
 import { SelectOption } from './form.types';
 
-const props = withDefaults(
-  defineProps<{
+const props = defineProps<{
   modelValue: string;
-    placeholder: string;
+  placeholder?: string;
   options: SelectOption[];
-  }>(),
-  {
-    placeholder: '',
-    options: undefined,
-  },
-);
+}>();
 
 const emit = defineEmits<{
   (event: 'update:modelValue', value: string): void;

web/src/components/form/TextField.vue

@@ -24,10 +24,10 @@ import { computed, toRef } from 'vue';
 
 const props = withDefaults(
   defineProps<{
-    modelValue: string;
-    placeholder: string;
-    type: string;
-    lines: number;
+    modelValue?: string;
+    placeholder?: string;
+    type?: string;
+    lines?: number;
     disabled?: boolean;
   }>(),
   {

web/src/components/layout/Container.vue

@@ -5,9 +5,7 @@
 </template>
 
 <script setup lang="ts">
-export interface Props {
+defineProps<{
   fullWidth?: boolean;
-}
-
-defineProps<Props>();
+}>();
 </script>

web/src/components/layout/Panel.vue

@@ -36,15 +36,10 @@ import { computed, ref } from 'vue';
 
 import Icon from '~/components/atomic/Icon.vue';
 
-const props = withDefaults(
-  defineProps<{
+const props = defineProps<{
   title?: string;
   collapsable?: boolean;
-  }>(),
-  {
-    title: '',
-  },
-);
+}>();
 
 /**
  * _collapsed is used to store the internal state of the panel, but is

web/src/components/layout/scaffold/Header.vue

@@ -3,7 +3,7 @@
     class="bg-wp-background-100 border-b-1 border-wp-background-400 dark:border-wp-background-100 dark:bg-wp-background-300 text-wp-text-100"
     :class="{ 'md:px-4': fullWidth }"
   >
-    <FluidContainer :full-width="fullWidth" class="!py-0">
+    <Container :full-width="fullWidth" class="!py-0">
       <div class="flex w-full md:items-center flex-col py-3 gap-2 md:gap-10 md:flex-row md:justify-between">
         <div
           class="flex items-center content-start"
@@ -46,13 +46,13 @@
           <slot name="tabActions" />
         </div>
       </div>
-    </FluidContainer>
+    </Container>
   </header>
 </template>
 
 <script setup lang="ts">
 import TextField from '~/components/form/TextField.vue';
-import FluidContainer from '~/components/layout/FluidContainer.vue';
+import Container from '~/components/layout/Container.vue';
 
 import Tabs from './Tabs.vue';
 

web/src/components/layout/scaffold/Scaffold.vue

@@ -3,7 +3,7 @@
     :go-back="goBack"
     :enable-tabs="enableTabs"
     :search="search"
-    :full-width="fullWidth"
+    :full-width="fullWidthHeader"
     @update:search="(value) => $emit('update:search', value)"
   >
     <template #title><slot name="title" /></template>
@@ -11,48 +11,39 @@
     <template v-if="$slots.tabActions" #tabActions><slot name="tabActions" /></template>
   </Header>
 
-  <FluidContainer v-if="fluidContent">
+  <slot v-if="fluidContent" />
+  <Container v-else>
     <slot />
-  </FluidContainer>
-  <slot v-else />
+  </Container>
 </template>
 
 <script setup lang="ts">
 import { toRef } from 'vue';
 
-import FluidContainer from '~/components/layout/FluidContainer.vue';
+import Container from '~/components/layout/Container.vue';
 import { useTabsProvider } from '~/compositions/useTabs';
 
 import Header from './Header.vue';
 
-export interface Props {
+const props = defineProps<{
   // Header
   goBack?: () => void;
   search?: string;
+  fullWidthHeader?: boolean;
 
   // Tabs
   enableTabs?: boolean;
   disableHashMode?: boolean;
-  activeTab: string;
+  activeTab?: string;
 
   // Content
   fluidContent?: boolean;
-  fullWidth?: boolean;
-}
+}>();
 
-const props = withDefaults(defineProps<Props>(), {
-  goBack: undefined,
-  search: undefined,
-  // eslint-disable-next-line vue/no-boolean-default
-  disableHashMode: false,
-  // eslint-disable-next-line vue/no-boolean-default
-  enableTabs: false,
-  activeTab: '',
-  // eslint-disable-next-line vue/no-boolean-default
-  fluidContent: true,
-});
-
-const emit = defineEmits(['update:activeTab', 'update:search']);
+const emit = defineEmits<{
+  (event: 'update:activeTab', value: string): void;
+  (event: 'update:search', value: string): void;
+}>();
 
 if (props.enableTabs) {
   useTabsProvider({

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

@@ -275,7 +275,7 @@ async function loadLogs() {
   if (loadedStepSlug.value === stepSlug.value) {
     return;
   }
-  loadedStepSlug.value = stepSlug.value;
+
   log.value = undefined;
   logBuffer.value = [];
   ansiUp.value = new AnsiUp();
@@ -294,12 +294,12 @@ async function loadLogs() {
   }
 
   if (isStepFinished(step.value)) {
+    loadedStepSlug.value = stepSlug.value;
     const logs = await apiClient.getLogs(repo.value.id, pipeline.value.number, step.value.id);
     logs?.forEach((line) => writeLog({ index: line.line, text: b64DecodeUnicode(line.data), time: line.time }));
     flushLogs(false);
-  }
-
-  if (isStepRunning(step.value)) {
+  } else if (isStepRunning(step.value)) {
+    loadedStepSlug.value = stepSlug.value;
     stream.value = apiClient.streamLogs(repo.value.id, pipeline.value.number, step.value.id, (line) => {
       writeLog({ index: line.line, text: b64DecodeUnicode(line.data), time: line.time });
       flushLogs(true);
@@ -308,18 +308,22 @@ async function loadLogs() {
 }
 
 onMounted(async () => {
-  loadLogs();
+  await loadLogs();
 });
 
-watch(stepSlug, () => {
-  loadLogs();
+watch(stepSlug, async () => {
+  await loadLogs();
 });
 
-watch(step, (oldStep, newStep) => {
-  if (oldStep && oldStep.name === newStep?.name && oldStep?.end_time !== newStep?.end_time) {
-    if (autoScroll.value) {
+watch(step, async (newStep, oldStep) => {
+  if (oldStep?.name === newStep?.name) {
+    if (oldStep?.end_time !== newStep?.end_time && autoScroll.value) {
       scrollDown();
     }
+
+    if (oldStep?.state !== newStep?.state) {
+      await loadLogs();
+    }
   }
 });
 </script>

web/src/compositions/useTabs.ts

@@ -11,7 +11,7 @@ export function useTabsProvider({
   disableHashMode,
   updateActiveTabProp,
 }: {
-  activeTabProp: Ref<string>;
+  activeTabProp: Ref<string | undefined>;
   updateActiveTabProp: (tab: string) => void;
   disableHashMode: Ref<boolean>;
 }) {

web/src/lib/api/client.ts

@@ -39,53 +39,33 @@ export default class ApiClient {
     this.csrf = csrf;
   }
 
-  private _request(method: string, path: string, data: unknown): Promise<unknown> {
-    const endpoint = `${this.server}${path}`;
-    const xhr = new XMLHttpRequest();
-    xhr.open(method, endpoint, true);
+  private async _request(method: string, path: string, data: unknown): Promise<unknown> {
+    const res = await fetch(`${this.server}${path}`, {
+      method,
+      headers: {
+        ...(method !== 'GET' && this.csrf ? { 'X-CSRF-TOKEN': this.csrf } : {}),
+        ...(this.token ? { Authorization: `Bearer ${this.token}` } : {}),
+      },
+      body: data ? JSON.stringify(data) : undefined,
+    });
 
-    if (this.token) {
-      xhr.setRequestHeader('Authorization', `Bearer ${this.token}`);
-    }
-
-    if (method !== 'GET' && this.csrf) {
-      xhr.setRequestHeader('X-CSRF-TOKEN', this.csrf);
-    }
-
-    return new Promise((resolve, reject) => {
-      xhr.onload = () => {
-        if (xhr.readyState === 4) {
-          if (xhr.status >= 300) {
+    if (!res.ok) {
       const error: ApiError = {
-              status: xhr.status,
-              message: xhr.response,
+        status: res.status,
+        message: res.statusText,
       };
       if (this.onerror) {
         this.onerror(error);
       }
-            reject(error);
-            return;
+      throw new Error(res.statusText);
     }
-          const contentType = xhr.getResponseHeader('Content-Type');
+
+    const contentType = res.headers.get('Content-Type');
     if (contentType && contentType.startsWith('application/json')) {
-            resolve(JSON.parse(xhr.response));
-          } else {
-            resolve(xhr.response);
+      return res.json();
     }
-        }
-      };
 
-      xhr.onerror = (e) => {
-        reject(e);
-      };
-
-      if (data) {
-        xhr.setRequestHeader('Content-Type', 'application/json');
-        xhr.send(JSON.stringify(data));
-      } else {
-        xhr.send();
-      }
-    });
+    return res.text();
   }
 
   _get(path: string) {

web/src/views/repo/RepoBranches.vue

@@ -7,6 +7,7 @@
       :to="{ name: 'repo-branch', params: { branch } }"
     >
       {{ branch }}
+      <Badge v-if="branch === repo?.default_branch" :label="$t('default')" class="ml-auto" />
     </ListItem>
   </div>
 </template>
@@ -14,6 +15,7 @@
 <script lang="ts" setup>
 import { inject, Ref, watch } from 'vue';
 
+import Badge from '~/components/atomic/Badge.vue';
 import ListItem from '~/components/atomic/ListItem.vue';
 import useApiClient from '~/compositions/useApiClient';
 import { usePagination } from '~/compositions/usePaginate';

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

@@ -1,5 +1,5 @@
 <template>
-  <FluidContainer full-width class="flex flex-col flex-grow md:min-h-xs">
+  <Container full-width class="flex flex-col flex-grow md:min-h-xs">
     <div class="flex w-full min-h-0 flex-grow">
       <PipelineStepList
         v-if="pipeline?.workflows?.length || 0 > 0"
@@ -25,7 +25,6 @@
               color="blue"
               :start-icon="forge ?? 'repo'"
               :text="$t('repo.pipeline.protected.review')"
-              :is-loading="isApprovingPipeline"
               :to="pipeline.link_url"
               :title="message"
             />
@@ -57,7 +56,7 @@
         />
       </div>
     </div>
-  </FluidContainer>
+  </Container>
 </template>
 
 <script lang="ts" setup>
@@ -67,7 +66,7 @@ import { useRoute, useRouter } from 'vue-router';
 
 import Button from '~/components/atomic/Button.vue';
 import Icon from '~/components/atomic/Icon.vue';
-import FluidContainer from '~/components/layout/FluidContainer.vue';
+import Container from '~/components/layout/Container.vue';
 import PipelineLog from '~/components/repo/pipeline/PipelineLog.vue';
 import PipelineStepList from '~/components/repo/pipeline/PipelineStepList.vue';
 import useApiClient from '~/compositions/useApiClient';

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

@@ -5,8 +5,8 @@
       enable-tabs
       disable-hash-mode
       :go-back="goBack"
-      :fluid-content="activeTab !== 'tasks'"
-      :full-width="true"
+      :fluid-content="activeTab === 'tasks'"
+      full-width-header
     >
       <template #title>{{ repo.full_name }}</template>