SYNC: new object button refactor + diagram accesibility

packages/web/src/buttons/NewObjectButton.svelte

@@ -4,11 +4,15 @@
   export let icon;
   export let title;
   export let description;
+  export let enabled;
+  export let colorClass;
+
+  $: disabled = !enabled;
 </script>
 
-<div class="new-object-button" on:click>
+<div class="new-object-button" on:click class:enabled class:disabled>
   <div class="icon">
-    <FontIcon {icon} />
+    <FontIcon {icon} colorClass={enabled ? colorClass : null} />
   </div>
   <span class="title">{title}</span>
   {#if description}
@@ -23,13 +27,16 @@
     background-color: var(--theme-bg-1);
     border-radius: 4px;
     border: 1px solid var(--theme-border);
-    cursor: pointer;
 
     display: flex;
     flex-direction: column;
     align-items: center;
   }
-  .new-object-button:hover {
+
+  .new-object-button.enabled {
+    cursor: pointer;
+  }
+  .new-object-button.enabled:hover {
     background-color: var(--theme-bg-2);
   }
   .icon {
@@ -48,4 +55,18 @@
     font-size: 0.9em;
     color: var(--theme-font-2);
   }
+
+  .new-object-button.disabled .title {
+    color: var(--theme-font-2);
+  }
+  .new-object-button.disabled .description {
+    color: var(--theme-font-2);
+  }
+  .new-object-button.disabled .icon {
+    color: var(--theme-font-2);
+  }
+  .new-object-button.disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
 </style>

packages/web/src/designer/Designer.svelte

@@ -24,6 +24,18 @@
     onClick: () => getCurrentEditor().exportDiagram(),
     testEnabled: () => getCurrentEditor()?.canExport(),
   });
+
+  registerCommand({
+    id: 'diagram.deleteSelectedTables',
+    category: 'Designer',
+    toolbarName: 'Remove',
+    name: 'Remove selected tables',
+    icon: 'icon delete',
+    toolbar: true,
+    isRelatedToTab: true,
+    onClick: () => getCurrentEditor().deleteSelectedTables(),
+    testEnabled: () => getCurrentEditor()?.areTablesSelected(),
+  });
 </script>
 
 <script lang="ts">
@@ -54,6 +66,7 @@
   import createRef from '../utility/createRef';
   import { isProApp } from '../utility/proTools';
   import dragScroll from '../utility/dragScroll';
+  import FormStyledButton from '../buttons/FormStyledButton.svelte';
 
   export let value;
   export let onChange;
@@ -63,6 +76,7 @@
   export let settings;
   export let referenceComponent;
   export let onReportCounts = undefined;
+  export let allowAddTablesButton = false;
 
   export const activator = createActivator('Designer', true);
 
@@ -423,6 +437,19 @@
     arrange(true, false, rect ? { x: (rect.left + rect.right) / 2, y: (rect.top + rect.bottom) / 2 } : null);
   };
 
