Update the layout and behavior of the auto mode button

src/api/__tests__/arbitraries.ts

@@ -0,0 +1,22 @@
+import { expect, it } from "vitest";
+import fc from "fast-check";
+
+export const fcScheduleQueueItem = fc.record({
+  createdAt: fc.date({ noInvalidDate: true }).map((d) => d.toISOString()),
+  id: fc.integer(),
+  name: fc.string(),
+  script: fc.string(),
+});
+
+if (import.meta.vitest) {
+  it("fcScheduleQueueItem()", () => {
+    fc.assert(
+      fc.property(fcScheduleQueueItem, (v) => {
+        expect(v.createdAt).toBeDefined();
+        expect(v.id).toBeDefined();
+        expect(v.name).toBeDefined();
+        expect(v.script).toBeDefined();
+      }),
+    );
+  });
+}

src/api/__tests__/run-property-test.ts

@@ -4,9 +4,12 @@ import { useQuery, useSubscription } from "@urql/vue";
 import type { UseQueryResponse, UseSubscriptionResponse } from "@urql/vue";
 import fc from "fast-check";
 
-import { mockUseQueryResponse, mockUseSubscriptionResponse } from "@/graphql/tests";
-
-import { fcMockUseQueryResponseArg, fcMockUseSubscriptionResponseArg } from "./fc";
+import {
+  mockUseQueryResponse,
+  mockUseSubscriptionResponse,
+  fcMockUseQueryResponseArg,
+  fcMockUseSubscriptionResponseArg,
+} from "@/graphql/tests";
 
 interface _UseSubscribeXXXReturn<R> {
   data: ComputedRef<R | undefined>;

src/api/__tests__/use-subscriptions.spec.ts

@@ -26,7 +26,7 @@ import { useSubscribeScheduleQueueItems } from "../use-schedule-queue-items-subs
 import { useSubscribeState } from "../use-state-subscription";
 import { useSubscribeTraceIds } from "../use-trace_ids-subscription";
 
-import { fcScheduleQueueItem } from "./fc";
+import { fcScheduleQueueItem } from "./arbitraries";
 import { runPropertyTest } from "./run-property-test";
 
 // Mock functions used in runPropertyTest()

src/components/schedule/auto-mode/auto-mode-button/AutoModeButton.vue

@@ -1,18 +1,18 @@
 <template>
   <VCardActions>
-    <ButtonOff v-if="mode === 'off'"></ButtonOff>
-    <ButtonScheduler v-else-if="mode === 'scheduler'"></ButtonScheduler>
-    <ButtonQueue v-else-if="mode === 'queue'"></ButtonQueue>
-    <ButtonError v-else></ButtonError>
+    <VBtn v-if="loading" loading variant="tonal" color="tertiary"> </VBtn>
+    <ButtonError v-else-if="error" :error="error"></ButtonError>
+    <ButtonAutoMode v-else-if="autoMode"></ButtonAutoMode>
+    <ButtonOff v-else-if="autoMode === false"></ButtonOff>
+    <VBtn v-else variant="tonal" color="error"> Unknown </VBtn>
   </VCardActions>
 </template>
 
 <script setup lang="ts">
-import { useSubscribeScheduleAutoModeMode } from "@/api";
+import { useAutoMode } from "./use-auto-mode";
 
-import ButtonError from "./modes/error/Button.vue";
 import ButtonOff from "./modes/off/Button.vue";
-import ButtonQueue from "./modes/queue/Button.vue";
-import ButtonScheduler from "./modes/scheduler/Button.vue";
-const { data: mode } = await useSubscribeScheduleAutoModeMode();
+import ButtonAutoMode from "./modes/auto-mode/Button.vue";
+import ButtonError from "./modes/error/Button.vue";
+const { autoMode, loading, error } = await useAutoMode();
 </script>

src/components/schedule/auto-mode/auto-mode-button/__tests__/use-auto-mode.spec.ts

@@ -0,0 +1,96 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { ref } from "vue";
+import fc from "fast-check";
+
+import { useSubscribeScheduleAutoModeState } from "@/api";
+import { fcError, fcUndefinedOr } from "@/graphql/tests/arbitraries";
+import { onReady } from "@/utils/on-ready";
+
+import { useAutoMode } from "../use-auto-mode";
+
+vi.mock("@/api", () => ({
+  useSubscribeScheduleAutoModeState: vi.fn(),
+}));
+
+const AUTO_MODE_STATES = [
+  "created",
+  "off",
+  "auto_waiting",
+  "auto_pulling",
+  "auto_running",
+];
+
+const fcAutoModeState = () => fc.constantFrom(...AUTO_MODE_STATES);
+
+const fcOptions = () =>
+  fc.record({
+    autoModeState: fcUndefinedOr(fcAutoModeState()),
+    error: fcUndefinedOr(fcError),
+  });
+
+type Sub = ReturnType<typeof useSubscribeScheduleAutoModeState>;
+
+function createMockSubscription(options: {
+  autoModeState: string | undefined;
+  error: Error | undefined;
+}): Sub {
+  const data = ref<string | undefined>(undefined);
+  const loading = ref(true);
+  const error = ref<Error | undefined>(undefined);
+
+  const ready = (async () => {
+    await Promise.resolve();
+    data.value = options.autoModeState;
+    loading.value = false;
+    error.value = options.error;
+  })();
+
+  const ret = { data, loading, error };
+
+  return onReady(ret, ready) as Sub;
+}
+
+describe("useAutoMode()", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    vi.resetAllMocks();
+  });
+
+  it("Property test", async () => {
+    await fc.assert(
+      fc.asyncProperty(fcOptions(), async (options) => {
+        const sub = createMockSubscription(options);
+        vi.mocked(useSubscribeScheduleAutoModeState).mockReturnValue(sub);
+
+        const { autoMode, pulling, loading, error, then } = useAutoMode();
+
+        expect(loading.value).toBe(true);
+        expect(error.value).toBeUndefined();
+        expect(autoMode.value).toBeUndefined();
+        expect(pulling.value).toBeUndefined();
+
+        await then();
+
+        expect(loading.value).toBe(false);
+        expect(error.value).toBe(options.error);
+        const expectedAutoMode = error.value
+          ? undefined
+          : options.autoModeState
+            ? ["auto_waiting", "auto_pulling", "auto_running"].includes(
+                options.autoModeState,
+              )
+            : undefined;
+        const expectedPulling = error.value
+          ? undefined
+          : options.autoModeState
+            ? options.autoModeState === "auto_pulling"
+            : undefined;
+        expect(autoMode.value).toBe(expectedAutoMode);
+        expect(pulling.value).toBe(expectedPulling);
+      }),
+    );
+  });
+});

