Merge pull request #3676 from torchiaf/fix/help-button-shortcut-3

Preferences, Help Shortcuts
rancher-sandbox · Jan 12, 2023 · ec34016 · ec34016
2 parents f78f0b9 + dc9a930
commit ec34016
Show file tree

Hide file tree

Showing 12 changed files with 100 additions and 87 deletions.
diff --git a/background.ts b/background.ts
@@ -13,6 +13,7 @@ import { getImageProcessor } from '@pkg/backend/images/imageFactory';
 import { ImageProcessor } from '@pkg/backend/images/imageProcessor';
 import * as K8s from '@pkg/backend/k8s';
 import { Steve } from '@pkg/backend/steve';
+import { Help } from '@pkg/config/help';
 import * as settings from '@pkg/config/settings';
 import { TransientSettings } from '@pkg/config/transientSettings';
 import { IntegrationManager, getIntegrationManager } from '@pkg/integrations/integrationManager';
@@ -681,6 +682,10 @@ ipcMainProxy.on('get-app-version', async(event) => {
   event.reply('get-app-version', await getVersion());
 });
 
+ipcMainProxy.on('help/preferences/open-url', async() => {
+  Help.preferences.openUrl(await getVersion());
+});
+
 ipcMainProxy.handle('show-message-box', (_event, options: Electron.MessageBoxOptions, modal = false): Promise<Electron.MessageBoxReturnValue> => {
   return window.showMessageBox(options, modal);
 });

diff --git a/pkg/rancher-desktop/components/Help.vue b/pkg/rancher-desktop/components/Help.vue
@@ -1,33 +1,30 @@
 <script lang="ts">
+
 import { shell } from 'electron';
 import Vue from 'vue';
