SYNC: settings permissions

packages/web/src/commands/stdCommands.ts

@@ -70,7 +70,7 @@ registerCommand({
   category: 'Theme',
   name: 'Change',
   toolbarName: 'Change theme',
-  onClick: () => showModal(SettingsModal, { selectedTab: 2 }),
+  onClick: () => showModal(SettingsModal, { selectedTab: 'theme' }),
   // getSubCommands: () => get(extensions).themes.map(themeCommand),
 });
 
@@ -692,8 +692,8 @@ if (isProApp()) {
     icon: 'icon compare',
     testEnabled: () =>
       getCurrentDatabase() != null &&
-      findEngineDriver(getCurrentDatabase()?.connection, getExtensions())?.databaseEngineTypes?.includes('sql')
-      && hasPermission(`dbops/export`),
+      findEngineDriver(getCurrentDatabase()?.connection, getExtensions())?.databaseEngineTypes?.includes('sql') &&
+      hasPermission(`dbops/export`),
     onClick: () => {
       openNewTab(
         {
@@ -754,6 +754,7 @@ if (hasPermission('settings/change')) {
         props: {},
       });
     },
+    testEnabled: () => hasPermission('settings/change'),
   });
 
   registerCommand({
@@ -762,6 +763,7 @@ if (hasPermission('settings/change')) {
     name: 'Change',
     toolbarName: 'Settings',
     onClick: () => showModal(SettingsModal),
+    testEnabled: () => hasPermission('settings/change'),
   });
 }
 

packages/web/src/elements/TabControl.svelte

@@ -8,10 +8,11 @@
     component?: any;
     props?: any;
     testid?: string;
+    identifier?: string;
   }
 
   export let tabs: TabDef[];
-  export let value = 0;
+  export let value: string | number = 0;
   export let menu = null;
   export let isInline = false;
   export let containerMaxWidth = undefined;
@@ -36,10 +37,10 @@
     {#each _.compact(tabs) as tab, index}
       <div
         class="tab-item"
-        class:selected={value == index}
+        class:selected={value == (tab.identifier ?? index)}
         on:click={() => {
-          value = index;
-          onUserChange?.(index);
+          value = tab.identifier ?? index;
+          onUserChange?.(tab.identifier ?? index);
         }}
         data-testid={tab.testid}
       >
@@ -60,14 +61,14 @@
         class:flexColContainer
         class:maxHeight100
         class:isInline
-        class:tabVisible={index == value}
+        class:tabVisible={(tab.identifier ?? index) == value}
         style:max-width={containerMaxWidth}
       >
         <svelte:component
           this={tab.component}
           {...tab.props}
-          tabVisible={index == value}
-          tabControlHiddenTab={index != value}
+          tabVisible={(tab.identifier ?? index) == value}
+          tabControlHiddenTab={(tab.identifier ?? index) != value}
         />
         {#if tab.slot != null}
           {#if tab.slot == 0}<slot name="0" />

packages/web/src/settings/SettingsModal.svelte

@@ -41,15 +41,14 @@
   import { derived } from 'svelte/store';
   import { safeFormatDate } from 'dbgate-tools';
   import FormDefaultActionField from './FormDefaultActionField.svelte';
-  import { _t, getSelectedLanguage } from '../translations';
-  import { internalRedirectTo } from '../clientAuth';
-  import ConfirmModal from '../modals/ConfirmModal.svelte';
+  import { _t } from '../translations';
+  import hasPermission from '../utility/hasPermission';
 
   const electron = getElectron();
   let restartWarning = false;
   let licenseKeyCheckResult = null;
 
-  export let selectedTab = 0;
+  export let selectedTab = 'general';
 
   const sqlPreview = `-- example query
 SELECT
@@ -100,14 +99,14 @@ ORDER BY
         bind:value={selectedTab}
         isInline
         tabs={[
-          { label: 'General', slot: 1 },
-          isProApp() && electron && { label: 'License', slot: 7 },
-          { label: 'Connection', slot: 2 },
-          { label: 'Themes', slot: 3 },
-          { label: 'Default Actions', slot: 4 },
-          { label: 'Behaviour', slot: 5 },
-          { label: 'External tools', slot: 8 },
-          { label: 'Other', slot: 6 },
+          hasPermission('settings/change') && { identifier: 'general', label: 'General', slot: 1 },
+          isProApp() && electron && { identifier: 'license', label: 'License', slot: 7 },
+          hasPermission('settings/change') && { identifier: 'connection', label: 'Connection', slot: 2 },
+          { identifier: 'theme', label: 'Themes', slot: 3 },
+          hasPermission('settings/change') && { identifier: 'default-actions', label: 'Default Actions', slot: 4 },
+          hasPermission('settings/change') && { identifier: 'behaviour', label: 'Behaviour', slot: 5 },
+          hasPermission('settings/change') && { identifier: 'external-tools', label: 'External tools', slot: 8 },
+          hasPermission('settings/change') && { identifier: 'other', label: 'Other', slot: 6 },
         ]}
       >
         <svelte:fragment slot="1">

packages/web/src/widgets/WidgetIconPanel.svelte

@@ -107,9 +107,9 @@
     const left = rect.right;
     const top = rect.bottom;
     const items = [
-      { command: 'settings.show' },
+      hasPermission('settings/change') && { command: 'settings.show' },
       { command: 'theme.changeTheme' },
-      { command: 'settings.commands' },
+      hasPermission('settings/change') && { command: 'settings.commands' },
       hasPermission('widgets/app') && {
         text: 'View applications',
         onClick: () => {