UI: Convert images page to TypeScript

Signed-off-by: Mark Yen <mark.yen@suse.com>

Author: mook-as

pkg/rancher-desktop/entry/store.ts

@@ -1,4 +1,4 @@
-import { createStore, mapGetters, mapState, ModuleTree, Plugin } from 'vuex';
+import { createStore, mapActions, mapGetters, mapMutations, mapState, ModuleTree, Plugin } from 'vuex';
 
 import * as ActionMenu from '../store/action-menu';
 import * as ApplicationSettings from '../store/applicationSettings';
@@ -95,3 +95,60 @@ export function mapTypedState
 export function mapTypedState(namespace: string, arg: any) {
   return mapState(namespace, arg);
 }
+
+/**
+ * mapTypedMutations is a wrapper around mapMutations that is aware of the types
+ * of the Vuex stores we have available, and returns the correctly typed values.
+ * @see https://vuex.vuejs.org/guide/mutations.html#committing-mutations-in-components
+ */
+// mapTypedMutations('namespace', ['mutation', 'mutation'])
+export function mapTypedMutations
+<
+  N extends keyof Modules,
+  M extends Modules[N] extends { mutations: any } ? Modules[N]['mutations'] : never,
+  K extends keyof M,
+>(namespace: N, keys: K[]): { [key in K]: (payload: Parameters<M[key]>[1]) => ReturnType<M[key]> };
+// mapTypedMutations('namespace', {key: 'name', key: (state) => (state.key)})
+export function mapTypedMutations
+<
+  N extends keyof Modules,
+  M extends Modules[N] extends { mutations: any } ? Modules[N]['mutations'] : never,
+  K extends keyof M,
+  G extends Record<string, K>,
+>(namespace: N, mappings: G): {
+  [key in keyof G]: (payload: Parameters<M[G[key]]>[1]) => ReturnType<M[G[key]]>;
+};
+// Actual implementation defers to mapState
+export function mapTypedMutations(namespace: string, arg: any) {
+  return mapMutations(namespace, arg);
+}
+
+/**
+ * mapTypedActions is a wrapper around mapActions that is aware of the types
+ * of the Vuex stores we have available, and returns the correctly typed values.
+ * @see https://vuex.vuejs.org/guide/actions.html#dispatching-actions-in-components
+ */
+export function mapTypedActions
+<
+  N extends keyof Modules,
+  M extends Modules[N] extends { actions: any } ? Modules[N]['actions'] : never,
+  K extends keyof M,
+>(namespace: N, keys: K[]): {
+  [key in K]: Parameters<M[key]> extends [state: any]
+    ? () => Promise<Awaited<ReturnType<M[key]>>> // no arguments
+    : (payload: Parameters<M[key]>[1]) => Promise<Awaited<ReturnType<M[key]>>>
+};
+export function mapTypedActions
+<
+  N extends keyof Modules,
+  M extends Modules[N] extends { actions: any } ? Modules[N]['actions'] : never,
+  K extends keyof M,
+  G extends Record<string, K>,
+>(namespace: N, mappings: G): {
+  [key in keyof G]: Parameters<M[G[key]]> extends [state: any]
+    ? () => Promise<Awaited<ReturnType<M[G[key]]>>> // no arguments
+    : (payload: Parameters<M[G[key]]>[1]) => Promise<Awaited<ReturnType<M[G[key]]>>>;
+};
+export function mapTypedActions(namespace: string, arg: any) {
+  return mapActions(namespace, arg) as any;
+}

pkg/rancher-desktop/pages/Images.vue

@@ -17,92 +17,90 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 
 import _ from 'lodash';
-import { mapGetters } from 'vuex';
+import { defineComponent } from 'vue';
 
 import { State as K8sState } from '@pkg/backend/backend';
 import Images from '@pkg/components/Images.vue';
 import { defaultSettings } from '@pkg/config/settings';
+import { mapTypedActions, mapTypedGetters, mapTypedMutations, mapTypedState } from '@pkg/entry/store';
+import { IpcRendererEvents } from '@pkg/typings/electron-ipc';
 import { ipcRenderer } from '@pkg/utils/ipcRenderer';
 
