Use Vue setup directive

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

@@ -45,9 +45,9 @@
   </Panel>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import { cloneDeep } from 'lodash';
-import { computed, defineComponent, ref } from 'vue';
+import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import Button from '~/components/atomic/Button.vue';
@@ -69,74 +69,48 @@ const emptySecret = {
   event: [WebhookEvents.Push],
 };
 
-export default defineComponent({
-  name: 'AdminSecretsTab',
-
-  components: {
-    Button,
-    Panel,
-    DocsLink,
-    SecretList,
-    SecretEdit,
-    Warning,
-  },
-
-  setup() {
-    const apiClient = useApiClient();
-    const notifications = useNotifications();
-    const i18n = useI18n();
-
-    const selectedSecret = ref<Partial<Secret>>();
-    const isEditingSecret = computed(() => !!selectedSecret.value?.id);
-
-    async function loadSecrets(page: number): Promise<Secret[] | null> {
-      return apiClient.getGlobalSecretList(page);
-    }
-
-    const { resetPage, data: secrets } = usePagination(loadSecrets, () => !selectedSecret.value);
-
-    const { doSubmit: createSecret, isLoading: isSaving } = useAsyncAction(async () => {
-      if (!selectedSecret.value) {
-        throw new Error("Unexpected: Can't get secret");
-      }
-
-      if (isEditingSecret.value) {
-        await apiClient.updateGlobalSecret(selectedSecret.value);
-      } else {
-        await apiClient.createGlobalSecret(selectedSecret.value);
-      }
-      notifications.notify({
-        title: i18n.t(isEditingSecret.value ? 'admin.settings.secrets.saved' : 'admin.settings.secrets.created'),
-        type: 'success',
-      });
-      selectedSecret.value = undefined;
-      resetPage();
-    });
-
-    const { doSubmit: deleteSecret, isLoading: isDeleting } = useAsyncAction(async (_secret: Secret) => {
-      await apiClient.deleteGlobalSecret(_secret.name);
-      notifications.notify({ title: i18n.t('admin.settings.secrets.deleted'), type: 'success' });
-      resetPage();
-    });
+const apiClient = useApiClient();
+const notifications = useNotifications();
+const i18n = useI18n();
+
+const selectedSecret = ref<Partial<Secret>>();
+const isEditingSecret = computed(() => !!selectedSecret.value?.id);
+
+async function loadSecrets(page: number): Promise<Secret[] | null> {
+  return apiClient.getGlobalSecretList(page);
+}
+
+const { resetPage, data: secrets } = usePagination(loadSecrets, () => !selectedSecret.value);
+
+const { doSubmit: createSecret, isLoading: isSaving } = useAsyncAction(async () => {
+  if (!selectedSecret.value) {
+    throw new Error("Unexpected: Can't get secret");
+  }
+
+  if (isEditingSecret.value) {
+    await apiClient.updateGlobalSecret(selectedSecret.value);
+  } else {
+    await apiClient.createGlobalSecret(selectedSecret.value);
+  }
+  notifications.notify({
+    title: i18n.t(isEditingSecret.value ? 'admin.settings.secrets.saved' : 'admin.settings.secrets.created'),
+    type: 'success',
+  });
+  selectedSecret.value = undefined;
+  resetPage();
+});
 
-    function editSecret(secret: Secret) {
-      selectedSecret.value = cloneDeep(secret);
-    }
+const { doSubmit: deleteSecret, isLoading: isDeleting } = useAsyncAction(async (_secret: Secret) => {
+  await apiClient.deleteGlobalSecret(_secret.name);
+  notifications.notify({ title: i18n.t('admin.settings.secrets.deleted'), type: 'success' });
+  resetPage();
+});
 
-    function showAddSecret() {
-      selectedSecret.value = cloneDeep(emptySecret);
-    }
+function editSecret(secret: Secret) {
+  selectedSecret.value = cloneDeep(secret);
+}
 
-    return {
-      selectedSecret,
-      secrets,
-      isDeleting,
-      isSaving,
-      showAddSecret,
-      createSecret,
-      editSecret,
-      deleteSecret,
-    };
-  },
-});
+function showAddSecret() {
+  selectedSecret.value = cloneDeep(emptySecret);
+}
 </script>

web/src/components/atomic/Button.vue

@@ -35,88 +35,59 @@
   </button>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, PropType } from 'vue';
+<script lang="ts" setup>
+import { computed, useAttrs } from 'vue';
 import { RouteLocationRaw, useRouter } from 'vue-router';
 
 import Icon, { IconNames } from '~/components/atomic/Icon.vue';
 
