add org ui

web/src/components/org/settings/OrgVariablesTab.vue

@@ -0,0 +1,112 @@
+<template>
+  <Settings
+    :title="$t('variables.variables')"
+    :desc="$t('org.settings.variables.desc')"
+    docs-url="docs/usage/variables"
+  >
+    <template #titleActions>
+      <Button
+        v-if="selectedVariable"
+        :text="$t('variables.show')"
+        start-icon="back"
+        @click="selectedVariable = undefined"
+      />
+      <Button v-else :text="$t('variables.add')" start-icon="plus" @click="showAddVariable" />
+    </template>
+
+    <VariableList
+      v-if="!selectedVariable"
+      v-model="variables"
+      :is-deleting="isDeleting"
+      @edit="editVariable"
+      @delete="deleteVariable"
+    />
+
+    <VariableEdit
+      v-else
+      v-model="selectedVariable"
+      :is-saving="isSaving"
+      @save="createVariable"
+      @cancel="selectedVariable = undefined"
+    />
+  </Settings>
+</template>
+
+<script lang="ts" setup>
+import { cloneDeep } from 'lodash';
+import { computed, inject, ref, type Ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import Button from '~/components/atomic/Button.vue';
+import Settings from '~/components/layout/Settings.vue';
+import VariableEdit from '~/components/variables/VariableEdit.vue';
+import VariableList from '~/components/variables/VariableList.vue';
+import useApiClient from '~/compositions/useApiClient';
+import { useAsyncAction } from '~/compositions/useAsyncAction';
+import useNotifications from '~/compositions/useNotifications';
+import { usePagination } from '~/compositions/usePaginate';
+import type { Org, Variable } from '~/lib/api/types';
+
+const emptyVariable: Partial<Variable> = {
+  name: '',
+  value: '',
+};
+
+const apiClient = useApiClient();
+const notifications = useNotifications();
+const i18n = useI18n();
+
+const org = inject<Ref<Org>>('org');
+const selectedVariable = ref<Partial<Variable>>();
+const isEditingVariable = computed(() => !!selectedVariable.value?.id);
+
+async function loadVariables(page: number): Promise<Variable[] | null> {
+  if (!org?.value) {
+    throw new Error("Unexpected: Can't load org");
+  }
+
+  return apiClient.getOrgVariableList(org.value.id, { page });
+}
+
+const { resetPage, data: variables } = usePagination(loadVariables, () => !selectedVariable.value);
+
+const { doSubmit: createVariable, isLoading: isSaving } = useAsyncAction(async () => {
+  if (!org?.value) {
+    throw new Error("Unexpected: Can't load org");
+  }
+
+  if (!selectedVariable.value) {
+    throw new Error("Unexpected: Can't get variable");
+  }
+
+  if (isEditingVariable.value) {
+    await apiClient.updateOrgVariable(org.value.id, selectedVariable.value);
+  } else {
+    await apiClient.createOrgVariable(org.value.id, selectedVariable.value);
+  }
+  notifications.notify({
+    title: isEditingVariable.value ? i18n.t('variables.saved') : i18n.t('variables.created'),
+    type: 'success',
+  });
+  selectedVariable.value = undefined;
+  resetPage();
+});
+
+const { doSubmit: deleteVariable, isLoading: isDeleting } = useAsyncAction(async (_variable: Variable) => {
+  if (!org?.value) {
+    throw new Error("Unexpected: Can't load org");
+  }
+
+  await apiClient.deleteOrgVariable(org.value.id, _variable.name);
+  notifications.notify({ title: i18n.t('variables.deleted'), type: 'success' });
+  resetPage();
+});
+
+function editVariable(variable: Variable) {
+  selectedVariable.value = cloneDeep(variable);
+}
+
+function showAddVariable() {
+  selectedVariable.value = cloneDeep(emptyVariable);
+}
+</script>

web/src/views/org/OrgSettings.vue

@@ -11,6 +11,10 @@
       </span>
     </template>
 
+    <Tab id="variables" :title="$t('variables.variables')">
+      <OrgVariablesTab />
+    </Tab>
+
     <Tab id="secrets" :title="$t('secrets.secrets')">
       <OrgSecretsTab />
     </Tab>
@@ -30,6 +34,7 @@ import Scaffold from '~/components/layout/scaffold/Scaffold.vue';
 import Tab from '~/components/layout/scaffold/Tab.vue';
 import OrgRegistriesTab from '~/components/org/settings/OrgRegistriesTab.vue';
 import OrgSecretsTab from '~/components/org/settings/OrgSecretsTab.vue';
+import OrgVariablesTab from '~/components/org/settings/OrgVariablesTab.vue';
 import { inject } from '~/compositions/useInjectProvide';
 import useNotifications from '~/compositions/useNotifications';
 import { useRouteBack } from '~/compositions/useRouteBack';