-import { mapState } from 'vuex';
 
 export default Vue.extend({
   name:  'help',
   props: {
-    fixedUrl: {
+    url: {
       type:    String,
       default: null,
     },
     tooltip: {
       type:    String,
       default: null,
     },
-  },
-  computed: {
-    ...mapState('help', ['url']),
-    helpUrl(): string {
-      return this.fixedUrl ?? this.url;
-    },
-    tooltipContent(): string | null {
-      return this.helpUrl ? this.tooltip : null;
+    disabled: {
+      type:    Boolean,
+      default: false,
     },
   },
   methods: {
     openUrl() {
-      if (this.helpUrl) {
-        shell.openExternal(this.helpUrl);
+      if (this.url) {
+        shell.openExternal(this.url);
+      } else {
+        this.$emit('open:url');
       }
     },
   },
@@ -38,19 +35,19 @@ export default Vue.extend({
   <div class="help-button">
     <button
       v-tooltip="{
-        content: tooltipContent,
-        placement: 'right'
+        content: tooltip,
+        placement: 'left'
       }"
       class="btn role-fab"
       :class="{
-        disabled: !helpUrl
+        disabled
       }"
       @click="openUrl"
     >
       <span
         class="icon icon-question-mark"
         :class="{
-          disabled: !helpUrl
+          disabled
         }"
       />
     </button>

diff --git a/pkg/rancher-desktop/components/Preferences/BodyApplication.vue b/pkg/rancher-desktop/components/Preferences/BodyApplication.vue
@@ -7,7 +7,6 @@ import PreferencesApplicationBehavior from '@pkg/components/Preferences/Applicat
 import PreferencesApplicationEnvironment from '@pkg/components/Preferences/ApplicationEnvironment.vue';
 import RdTabbed from '@pkg/components/Tabbed/RdTabbed.vue';
 import Tab from '@pkg/components/Tabbed/Tab.vue';
-import { Help } from '@pkg/config/help';
 import { Settings } from '@pkg/config/settings';
 import type { TransientSettings } from '@pkg/config/transientSettings';
 import type { ServerState } from '@pkg/main/commandServer/httpCommandServer';
@@ -42,7 +41,6 @@ export default Vue.extend({
   },
   methods: {
     async tabSelected({ tab }: { tab: Vue.Component }) {
-      await this.$store.dispatch('help/setUrl', Help.url(`Application-${ tab.name }`));
       if (this.activeTab !== tab.name) {
         await this.commitPreferences(tab.name || '');
       }

diff --git a/pkg/rancher-desktop/components/Preferences/BodyContainerEngine.vue b/pkg/rancher-desktop/components/Preferences/BodyContainerEngine.vue
@@ -7,7 +7,6 @@ import PreferencesContainerEngineAllowedImages from '@pkg/components/Preferences
 import PreferencesContainerEngineGeneral from '@pkg/components/Preferences/ContainerEngineGeneral.vue';
 import RdTabbed from '@pkg/components/Tabbed/RdTabbed.vue';
 import Tab from '@pkg/components/Tabbed/Tab.vue';
-import { Help } from '@pkg/config/help';
 import { Settings } from '@pkg/config/settings';
 import { TransientSettings } from '@pkg/config/transientSettings';
 import { ServerState } from '@pkg/main/credentialServer/httpCredentialHelperServer';
@@ -41,7 +40,6 @@ export default Vue.extend({
       if (this.activeTab !== tab.name) {
         await this.commitPreferences(tab.name || '');
       }
-      await this.$store.dispatch('help/setUrl', Help.url(`Container Engine-${ tab.name }`));
     },
     async commitPreferences(tabName: string) {
       await this.$store.dispatch(

diff --git a/pkg/rancher-desktop/components/Preferences/Help.vue b/pkg/rancher-desktop/components/Preferences/Help.vue
@@ -0,0 +1,20 @@
+<script lang="ts">
+import { ipcRenderer } from 'electron';
+import Vue from 'vue';
+
+import Help from '@pkg/components/Help.vue';
+
+export default Vue.extend({
+  name:       'preferences-help',
+  components: { Help },
+  methods:    {
+    openUrl() {
+      ipcRenderer.send('help/preferences/open-url');
+    },
+  },
+});
+</script>
+
+<template>
+  <help @open:url="openUrl" />
+</template>
diff --git a/pkg/rancher-desktop/components/Preferences/ModalBody.vue b/pkg/rancher-desktop/components/Preferences/ModalBody.vue
@@ -7,21 +7,20 @@ import PreferencesBodyContainerEngine from '@pkg/components/Preferences/BodyCont
 import PreferencesBodyKubernetes from '@pkg/components/Preferences/BodyKubernetes.vue';
 import PreferencesBodyVirtualMachine from '@pkg/components/Preferences/BodyVirtualMachine.vue';
 import PreferencesBodyWsl from '@pkg/components/Preferences/BodyWsl.vue';
+import PreferencesHelp from '@pkg/components/Preferences/Help.vue';
 import { Settings } from '@pkg/config/settings';
 
 import type { PropType } from 'vue';
 
-import Help from '@/components/Help.vue';
-
 export default Vue.extend({
   name:       'preferences-body',
   components: {
-    Help,
     PreferencesBodyApplication,
     PreferencesBodyVirtualMachine,
     PreferencesBodyWsl,
     PreferencesBodyContainerEngine,
     PreferencesBodyKubernetes,
+    PreferencesHelp,
   },
   props: {
     currentNavItem: {
@@ -53,7 +52,7 @@ export default Vue.extend({
         v-on="$listeners"
       />
     </slot>
-    <help class="help" />
+    <preferences-help class="help" />
   </div>
 </template>
 

diff --git a/pkg/rancher-desktop/components/Preferences/ModalNav.vue b/pkg/rancher-desktop/components/Preferences/ModalNav.vue
@@ -2,7 +2,6 @@
 import Vue from 'vue';
 
 import PreferencesNavItem from '@pkg/components/Preferences/ModalNavItem.vue';
-import { Help } from '@pkg/config/help';
 
 export default Vue.extend({
   name:       'preferences-nav',
@@ -18,23 +17,15 @@ export default Vue.extend({
     },
   },
 
-  mounted() {
-    this.updateHelp(this.currentNavItem);
-  },
-
   methods: {
     navClicked(tabName: string) {
       if (tabName !== this.$props.currentNavItem) {
         this.$emit('nav-changed', tabName);
-        this.updateHelp(tabName);
       }
     },
     navToKebab(navItem: string): string {
       return `nav-${ navItem.toLowerCase().replaceAll(' ', '-') }`;
     },
-    async updateHelp(navItem: string) {
-      await this.$store.dispatch('help/setUrl', Help.url(navItem));
-    },
   },
 });
 </script>

diff --git a/pkg/rancher-desktop/config/help.ts b/pkg/rancher-desktop/config/help.ts
@@ -1,37 +1,49 @@
-import { ipcRenderer } from '@pkg/utils/ipcRenderer';
-import { parseDocsVersion } from '@pkg/utils/version';
-
-const baseUrl = 'https://docs.rancherdesktop.io';
+import { shell } from 'electron';
 
-const paths: Record<string, string> = {
-  Application:                       'ui/preferences/application',
-  'Application-behavior':            'ui/preferences/application#behavior',
-  'Application-environment':         'ui/preferences/application#environment',
-  'Virtual Machine':                 'ui/preferences/virtual-machine',
-  'Container Engine-general':        'ui/preferences/container-engine#general',
-  'Container Engine-allowed-images': 'ui/preferences/container-engine#allowed-images',
-  WSL:                               'ui/preferences/wsl',
-  Kubernetes:                        'ui/preferences/kubernetes',
-};
+import { TransientSettings } from '@pkg/config/transientSettings';
+import { parseDocsVersion } from '@pkg/utils/version';
 
-class HelpImpl {
-  private version = 'next';
+type Paths = Record<string, string>;
 
-  constructor() {
-    ipcRenderer.on('get-app-version', (_event, version) => {
-      this.version = parseDocsVersion(version);
-    });
+class Url {
+  private readonly baseUrl = 'https://docs.rancherdesktop.io';
+  private paths: Paths = {};
 
-    ipcRenderer.send('get-app-version');
+  constructor(paths: Paths) {
+    this.paths = paths;
   }
 
-  url(key: string | undefined): string {
+  buildUrl(key: string | undefined, version: string): string {
     if (key) {
-      return `${ baseUrl }/${ this.version }/${ paths[key] }`;
+      const docsVersion = parseDocsVersion(version);
+
+      return `${ this.baseUrl }/${ docsVersion }/${ this.paths[key] }`;
     }
 
     return '';
   }
 }
 
-export const Help = new HelpImpl();
+class PreferencesHelp {
+  private readonly url = new Url({
+    Application:                       'ui/preferences/application',
+    'Application-behavior':            'ui/preferences/application#behavior',
+    'Application-environment':         'ui/preferences/application#environment',
+    'Virtual Machine':                 'ui/preferences/virtual-machine',
+    'Container Engine-general':        'ui/preferences/container-engine#general',
+    'Container Engine-allowed-images': 'ui/preferences/container-engine#allowed-images',
+    WSL:                               'ui/preferences/wsl',
+    Kubernetes:                        'ui/preferences/kubernetes',
+  });
+
+  openUrl(version: string): void {
+    const { current, currentTabs } = TransientSettings.value.preferences.navItem;
+    const tab = currentTabs[current] ? `-${ currentTabs[current] }` : '';
+
+    const url = this.url.buildUrl(`${ current }${ tab }`, version);
+
+    shell.openExternal(url);
+  }
+}
+
+export const Help = { preferences: new PreferencesHelp() };
diff --git a/pkg/rancher-desktop/store/help.ts b/pkg/rancher-desktop/store/help.ts
diff --git a/pkg/rancher-desktop/typings/electron-ipc.d.ts b/pkg/rancher-desktop/typings/electron-ipc.d.ts
@@ -77,6 +77,8 @@ export interface IpcMainEvents {
 
   /** Only for the preferences window */
   'preferences/load': () => void;
+
+  'help/preferences/open-url': () => void;
 }
 
 /**

diff --git a/pkg/rancher-desktop/typings/store.d.ts b/pkg/rancher-desktop/typings/store.d.ts
@@ -1,7 +1,6 @@
 import type { actions as ApplicationSettingsActions } from '@pkg/store/applicationSettings';
 import type { actions as CredentialsActions } from '@pkg/store/credentials';
 import type { actions as DiagnosticsActions } from '@pkg/store/diagnostics';
-import type { actions as HelpActions } from '@pkg/store/help';
 import type { actions as PageActions } from '@pkg/store/page';
 import type { actions as PreferencesActions } from '@pkg/store/preferences';
 import type { actions as TransientSettingsActions } from '@pkg/store/transientSettings';
@@ -21,7 +20,6 @@ type storeActions = Record<string, never>
   & Actions<'diagnostics', typeof DiagnosticsActions>
   & Actions<'credentials', typeof CredentialsActions>
   & Actions<'transientSettings', typeof TransientSettingsActions>
-  & Actions<'help', typeof HelpActions>;
 
 declare module 'vuex/types' {
   export interface Dispatch {

diff --git a/pkg/rancher-desktop/window/preferences.ts b/pkg/rancher-desktop/window/preferences.ts
@@ -2,7 +2,10 @@ import { app, dialog } from 'electron';
 
 import { webRoot, createWindow } from '.';
 
+import { Help } from '@pkg/config/help';
 import { NavItemName } from '@pkg/config/transientSettings';
+import { Shortcuts } from '@pkg/utils/shortcuts';
+import { getVersion } from '@pkg/utils/version';
 
 interface NavItems {
   name: NavItemName;
@@ -43,6 +46,24 @@ export function openPreferences() {
     },
   });
 
+  if (!Shortcuts.isRegistered(window)) {
+    Shortcuts.register(
+      window,
+      [{
+        key:      '?',
+        meta:     true,
+        platform: 'darwin',
+      }, {
+        key:      'F1',
+        platform: ['win32', 'linux'],
+      }],
+      async() => {
+        Help.preferences.openUrl(await getVersion());
+      },
+      'preferences help',
+    );
+  }
+
   window.webContents.on('ipc-message', (_event, channel) => {
     if (channel === 'preferences/load') {
       window.show();