src/components/schedule/auto-mode/auto-mode-button/modes/auto-mode/Button.vue

@@ -0,0 +1,50 @@
+<template>
+  <Component :is="menuComponent">
+    <template #activator="{ props }">
+      <VBtn v-bind="props" variant="tonal" color="tertiary">
+        <slot v-if="!mobile">Auto Mode: </slot>{{ mode }}
+        <template #append v-if="pulling">
+          <VProgressCircular indeterminate size="16" width="2" class="ml-1">
+          </VProgressCircular>
+        </template>
+      </VBtn>
+    </template>
+    <div>
+      <DialogScheduler v-if="mode === 'scheduler'" class="dialog"></DialogScheduler>
+      <DialogQueue v-else-if="mode === 'queue'" class="dialog"></DialogQueue>
+      <VCard v-else><VAlert type="error" variant="tonal">Unknown Mode</VAlert></VCard>
+    </div>
+  </Component>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { useDisplay } from "vuetify";
+import { VBottomSheet } from "vuetify/components/VBottomSheet";
+import { VMenu } from "vuetify/components/VMenu";
+
+import { useSubscribeScheduleAutoModeMode } from "@/api";
+
+import { useAutoMode } from "../../use-auto-mode";
+import DialogScheduler from "./scheduler/Dialog.vue";
+import DialogQueue from "./queue/Dialog.vue";
+
+const { mobile } = useDisplay();
+const menuComponent = computed(() => (mobile.value ? VBottomSheet : VMenu));
+
+const { data: mode, then: then1 } = useSubscribeScheduleAutoModeMode();
+const { pulling, then: then2 } = useAutoMode();
+await Promise.all([then1(), then2()]);
+</script>
+
+<style scoped>
+.v-bottom-sheet .dialog {
+  border-radius: 0 !important;
+  padding: 4px 4px 24px 4px;
+}
+
+.v-menu .dialog {
+  width: 290px;
+  padding: 4px;
+}
+</style>

