SYNC: Merge pull request #2 from dbgate/feature/admin-ui

packages/web/src/buttons/ToolStripContainer.svelte

@@ -16,7 +16,7 @@
 </script>
 
 <div class="wrapper">
-  <div class="content" class:scrollContent>
+  <div class="content" class:scrollContent class:isComponentActive>
     <slot />
   </div>
 
@@ -41,6 +41,10 @@
     max-height: 100%;
   }
 
+  .content.isComponentActive {
+    max-height: calc(100% - 30px);
+  }
+
   .toolstrip {
     display: flex;
     flex-wrap: wrap;

packages/web/src/commands/stdCommands.ts

@@ -619,6 +619,24 @@ registerCommand({
   onClick: doLogout,
 });
 
+registerCommand({
+  id: 'app.loggedUserCommands',
+  category: 'App',
+  name: 'Logged user',
+  getSubCommands: () => {
+    const config = getCurrentConfig();
+    if (!config) return [];
+    return [
+      {
+        text: 'Logout',
+        onClick: () => {
+          doLogout();
+        },
+      },
+    ];
+  },
+});
+
 registerCommand({
   id: 'app.disconnect',
   category: 'App',

packages/web/src/elements/TabControl.svelte

@@ -17,6 +17,7 @@
   export let containerMaxWidth = undefined;
   export let flex1 = true;
   export let contentTestId = undefined;
+  export let inlineTabs = false;
 
   export function setValue(index) {
     value = index;
@@ -27,7 +28,7 @@
 </script>
 
 <div class="main" class:flex1>
-  <div class="tabs">
+  <div class="tabs" class:inlineTabs>
     {#each _.compact(tabs) as tab, index}
       <div class="tab-item" class:selected={value == index} on:click={() => (value = index)} data-testid={tab.testid}>
         <span class="ml-2">
@@ -78,17 +79,27 @@
     height: var(--dim-tabs-height);
     min-height: var(--dim-tabs-height);
     right: 0;
-    background-color: var(--theme-bg-2);
     overflow-x: auto;
     max-width: 100%;
   }
 
+  .tabs:not(.inlineTabs) {
+    background-color: var(--theme-bg-2);
+  }
+
+  .tabs.inlineTabs {
+    border-bottom: 1px solid var(--theme-border);
+    text-transform: uppercase;
+  }
+
+  .tabs.inlineTabs .tab-item.selected {
+    border-bottom: 2px solid var(--theme-font-link);
+  }
   .tabs::-webkit-scrollbar {
     height: 7px;
   }
 
   .tab-item {
-    border-right: 1px solid var(--theme-border);
     padding-left: 15px;
     padding-right: 15px;
     display: flex;
@@ -96,6 +107,10 @@
     cursor: pointer;
   }
 
+  .tabs:not(.inlineTabs) .tab-item {
+    border-right: 1px solid var(--theme-border);
+  }
+
   /* .tab-item:hover {
     color: ${props => props.theme.tabs_font_hover};
   } */
@@ -124,4 +139,5 @@
   .container.isInline:not(.tabVisible) {
     display: none;
   }
+
 </style>

packages/web/src/elements/TableControl.svelte

@@ -31,6 +31,11 @@
   export let noCellPadding = false;
 
   export let domTable = undefined;
+  export let stickyHeader = false;
+
+  export let checkedKeys = null;
+  export let onSetCheckedKeys = null;
+  export let extractCheckedKey = x => x.id;
 
   const dispatch = createEventDispatcher();
 
@@ -63,11 +68,15 @@
   on:keydown
   tabindex={selectable ? -1 : undefined}
   on:keydown={handleKeyDown}
+  class:stickyHeader
 >
-  <thead>
+  <thead class:stickyHeader>
     <tr>
+      {#if checkedKeys}
+        <th></th>
+      {/if}
       {#each columnList as col}
-        <td
+        <th
           class:clickable={col.sortable}
           on:click={() => {
             if (col.sortable) {
@@ -89,7 +98,7 @@
           {#if sortedByField == col.fieldName}
             <FontIcon icon={sortOrderIsDesc ? 'img sort-desc' : 'img sort-asc'} padLeft />
           {/if}
-        </td>
+        </th>
       {/each}
     </tr>
   </thead>
@@ -108,6 +117,18 @@
           }
         }}
       >
+        {#if checkedKeys}
+          <td>
+            <input
+              type="checkbox"
+              checked={checkedKeys.includes(extractCheckedKey(row))}
+              on:change={e => {
+                if (e.target['checked']) onSetCheckedKeys(_.uniq([...checkedKeys, extractCheckedKey(row)]));
+                else onSetCheckedKeys(checkedKeys.filter(x => x != extractCheckedKey(row)));
+              }}
+            />
+          </td>
+        {/if}
         {#each columnList as col}
           {@const rowProps = { ...col.props, ...(col.getProps ? col.getProps(row) : null) }}
           <td class:isHighlighted={col.isHighlighted && col.isHighlighted(row)} class:noCellPadding>
@@ -164,7 +185,7 @@
     background: var(--theme-bg-hover);
   }
 
-  thead td {
+  thead th {
     border: 1px solid var(--theme-border);
     background-color: var(--theme-bg-1);
     padding: 5px;
@@ -184,4 +205,31 @@
   td.clickable {
     cursor: pointer;
   }
+
+  thead.stickyHeader {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    border-top: 1px solid var(--theme-border);
+  }
+
+  table.stickyHeader th {
+    border-left: none;
+  }
+
+  thead.stickyHeader :global(tr:first-child) :global(th) {
+    border-top: 1px solid var(--theme-border);
+  }
+
+  table.stickyHeader td {
+    border: 0px;
+    border-bottom: 1px solid var(--theme-border);
+    border-right: 1px solid var(--theme-border);
+  }
+
+  table.stickyHeader {
+    border-spacing: 0;
+    border-collapse: separate;
+    border-left: 1px solid var(--theme-border);
+  }
 </style>

packages/web/src/forms/ExtendedCheckBoxField.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+  export let value;
+
+  // use for 3-state checkbox
+  export let inheritedValue = null;
+
+  export let onChange;
+
+  export let label;
+
+  $: renderedValue = value ?? inheritedValue;
+  $: isInherited = inheritedValue != null && value == null;
+
+  function getNextValue() {
+    if (inheritedValue != null) {
+      // 3-state logic
+      if (isInherited) {
+        return true;
+      }
+      if (renderedValue) {
+        return false;
+      }
+      return null;
+    }
+
+    return !value;
+  }
+</script>
+
+<div
+  class="wrapper"
+  on:click|preventDefault|stopPropagation={() => {
+    onChange(getNextValue());
+  }}
+>
+  <div class="checkbox" {...$$restProps} class:checked={!!renderedValue} class:isInherited />
+  <div class="label">
+    {label}
+  </div>
+</div>
+
+<style>
+  .wrapper {
+    display: flex;
+    align-items: center;
+    margin: 4px;
+    cursor: pointer;
+  }
+
+  .label {
+    user-select: none;
+  }
+
+  .checkbox {
+    width: 14px !important;
+    height: 14px !important;
+    margin: 5px;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    -o-appearance: none;
+    appearance: none;
+    outline: 1px solid var(--theme-border);
+    box-shadow: none;
+    font-size: 0.8em;
+    text-align: center;
+    line-height: 1em;
+    background: var(--theme-bg-0);
+  }
+
+  .checked:after {
+    content: '✔';
+    color: var(--theme-font-1);
+    font-weight: bold;
+  }
+
+  .isInherited {
+    background: var(--theme-bg-2) !important;
+  }
+</style>

packages/web/src/modals/ConfirmModal.svelte

@@ -8,15 +8,23 @@
 
   export let message;
   export let onConfirm;
+  export let confirmLabel = 'OK';
+  export let header = null;
 </script>
 
 <FormProvider>
   <ModalBase {...$$restProps}>
+    <svelte:fragment slot="header">
+      {#if header}
+        {header}
+      {/if}
+    </svelte:fragment>
+
     {message}
 
     <svelte:fragment slot="footer">
       <FormSubmit
-        value="OK"
+        value={confirmLabel}
         on:click={() => {
           closeCurrentModal();
           onConfirm();

packages/web/src/tabs/ConnectionTab.svelte

@@ -41,6 +41,7 @@
   export let tabid;
   export let conid;
   export let connectionStore = undefined;
+  export let inlineTabs = false;
 
   export let onlyTestButton;
 
@@ -237,6 +238,7 @@
   <div class="wrapper">
     <TabControl
       isInline
+      {inlineTabs}
       containerMaxWidth="800px"
       flex1={false}
       contentTestId="ConnectionTab_tabControlContent"

packages/web/src/widgets/StatusBar.svelte

@@ -16,7 +16,12 @@
     visibleCommandPalette,
   } from '../stores';
   import { getConnectionLabel } from 'dbgate-tools';
-  import { useConnectionList, useDatabaseServerVersion, useDatabaseStatus } from '../utility/metadataLoaders';
+  import {
+    useConfig,
+    useConnectionList,
+    useDatabaseServerVersion,
+    useDatabaseStatus,
+  } from '../utility/metadataLoaders';
   import { findCommand } from '../commands/runCommand';
   import { useConnectionColor } from '../utility/useConnectionColor';
   import { apiCall } from '../utility/api';
@@ -27,6 +32,7 @@
   $: dbid = connection ? { conid: connection._id, database: databaseName } : null;
   $: status = useDatabaseStatus(dbid || {});
   $: serverVersion = useDatabaseServerVersion(dbid || {});
+  $: config = useConfig();
 
   $: contextItems = $statusBarTabInfo[$activeTabId] as any[];
   $: connectionLabel = getConnectionLabel(connection, { allowExplicitDatabase: false });
@@ -171,6 +177,13 @@
       </div>
     {/each}
 
+    {#if $config?.isUserLoggedIn && $config?.login}
+      <div class="item clickable" on:click={() => visibleCommandPalette.set(findCommand('app.loggedUserCommands'))}>
+        <FontIcon icon="icon users" padRight />
+        {$config?.login}
+      </div>
+    {/if}
+
     {#if $appUpdateStatus}
       <div class="item">
         <FontIcon icon={$appUpdateStatus.icon} padRight />