feat(wallet): UI for external canister monitoring setup

apps/wallet/src/components/external-canisters/CanisterMonitorDialog.spec.ts

@@ -0,0 +1,67 @@
+import { Principal } from '@dfinity/principal';
+import { describe, expect, it, vi } from 'vitest';
+import { StationService } from '~/services/station.service';
+import { mount } from '~/test.utils';
+import { flushPromises } from '@vue/test-utils';
+import { services } from '~/plugins/services.plugin';
+import CanisterMonitorDialog from '~/components/external-canisters/CanisterMonitorDialog.vue';
+
+vi.mock('~/services/station.service', () => {
+  const mock: Partial<StationService> = {
+    withStationId: vi.fn().mockReturnThis(),
+    monitorExternalCanister: vi.fn().mockImplementation(() => Promise.reject()),
+  };
+
+  return {
+    StationService: vi.fn(() => mock),
+  };
+});
+
+describe('CanisterSetupDialog', () => {
+  it('renders default card open is true', () => {
+    const wrapper = mount(CanisterMonitorDialog, {
+      props: {
+        open: true,
+        canisterId: Principal.fromText('r7inp-6aaaa-aaaaa-aaabq-cai'),
+        attach: true, // disables teleport in VDialog
+      },
+    });
+
+    const dialog = wrapper.findComponent({ name: 'VDialog' });
+    expect(dialog.exists()).toBe(true);
+
+    const container = dialog.find('[data-test-id="canister-monitor-card"]');
+
+    expect(container).not.toBeNull();
+
+    wrapper.unmount();
+  });
+
+  it('triggers submit when on click of save button', async () => {
+    const monitorMethod = vi
+      .spyOn(services().station, 'monitorExternalCanister')
+      .mockImplementation(() => Promise.reject());
+
+    const wrapper = mount(CanisterMonitorDialog, {
+      props: {
+        open: true,
+        canisterId: Principal.fromText('r7inp-6aaaa-aaaaa-aaabq-cai'),
+        attach: true, // disables teleport in VDialog
+      },
+    });
+
+    const strategyInput = wrapper.findComponent({ name: 'VSelect' });
+    await strategyInput.setValue('Always');
+
+    await flushPromises();
+
+    const saveBtn = wrapper.find('[data-test-id="canister-monitor-save-button"]');
+    await saveBtn.trigger('click');
+
+    await flushPromises();
+
+    expect(monitorMethod).toHaveBeenCalledOnce();
+
+    wrapper.unmount();
+  });
+});

apps/wallet/src/components/external-canisters/CanisterMonitorDialog.vue