src/components/schedule/auto-mode/auto-mode-button/modes/auto-mode/scheduler/Dialog.vue

@@ -0,0 +1,44 @@
+<template>
+  <VCard>
+    <VCardText>
+      <div class="mb-1">
+        <p class="font-weight-medium">
+          The auto mode currently is <span class="font-italic"> on </span> and loads
+          scripts from the <span class="font-italic"> scheduler </span>.
+        </p>
+        <p class="mt-3">
+          The auto mode automatically loads and runs the next script after each run
+          successfully ends.
+        </p>
+        <p class="mt-3">
+          The auto mode can load scripts from either the
+          <span class="font-italic"> scheduler </span> or the
+          <span class="font-italic"> queue </span>.
+        </p>
+      </div>
+    </VCardText>
+    <VCardActions>
+      <VBtn variant="outlined" class="flex-grow-1" @click="switchToLoadFromQueue">
+        switch to load from queue
+      </VBtn>
+    </VCardActions>
+    <VCardActions>
+      <VBtn variant="outlined" class="flex-grow-1" @click="turnOff">
+        turn off auto mode
+      </VBtn>
+    </VCardActions>
+  </VCard>
+</template>
+
+<script setup lang="ts">
+import { useScheduleAutoModeChangeModeMutation } from "@/graphql/codegen/generated";
+const { executeMutation: changeMode } = useScheduleAutoModeChangeModeMutation();
+
+async function switchToLoadFromQueue() {
+  await changeMode({ mode: "queue" });
+}
+
+async function turnOff() {
+  await changeMode({ mode: "off" });
+}
+</script>

src/components/schedule/auto-mode/auto-mode-button/modes/error/Button.vue

@@ -1,12 +1,39 @@
 <template>
-  <VMenu>
+  <Component :is="menuComponent">
     <template #activator="{ props }">
-      <VBtn v-bind="props" variant="tonal" color="error"> Auto Mode: Unknown </VBtn>
+      <VBtn v-bind="props" variant="tonal" color="error">
+        <VIcon icon="mdi-alert-circle-outline" size="x-large"></VIcon>
+      </VBtn>
     </template>
-    <DialogError></DialogError>
-  </VMenu>
+    <DialogError :error="error"></DialogError>
+  </Component>
 </template>
 
 <script setup lang="ts">
+import { computed } from "vue";
+import { useDisplay } from "vuetify";
+import { VBottomSheet } from "vuetify/components/VBottomSheet";
+import { VMenu } from "vuetify/components/VMenu";
 import DialogError from "./Dialog.vue";
+
+interface Props {
+  error: Error;
+}
+
+defineProps<Props>();
+
+const { mobile } = useDisplay();
+const menuComponent = computed(() => (mobile.value ? VBottomSheet : VMenu));
 </script>
+
+<style scoped>
+.v-bottom-sheet .dialog {
+  border-radius: 0 !important;
+  padding: 4px 4px 24px 4px;
+}
+
+.v-menu .dialog {
+  width: 290px;
+  padding: 4px;
+}
+</style>

src/components/schedule/auto-mode/auto-mode-button/modes/error/Dialog.vue

@@ -7,16 +7,16 @@
         title="Error"
         text="Unable to determine auto mode state."
       >
+        <pre>{{ error }}</pre>
       </VAlert>
     </VCard>
   </div>
 </template>
 
-<script setup lang="ts"></script>
-
-<style scoped>
-:deep(.v-card) {
-  width: 290px;
-  padding: 4px;
+<script setup lang="ts">
+interface Props {
+  error: Error;
 }
-</style>
+
+defineProps<Props>();
+</script>