feat(station): monitor external canisters

Cargo.toml

@@ -36,7 +36,7 @@ byteorder = "1.5"
 canbench-rs = "0.1.1"
 candid = "0.10.3"
 candid_parser = "0.1.3"
-canfund = "0.2.0"
+canfund = "0.4.0"
 cap-std = "3.4.1"
 ciborium = "0.2.2"
 clap = { version = "4.5.7", features = ["derive"] }

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

@@ -188,8 +188,8 @@ const { submit, edited, additionalFieldErrors, fieldsWithErrors, submitting, val
     model,
     submit: async (updatedModel: CanisterCallModel): Promise<void> => {
       try {
-        const methodName = assertAndReturn(updatedModel.methodName, 'Method name is required');
-        const canisterId = assertAndReturn(updatedModel.canisterId, 'Canister ID is required');
+        const methodName = assertAndReturn(updatedModel.methodName, 'Method name');
+        const canisterId = assertAndReturn(updatedModel.canisterId, 'Canister ID');
         const validationMethod =
           updatedModel.validationTarget &&
           variantIs(updatedModel.validationTarget, 'ValidationMethod')

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

@@ -0,0 +1,73 @@
+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('CanisterMonitorDialog', () => {
+  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 nextBtn = wrapper.find('[data-test-id="monitor-dialog-stepper-next"]');
+    await nextBtn.trigger('click');
+
+    const obtainInput = wrapper.findComponent({ name: 'VSelect' });
+    await obtainInput.setValue('StationDefault');
+
+    const saveBtn = wrapper.find('[data-test-id="monitor-dialog-submit"]');
+    await saveBtn.trigger('click');
+
+    await flushPromises();
+
+    expect(monitorMethod).toHaveBeenCalledOnce();
+
+    wrapper.unmount();
+  });
+});

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

@@ -0,0 +1,72 @@
+<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 />
+      <CanisterMonitorForm
+        v-model="monitorModel"
+        :display="{ canisterId: !monitorModel.canisterId }"
+        @submitting="canClose = !$event"
+        @submitted="open = false"
+      >
+      </CanisterMonitorForm>
+    </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, VDialog, VDivider, VToolbar, VToolbarTitle } from 'vuetify/components';
+import { CanisterMonitorModel } from './external-canisters.types';
+import CanisterMonitorForm from '~/components/external-canisters/monitor/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 canClose = ref(true);
+const dialogTitle = computed(() => props.title || i18n.t('external_canisters.monitor.title'));
+
+const buildModel = (): CanisterMonitorModel => ({
+  canisterId: props.canisterId,
+  fundingStrategy: undefined,
+  cycleObtainStrategy: undefined,
+});
+
+const open = computed({
+  get: () => props.open,
+  set: value => emit('update:open', value),
+});
+
+const monitorModel = ref(buildModel()) as Ref<CanisterMonitorModel>;
+</script>

apps/wallet/src/components/external-canisters/external-canisters.types.ts

@@ -3,8 +3,10 @@ import {
   Allow,
   CanisterInstallMode,
   CanisterMethod,
+  CycleObtainStrategyInput,
   ExternalCanisterChangeRequestPolicyRuleInput,
   LogVisibility,
+  MonitorExternalCanisterStrategyInput,
   ValidationMethodResourceTarget,
 } from '~/generated/station/station.did';
 
@@ -74,6 +76,12 @@ export interface CanisterCallReviewContext {
   candidIdl?: string;
 }
 
+export interface CanisterMonitorModel {
+  canisterId?: Principal;
+  fundingStrategy?: MonitorExternalCanisterStrategyInput;
+  cycleObtainStrategy?: CycleObtainStrategyInput;
+}
+
 export interface CanisterSnapshot {
   snapshotId: string;
   totalSize: number;

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

@@ -0,0 +1,18 @@
+import { Principal } from '@dfinity/principal';
+import { describe, expect, it } from 'vitest';
+import { mount } from '~/test.utils.ts';
+import CanisterMonitorForm from '~/components/external-canisters/monitor/CanisterMonitorForm.vue';
+
+describe('CanisterMonitorForm', () => {
+  it('hides the canisterId when display is set to false', () => {
+    const form = mount(CanisterMonitorForm, {
+      props: {
+        modelValue: { canisterId: Principal.anonymous(), fundingStrategy: undefined },
+        display: { canisterId: false },
+      },
+    });
+    const canisterIdInput = form.find('[name="canisterId"]');
+
+    expect(canisterIdInput.exists()).toBe(false);
+  });
+});