@@ -0,0 +1,141 @@
+<template>
+  <VDialog
+    v-bind="$attrs"
+    v-model="open"
+    :persistent="!canClose"
+    transition="dialog-bottom-transition"
+    scrollable
+    :max-width="props.dialogMaxWidth"
+  >
+    <VCard data-test-id="canister-monitor-card">
+      <VToolbar color="background">
+        <VToolbarTitle>
+          {{ dialogTitle }}
+        </VToolbarTitle>
+        <VBtn :disabled="!canClose" :icon="mdiClose" @click="open = false" />
+      </VToolbar>
+      <VDivider />
+
+      <VCardText>
+        <CanisterMonitorForm
+          v-model="monitorModel"
+          v-model:trigger-submit="triggerFormSubmit"
+          :display="{ canisterId: props.canisterId === undefined }"
+          @submit="submit"
+          @valid="valid = $event"
+        />
+      </VCardText>
+      <VDivider />
+      <VCardActions class="pa-3">
+        <VSpacer />
+        <VBtn
+          :disabled="!canSave"
+          :loading="submitting"
+          color="primary"
+          variant="elevated"
+          data-test-id="canister-monitor-save-button"
+          @click="triggerFormSubmit = true"
+        >
+          {{ $t('external_canisters.start_monitoring') }}
+        </VBtn>
+      </VCardActions>
+    </VCard>
+  </VDialog>
+</template>
+<script lang="ts" setup>
+import { Principal } from '@dfinity/principal';
+import { mdiClose } from '@mdi/js';
+import { Ref, computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import {
+  VBtn,
+  VCard,
+  VCardActions,
+  VCardText,
+  VDialog,
+  VDivider,
+  VSpacer,
+  VToolbar,
+  VToolbarTitle,
+} from 'vuetify/components';
+import {
+  useOnFailedOperation,
+  useOnSuccessfulOperation,
+} from '~/composables/notifications.composable';
+import logger from '~/core/logger.core';
+import { useStationStore } from '~/stores/station.store';
+import { assertAndReturn } from '~/utils/helper.utils';
+import { CanisterMonitorModel } from './external-canisters.types';
+import CanisterMonitorForm from '~/components/external-canisters/CanisterMonitorForm.vue';
+
+const props = withDefaults(
+  defineProps<{
+    open?: boolean;
+    canisterId?: Principal;
+    dialogMaxWidth?: number;
+    title?: string;
+  }>(),
+  {
+    open: false,
+    canisterId: undefined,
+    dialogMaxWidth: 800,
+    title: undefined,
+  },
+);
+
+const emit = defineEmits<{
+  (event: 'update:open', payload: boolean): void;
+}>();
+
+const i18n = useI18n();
+const valid = ref(true);
+const station = useStationStore();
+const submitting = ref(false);
+const canClose = computed(() => !submitting.value);
+const dialogTitle = computed(() => props.title || i18n.t('external_canisters.monitor.title'));
+
+const buildModel = (): CanisterMonitorModel => ({
+  canisterId: props.canisterId,
+  strategy: undefined,
+});
+
+const open = computed({
+  get: () => props.open,
+  set: value => {
+    if (!value) {
+      monitorModel.value = buildModel();
+    }
+
+    emit('update:open', value);
+  },
+});
+
+const triggerFormSubmit = ref(false);
+const canSave = computed(() => valid.value);
+const monitorModel = ref(buildModel()) as Ref<CanisterMonitorModel>;
+
+const submit = async (input: CanisterMonitorModel) => {
+  try {
+    submitting.value = true;
+
+    const request = await station.service.monitorExternalCanister({
+      canister_id: assertAndReturn(input.canisterId, 'canisterId'),
+      kind: {
+        Start: {
+          strategy: assertAndReturn(input.strategy, 'strategy'),
+        },
+      },
+    });
+
+    useOnSuccessfulOperation(request);
+
+    open.value = false;
+  } catch (error) {
+    logger.error('Failed to submit monitoring request', error);
+
+    useOnFailedOperation();
+  } finally {
+    submitting.value = false;
+  }
+};
+</script>

apps/wallet/src/components/external-canisters/CanisterMonitorForm.spec.ts

@@ -0,0 +1,46 @@
+import { Principal } from '@dfinity/principal';
+import { describe, expect, it } from 'vitest';
+import { mount } from '~/test.utils';
+import { flushPromises } from '@vue/test-utils';
+import CanisterMonitorForm from '~/components/external-canisters/CanisterMonitorForm.vue';
+
+describe('CanisterMonitorForm', () => {
+  it('hides the canisterId when display is set to false', () => {
+    const form = mount(CanisterMonitorForm, {
+      props: {
+        modelValue: { canisterId: Principal.anonymous(), strategy: undefined },
+        display: { canisterId: false },
+      },
+    });
+    const canisterIdInput = form.find('[name="canisterId"]');
+
+    expect(canisterIdInput.exists()).toBe(false);
+  });
+
+  it('triggers submit when Always strategy input triggers keydown.enter', async () => {
+    const form = mount(CanisterMonitorForm, {
+      props: {
+        modelValue: {
+          canisterId: Principal.fromText('r7inp-6aaaa-aaaaa-aaabq-cai'),
+          strategy: { Always: BigInt(1_000_000_000_000) },
+        },
+      },
+    });
+
+    const cyclesInput = form.find('[name="always_fund_cycles"]');
+
+    await cyclesInput.trigger('keydown.enter');
+    await flushPromises();
+
+    const isValidEvents = form.emitted('valid') ?? [];
+    const submitEvents = form.emitted('submit') ?? [];
+
+    expect(isValidEvents.pop()).toEqual([true]);
+    expect(submitEvents.pop()).toEqual([
+      {
+        canisterId: Principal.fromText('r7inp-6aaaa-aaaaa-aaabq-cai'),
+        strategy: { Always: BigInt(1_000_000_000_000) },
+      },
+    ]);
+  });
+});