-const ImageMangerStates = Object.freeze({
-  UNREADY: 'IMAGE_MANAGER_UNREADY',
-  READY:   'READY',
-});
+type Image = Parameters<IpcRendererEvents['images-changed']>[0][number];
+
+enum ImageManagerStates {
+  UNREADY = 'IMAGE_MANAGER_UNREADY',
+  READY = 'READY',
+}
 
-export default {
+export default defineComponent({
   components: { Images },
   data() {
     return {
       settings:           defaultSettings,
-      images:             [],
-      imageNamespaces:    [],
+      images:             [] as Image[],
+      imageNamespaces:    [] as string[],
       supportsNamespaces: true,
     };
   },
 
   computed: {
     state() {
-      if (window.imagesListMock) {
+      if ((window as any).imagesListMock) {
         // Override for screenshots
-        return ImageMangerStates.READY;
+        return ImageManagerStates.READY;
       }
 
       if (![K8sState.STARTED, K8sState.DISABLED].includes(this.k8sState)) {
-        return ImageMangerStates.UNREADY;
+        return ImageManagerStates.UNREADY;
       }
 
-      return this.imageManagerState ? ImageMangerStates.READY : ImageMangerStates.UNREADY;
+      return this.imageManagerState ? ImageManagerStates.READY : ImageManagerStates.UNREADY;
     },
-    rancherImages() {
+    rancherImages(): string[] {
       return this.images
-        .filter(image => image.imageName.startsWith('rancher/'))
-        .map(image => image.imageName);
+        .map(image => image.imageName)
+        .filter(name => name.startsWith('rancher/'));
     },
-    installedExtensionImages() {
+    installedExtensionImages(): string[] {
       return this.installedExtensions.map(image => image.id);
     },
-    protectedImages() {
+    protectedImages(): string[] {
       return [
         'moby/buildkit',
         'ghcr.io/rancher-sandbox/rancher-desktop/rdx-proxy',
         ...this.rancherImages,
         ...this.installedExtensionImages,
       ];
     },
-    ...mapGetters('k8sManager', { k8sState: 'getK8sState' }),
-    ...mapGetters('imageManager', { imageManagerState: 'getImageManagerState' }),
-    ...mapGetters('extensions', ['installedExtensions']),
+    ...mapTypedState('imageManager', ['imageManagerState']),
+    ...mapTypedGetters('k8sManager', { k8sState: 'getK8sState' }),
+    ...mapTypedGetters('extensions', ['installedExtensions']),
   },
 
   watch: {
     state: {
-      handler(state) {
-        this.$store.dispatch(
-          'page/setHeader',
-          { title: this.t('images.title') },
-        );
+      handler(state: string) {
+        this.setHeader({ title: this.t('images.title') });
 
-        if (!state || state === ImageMangerStates.UNREADY) {
+        if (!state || state === ImageManagerStates.UNREADY) {
           return;
         }
 
-        this.$store.dispatch(
-          'page/setAction',
-          { action: 'ImagesButtonAdd' },
-        );
+        this.setAction({ action: 'ImagesButtonAdd' });
       },
       immediate: true,
     },
   },
 
   mounted() {
     ipcRenderer.on('images-changed', async(event, images) => {
-      if (window.imagesListMock) {
+      if ((window as any).imagesListMock) {
         // Override for screenshots
-        images = await window.imagesListMock();
+        images = await (window as any).imagesListMock();
       }
       if (_.isEqual(images, this.images)) {
         return;
@@ -118,47 +116,49 @@ export default {
       }
     });
 
-    ipcRenderer.on('images-check-state', (event, state) => {
-      this.$store.dispatch('imageManager/setImageManagerState', state);
+    ipcRenderer.on('images-check-state', (event, state: any) => {
+      this.setImageManagerState(state);
     });
 
-    ipcRenderer.invoke('images-check-state').then((state) => {
-      this.$store.dispatch('imageManager/setImageManagerState', state);
+    ipcRenderer.invoke('images-check-state').then((state: any) => {
+      this.setImageManagerState(state);
     });
 
-    ipcRenderer.on('settings-update', (event, settings) => {
+    ipcRenderer.on('settings-update', (event, settings: any) => {
       // TODO: put in a status bar
       this.$data.settings = settings;
       this.checkSelectedNamespace();
     });
 
     (async() => {
-      this.$data.images = await ipcRenderer.invoke('images-mounted', true);
+      this.images = await ipcRenderer.invoke('images-mounted', true);
     })();
 
-    ipcRenderer.on('images-namespaces', (event, namespaces) => {
+    ipcRenderer.on('images-namespaces', (event, namespaces: string[]) => {
       // TODO: Use a specific message to indicate whether or not messages are supported.
-      this.$data.imageNamespaces = namespaces;
-      this.$data.supportsNamespaces = namespaces.length > 0;
+      this.imageNamespaces = namespaces;
+      this.supportsNamespaces = namespaces.length > 0;
       this.checkSelectedNamespace();
     });
     ipcRenderer.send('images-namespaces-read');
-    ipcRenderer.on('settings-read', (event, settings) => {
-      this.$data.settings = settings;
+    ipcRenderer.on('settings-read', (event, settings: any) => {
+      this.settings = settings;
     });
     ipcRenderer.send('settings-read');
 
     ipcRenderer.on('extensions/changed', this.fetchExtensions);
-    this.$store.dispatch('extensions/fetch');
+    this.fetchExtensions();
   },
   beforeUnmount() {
     ipcRenderer.invoke('images-mounted', false);
-    ipcRenderer.removeAllListeners('images-mounted');
     ipcRenderer.removeAllListeners('images-changed');
     ipcRenderer.removeListener('extensions/changed', this.fetchExtensions);
   },
 
   methods: {
+    ...mapTypedActions('extensions', { fetchExtensions: 'fetch' }),
+    ...mapTypedActions('page', ['setAction', 'setHeader']),
+    ...mapTypedMutations('imageManager', { setImageManagerState: 'SET_IMAGE_MANAGER_STATE' }),
     checkSelectedNamespace() {
       if (!this.supportsNamespaces || this.imageNamespaces.length === 0) {
         // Nothing to verify yet
@@ -171,21 +171,18 @@ export default {
           { images: { namespace: defaultNamespace } } );
       }
     },
-    onShowAllImagesChanged(value) {
+    onShowAllImagesChanged(value: boolean) {
       if (value !== this.settings.images.showAll) {
         ipcRenderer.invoke('settings-write',
           { images: { showAll: value } } );
       }
     },
-    onChangeNamespace(value) {
+    onChangeNamespace(value: string) {
       if (value !== this.settings.images.namespace) {
         ipcRenderer.invoke('settings-write',
           { images: { namespace: value } } );
       }
     },
-    fetchExtensions() {
-      this.$store.dispatch('extensions/fetch');
-    },
   },
-};
+});
 </script>

pkg/rancher-desktop/store/imageManager.js

@@ -0,0 +1,27 @@
+import { GetterTree, MutationTree } from 'vuex';
+
+import { ActionTree, MutationsType } from './ts-helpers';
+
+interface ImageManagerState {
+  imageManagerState: boolean;
+}
+
+export const state: () => ImageManagerState = () => ({ imageManagerState: false });
+
+export const mutations = {
+  SET_IMAGE_MANAGER_STATE(state: ImageManagerState, imageManagerState: boolean) {
+    state.imageManagerState = imageManagerState;
+  },
+} satisfies Partial<MutationsType<ImageManagerState>> & MutationTree<ImageManagerState>;
+
+export const actions = {
+  setImageManagerState({ commit }, imageManagerState: boolean) {
+    commit('SET_IMAGE_MANAGER_STATE', imageManagerState);
+  },
+} satisfies ActionTree<ImageManagerState, any, typeof mutations>;
+
+export const getters = {
+  getImageManagerState({ imageManagerState }: ImageManagerState) {
+    return imageManagerState;
+  },
+} satisfies GetterTree<ImageManagerState, any>;

pkg/rancher-desktop/store/imageManager.ts

@@ -127,7 +127,7 @@ export interface IpcMainInvokeEvents {
   'k8s-progress':              () => Readonly<{ current: number, max: number, description?: string, transitionTime?: Date }>;
 
   // #region main/imageEvents
-  'images-mounted':     (mounted: boolean) => { imageName: string, tag: string, imageID: string, size: string }[];
+  'images-mounted':     (mounted: boolean) => (import('@pkg/backend/images/imageProcessor').imageType)[];
   'images-check-state': () => boolean;
   // #endregion