-export default defineComponent({
-  name: 'Button',
-
-  components: { Icon },
-
-  props: {
-    text: {
-      type: String,
-      default: null,
-    },
-
-    title: {
-      type: String,
-      default: null,
-    },
-
-    disabled: {
-      type: Boolean,
-      required: false,
-    },
-
-    to: {
-      type: [String, Object, null] as PropType<RouteLocationRaw | null>,
-      default: null,
-    },
-
-    color: {
-      type: String as PropType<'blue' | 'green' | 'red' | 'gray'>,
-      default: 'gray',
-    },
-
-    startIcon: {
-      type: String as PropType<IconNames | null>,
-      default: null,
-    },
-
-    endIcon: {
-      type: String as PropType<IconNames | null>,
-      default: null,
-    },
-
-    isLoading: {
-      type: Boolean,
-    },
-  },
-
-  setup(props, { attrs }) {
-    const router = useRouter();
-
-    async function doClick() {
-      if (props.isLoading) {
-        return;
-      }
-
-      if (!props.to) {
-        return;
-      }
-
-      if (typeof props.to === 'string' && props.to.startsWith('http')) {
-        window.location.href = props.to;
-        return;
-      }
-
-      await router.push(props.to);
-    }
-
-    const passedClasses = computed(() => {
-      const classes: Record<string, boolean> = {};
-      const origClass = (attrs.class as string) || '';
-      origClass.split(' ').forEach((c) => {
-        classes[c] = true;
-      });
-      return classes;
-    });
-
-    return { doClick, passedClasses };
+const props = withDefaults(
+  defineProps<{
+    text: string;
+    title?: string;
+    disabled?: boolean;
+    to: RouteLocationRaw | null;
+    color: 'blue' | 'green' | 'red' | 'gray';
+    startIcon: IconNames | null;
+    endIcon: IconNames | null;
+    isLoading?: boolean;
+  }>(),
+  {
+    text: '',
+    title: undefined,
+    to: null,
+    color: 'gray',
+    startIcon: null,
+    endIcon: null,
   },
+);
+
+const router = useRouter();
+
+async function doClick() {
+  if (props.isLoading) {
+    return;
+  }
+
+  if (!props.to) {
+    return;
+  }
+
+  if (typeof props.to === 'string' && props.to.startsWith('http')) {
+    window.location.href = props.to;
+    return;
+  }
+
+  await router.push(props.to);
+}
+
+const attrs = useAttrs();
+const passedClasses = computed(() => {
+  const classes: Record<string, boolean> = {};
+  const origClass = (attrs.class as string) || '';
+  origClass.split(' ').forEach((c) => {
+    classes[c] = true;
+  });
+  return classes;
 });
 </script>

web/src/components/atomic/IconButton.vue

@@ -1,7 +1,7 @@
 <template>
   <router-link v-if="to" :to="to" :title="title" :aria-label="title" class="icon-button">
     <slot>
-      <Icon :name="icon" />
+      <Icon v-if="icon" :name="icon" />
     </slot>
   </router-link>
   <a
@@ -14,61 +14,40 @@
     rel="noopener noreferrer"
   >
     <slot>
-      <Icon :name="icon" />
+      <Icon v-if="icon" :name="icon" />
     </slot>
   </a>
   <button v-else :disabled="disabled" class="icon-button" type="button" :title="title" :aria-label="title">
     <slot>
-      <Icon :name="icon" />
+      <Icon v-if="icon" :name="icon" />
     </slot>
     <div v-if="isLoading" class="absolute left-0 top-0 right-0 bottom-0 flex items-center justify-center">
       <Icon name="loading" class="animate-spin" />
     </div>
   </button>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType } from 'vue';
+<script lang="ts" setup>
 import { RouteLocationRaw } from 'vue-router';
 
 import Icon, { IconNames } from '~/components/atomic/Icon.vue';
 
-export default defineComponent({
-  name: 'IconButton',
-
-  components: { Icon },
-
-  props: {
-    icon: {
-      type: String as PropType<IconNames>,
-      default: '',
-    },
-
-    disabled: {
-      type: Boolean,
-      required: false,
-    },
-
-    to: {
-      type: [String, Object, null] as PropType<RouteLocationRaw | null>,
-      default: null,
-    },
-
-    isLoading: {
-      type: Boolean,
-    },
-
-    title: {
-      type: String,
-      required: true,
-    },
-
-    href: {
-      type: String,
-      default: '',
-    },
+withDefaults(
+  defineProps<{
+    icon: IconNames | null;
+    disabled?: boolean;
+    to: RouteLocationRaw | null;
+    isLoading?: boolean;
+    title: string;
+    href?: string;
+  }>(),
+  {
+    icon: null,
+    to: null,
+    title: undefined,
+    href: '',
   },
-});
+);
 </script>
 
 <style scoped>

web/src/components/atomic/Warning.vue

@@ -6,17 +6,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  name: 'Warning',
-
-  props: {
-    text: {
-      type: String,
-      required: true,
-    },
-  },
-});
+<script lang="ts" setup>
+defineProps<{
+  text: string;
+}>();
 </script>