+  const handleAddAllTables = async () => {
+    const db = dbInfoExtended;
+    if (!db) return;
+    callChange(current => ({
+      tables: db.tables.map(table => ({
+        ...table,
+        designerId: `${table.pureName}-${uuidv1()}`,
+      })),
+      references: [],
+      autoLayout: true,
+    }));
+  };
+
   const handleChangeTableColor = table => {
     showModal(ChooseColorModal, {
       onChange: color => {
@@ -966,6 +993,18 @@
       filtered: _.compact(tables || []).length,
     });
   }
+
+  export function areTablesSelected() {
+    return tables.some(x => x.isSelectedTable);
+  }
+
+  export function deleteSelectedTables() {
+    callChange(current => ({
+      ...current,
+      tables: (current.tables || []).filter(x => !x.isSelectedTable),
+    }));
+    updateFromDbInfo();
+  }
 </script>
 
 <div
@@ -977,6 +1016,12 @@
 >
   {#if !(tables?.length > 0)}
     <div class="empty">Drag &amp; drop tables or views from left panel here</div>
+
+    {#if allowAddTablesButton}
+      <div class="addAllTables">
+        <FormStyledButton value="Add all tables" on:click={handleAddAllTables} />
+      </div>
+    {/if}
   {/if}
 
   <div
@@ -1091,6 +1136,14 @@
     font-size: 20px;
     position: absolute;
   }
+
+  .addAllTables {
+    margin: 50px;
+    margin-top: 100px;
+    font-size: 20px;
+    position: absolute;
+    z-index: 100;
+  }
   .canvas {
     position: relative;
   }

packages/web/src/designer/DiagramDesigner.svelte

@@ -23,4 +23,5 @@
   referenceComponent={DiagramDesignerReference}
   showColumnFilter={false}
   {columnFilter}
+  allowAddTablesButton
 />

packages/web/src/icons/FontIcon.svelte

@@ -31,6 +31,7 @@
   export let padLeft = false;
   export let padRight = false;
   export let style = null;
+  export let colorClass = null;
 
   const iconNames = {
     'icon minus-box': 'mdi mdi-minus-box-outline',
@@ -143,6 +144,7 @@
     'icon markdown': 'mdi mdi-application',
     'icon preview': 'mdi mdi-file-find',
     'icon eye': 'mdi mdi-eye',
+    'icon perspective': 'mdi mdi-eye',
     'icon auditlog': 'mdi mdi-eye',
     'icon check-all': 'mdi mdi-check-all',
     'icon checkbox-blank': 'mdi mdi-checkbox-blank-outline',
@@ -235,6 +237,8 @@
     'icon limit': 'mdi mdi-car-speed-limiter',
 
     'icon chart': 'mdi mdi-chart-bar',
+    'icon cloud-connection': 'mdi mdi-cloud-lock',
+    'icon diagram': 'mdi mdi-graph',
 
     'img ok': 'mdi mdi-check-circle color-icon-green',
     'img ok-inv': 'mdi mdi-check-circle color-icon-inv-green',
@@ -334,14 +338,11 @@
     'img db-restore': 'mdi mdi-database-import color-icon-red',
     'img settings': 'mdi mdi-cog color-icon-blue',
     'img data-deploy': 'mdi mdi-database-settings color-icon-green',
-
-    'img new-sql-file': 'mdi mdi-file color-icon-blue',
-    'img new-connection': 'mdi mdi-connection color-icon-yellow',
   };
 </script>
 
 <span
-  class={iconNames[icon] || icon}
+  class={`${iconNames[icon] || icon} ${colorClass || ''}`}
   {title}
   class:padLeft
   class:padRight

packages/web/src/modals/NewObjectModal.svelte

@@ -7,88 +7,96 @@
   import { closeCurrentModal } from './modalTools';
 
   export let multiTabIndex = undefined;
+
+  let NEW_ITEMS = [
+    {
+      icon: 'icon sql-file',
+      colorClass: 'color-icon-blue',
+      title: 'Query',
+      description: 'SQL query editor',
+      action: () => {
+        newQuery({ multiTabIndex });
+      },
+    },
+    {
+      icon: 'icon connection',
+      colorClass: 'color-icon-yellow',
+      title: 'Connection',
+      description: 'Database connection stored locally',
+      command: 'new.connection',
+      changeWidget: 'database',
+    },
+    {
+      icon: 'icon cloud-connection',
+      colorClass: 'color-icon-blue',
+      title: 'Connection on Cloud',
+      description: 'Database connection stored on DbGate Cloud',
+      command: 'new.connectionOnCloud',
+      changeWidget: 'cloud-private',
+    },
+    {
+      icon: 'icon query-design',
+      colorClass: 'color-icon-red',
+      title: 'Query Designer',
+      description: 'Design SQL queries visually',
+      command: 'new.queryDesign',
+    },
+    {
+      icon: 'icon diagram',
+      colorClass: 'color-icon-blue',
+      title: 'ER Diagram',
+      description: 'Visualize database structure',
+      command: 'new.diagram',
+    },
+    {
+      icon: 'icon perspective',
+      colorClass: 'color-icon-yellow',
+      title: 'Perspective',
+      description: 'Join complex data from multiple databases',
+      command: 'new.perspective',
+    },
+    {
+      icon: 'icon table',
+      colorClass: 'color-icon-blue',
+      title: 'Table',
+      description: 'Create table in the current database',
+      command: 'new.table',
+    },
+    {
+      icon: 'icon sql-generator',
+      colorClass: 'color-icon-green',
+      title: 'SQL Generator',
+      description: 'Generate SQL scripts for database objects',
+      command: 'sql.generator',
+    },
+  ];
 </script>
 
 <ModalBase simplefix {...$$restProps}>
   <div class="create-header">Create new</div>
   <div class="wrapper">
-    <NewObjectButton
+    {#each NEW_ITEMS as item}
-      icon="img new-sql-file"
+      {@const enabled = item.command ? $commandsCustomized[item.command]?.enabled : true}
-      title="Query"
-      description="SQL query editor"
-      on:click={() => {
-        newQuery({ multiTabIndex });
-        closeCurrentModal();
-      }}
-    />
-    {#if $commandsCustomized['new.connection']?.enabled}
       <NewObjectButton
-        icon="img new-connection"
+        icon={item.icon}
-        title="Connection"
+        title={item.title}
-        description="Database connection stored locally"
+        description={item.description}
+        {enabled}
+        colorClass={item.colorClass}
         on:click={() => {
-          $selectedWidget = 'database';
+          if (!enabled) return;
-          runCommand('new.connection');
+          if (item.action) {
+            item.action();
+          } else if (item.command) {
+            runCommand(item.command);
+          }
+          if (item.changeWidget) {
+            $selectedWidget = item.changeWidget;
+          }
           closeCurrentModal();
         }}
       />
-    {/if}
+    {/each}
-    {#if $commandsCustomized['new.connectionOnCloud']?.enabled}
-      <NewObjectButton
-        icon="img cloud-connection"
-        title="Connection on Cloud"
-        description="Database connection stored on DbGate Cloud"
-        on:click={() => {
-          $selectedWidget = 'cloud-private';
-          runCommand('new.connectionOnCloud');
-          closeCurrentModal();
-        }}
-      />
-    {/if}
-    {#if $commandsCustomized['new.queryDesign']?.enabled}
-      <NewObjectButton
-        icon="img query-design"
-        title="Query Designer"
-        description="Design SQL queries visually"
-        on:click={() => {
-          runCommand('new.queryDesign');
-          closeCurrentModal();
-        }}
-      />
-    {/if}
-    {#if $commandsCustomized['new.diagram']?.enabled}
-      <NewObjectButton
-        icon="img diagram"
-        title="ER Diagram"
-        description="Visualize database structure"
-        on:click={() => {
-          runCommand('new.diagram');
-          closeCurrentModal();
-        }}
-      />
-    {/if}
-    {#if $commandsCustomized['new.perspective']?.enabled}
-      <NewObjectButton
-        icon="img perspective"
-        title="Perspective"
-        description="Join complex data from multiple databases"
-        on:click={() => {
-          runCommand('new.perspective');
-          closeCurrentModal();
-        }}
-      />
-    {/if}
-    {#if $commandsCustomized['new.table']?.enabled}
-      <NewObjectButton
-        icon="img table"
-        title="Table"
-        description="Create table in the current database"
-        on:click={() => {
-          runCommand('new.table');
-          closeCurrentModal();
-        }}
-      />
-    {/if}
   </div>
 </ModalBase>
 

packages/web/src/tabs/DiagramTab.svelte

@@ -162,6 +162,7 @@
     <ToolStripCommandButton command="diagram.export" />
     <ToolStripCommandButton command="diagram.undo" />
     <ToolStripCommandButton command="diagram.redo" />
+    <ToolStripCommandButton command="diagram.deleteSelectedTables" />
     {#if isProApp()}
       <ToolStripButton
         icon="icon settings"