SYNC: Merge pull request #5 from dbgate/feature/firestore

packages/web/src/datagrid/CollectionDataGridCore.svelte

@@ -122,7 +122,11 @@
   import _ from 'lodash';
   import { registerQuickExportHandler } from '../buttons/ToolStripExportButton.svelte';
   import registerCommand from '../commands/registerCommand';
-  import { extractShellConnection, extractShellConnectionHostable, extractShellHostConnection } from '../impexp/createImpExpScript';
+  import {
+    extractShellConnection,
+    extractShellConnectionHostable,
+    extractShellHostConnection,
+  } from '../impexp/createImpExpScript';
   import { apiCall } from '../utility/api';
 
   import { registerMenu } from '../utility/contextMenu';

packages/web/src/datagrid/DataFilterControl.svelte

@@ -80,11 +80,12 @@
       );
     }
 
-    if (filterBehaviour.supportArrayTesting) {
-      res.push(
-        { onClick: () => setFilter('NOT EMPTY ARRAY'), text: 'Array is not empty' },
-        { onClick: () => setFilter('EMPTY ARRAY'), text: 'Array is empty' }
-      );
+    if (filterBehaviour.supportNotEmptyArrayTesting) {
+      res.push({ onClick: () => setFilter('NOT EMPTY ARRAY'), text: 'Array is not empty' });
+    }
+
+    if (filterBehaviour.supportEmptyArrayTesting) {
+      res.push({ onClick: () => setFilter('EMPTY ARRAY'), text: 'Array is empty' });
     }
 
     if (filterBehaviour.supportNullTesting) {
@@ -132,7 +133,7 @@
       );
     }
 
-    if (filterBehaviour.supportBooleanValues && filterBehaviour.supportNullTesting) {
+    if (filterBehaviour.supportBooleanOrNull) {
       res.push(
         { onClick: () => setFilter('TRUE, NULL'), text: 'Is True or NULL' },
         { onClick: () => setFilter('FALSE, NULL'), text: 'Is False or NULL' }

packages/web/src/forms/FormJsonFileInputField.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+  import SimpleFilesInput, { ProcessedFile } from '../impexp/SimpleFilesInput.svelte';
+  import { FileParseResult, parseFileAsJson } from '../utility/parseFileAsJson';
+  import { getFormContext } from './FormProviderCore.svelte';
+  import { createEventDispatcher } from 'svelte';
+
+  export let label: string;
+  export let buttonLabel: string = 'Choose File';
+  export let name: string;
+  export let disabled: boolean = false;
+  export let accept: string = '.json,application/json';
+  export let templateProps = {};
+
+  const { template, setFieldValue, values } = getFormContext();
+  const dispatch = createEventDispatcher();
+
+  let fileName: string | null = null;
+  $: hasValue = $values?.[name] != null;
+  $: displayLabel = getDisplayLabel(buttonLabel, hasValue, fileName);
+
+  async function handleFileChange(fileData: ProcessedFile): Promise<void> {
+    const parseResult: FileParseResult = await parseFileAsJson(fileData.file);
+
+    if (parseResult.success) {
+      fileName = fileData.name;
+      setFieldValue(name, parseResult.data);
+      dispatch('change', {
+        success: true,
+        data: parseResult.data,
+        fileName: fileData.name,
+      });
+    } else {
+      fileName = null;
+      setFieldValue(name, null);
+      dispatch('change', {
+        success: false,
+        error: parseResult.error,
+        fileName: fileData.name,
+      });
+    }
+  }
+
+  function getDisplayLabel(baseLabel: string, hasValue: boolean, fileName: string | null): string {
+    if (!hasValue) {
+      return baseLabel;
+    }
+
+    if (fileName) {
+      return `${baseLabel} (${fileName})`;
+    }
+
+    return `${baseLabel} (JSON loaded)`;
+  }
+</script>
+
+<svelte:component this={template} type="file" {label} {disabled} {...templateProps}>
+  <SimpleFilesInput label={displayLabel} {accept} {disabled} onChange={handleFileChange} {...$$restProps} />
+</svelte:component>

packages/web/src/impexp/SimpleFilesInput.svelte

@@ -0,0 +1,105 @@
+<script context="module" lang="ts">
+  export type ProcessedFile = {
+    name: string;
+    size: number;
+    type: string;
+    lastModified: number;
+    content: string | ArrayBuffer | null;
+    file: File;
+  };
+</script>
+
+<script lang="ts">
+  export let disabled: boolean = false;
+  export let label: string = 'Choose File';
+  export let onChange: ((fileData: ProcessedFile | ProcessedFile[]) => void) | null = null;
+  export let accept: string = '*';
+  export let multiple: boolean = false;
+
+  let fileInput: HTMLInputElement;
+
+  function handleFileChange(event: Event): void {
+    const target = event.target as HTMLInputElement;
+    const files = target.files;
+    if (!files || files.length < 0 || !onChange) return;
+
+    if (multiple) {
+      const processedFiles = Array.from(files).map(processFile);
+      Promise.all(processedFiles).then((results: ProcessedFile[]) => {
+        onChange(results);
+      });
+    } else {
+      processFile(files[0]).then((result: ProcessedFile) => {
+        onChange(result);
+      });
+    }
+  }
+
+  function processFile(file: File): Promise<ProcessedFile> {
+    return new Promise(resolve => {
+      const reader = new FileReader();
+
+      reader.onload = (e: ProgressEvent<FileReader>) => {
+        resolve({
+          name: file.name,
+          size: file.size,
+          type: file.type,
+          lastModified: file.lastModified,
+          content: e.target?.result || null,
+          file: file,
+        });
+      };
+
+      reader.readAsDataURL(file);
+    });
+  }
+
+  function triggerFileInput(): void {
+    fileInput.click();
+  }
+</script>
+
+<input
+  {disabled}
+  bind:this={fileInput}
+  type="file"
+  {accept}
+  {multiple}
+  on:change={handleFileChange}
+  style="display: none;"
+/>
+
+<button {disabled} on:click={triggerFileInput} class="file-input-btn">
+  {label}
+</button>
+
+<style>
+  .file-input-btn {
+    border: 1px solid var(--theme-bg-button-inv-2);
+    padding: 5px;
+    margin: 2px;
+    background-color: var(--theme-bg-button-inv);
+    color: var(--theme-font-inv-1);
+    border-radius: 2px;
+    cursor: pointer;
+  }
+
+  .file-input-btn:hover:not(:disabled) {
+    background-color: var(--theme-bg-button-inv-2);
+  }
+
+  .file-input-btn:active:not(:disabled) {
+    background-color: var(--theme-bg-button-inv-3);
+  }
+
+  .file-input-btn:focus {
+    outline: 2px solid var(--theme-bg-button-inv-2);
+    outline-offset: 2px;
+  }
+
+  .file-input-btn:disabled {
+    background-color: var(--theme-bg-button-inv-3);
+    color: var(--theme-font-inv-3);
+    cursor: not-allowed;
+  }
+</style>

packages/web/src/impexp/SourceTargetConfig.svelte

@@ -173,7 +173,9 @@
 
   {#if storageType == 'database' || storageType == 'query'}
     <FormConnectionSelect name={connectionIdField} label="Server" {direction} />
-    <FormDatabaseSelect conidName={connectionIdField} name={databaseNameField} label="Database" />
+    {#if !$connectionInfo?.singleDatabase}
+      <FormDatabaseSelect conidName={connectionIdField} name={databaseNameField} label="Database" />
+    {/if}
   {/if}
   {#if storageType == 'database'}
     <FormSchemaSelect

packages/web/src/modals/SetFilterModal.svelte

@@ -63,7 +63,9 @@
 
       <div class="row">
         <FormRadioGroupItem name="joinOperator" value=" " text="And" />
-        <FormRadioGroupItem name="joinOperator" value="," text="Or" />
+        {#if !filterBehaviour.disableOr}
+          <FormRadioGroupItem name="joinOperator" value="," text="Or" />
+        {/if}
       </div>
 
       <div class="row">

packages/web/src/settings/ConnectionDriverFields.svelte

@@ -18,6 +18,9 @@
   import FormDropDownTextField from '../forms/FormDropDownTextField.svelte';
   import { getConnectionLabel } from 'dbgate-tools';
   import { _t } from '../translations';
+  import FilesInput from '../impexp/FilesInput.svelte';
+  import SimpleFilesInput from '../impexp/SimpleFilesInput.svelte';
+  import FormJsonFileInputField from '../forms/FormJsonFileInputField.svelte';
 
   export let getDatabaseList;
   export let currentConnection;
@@ -462,6 +465,10 @@
   />
 {/if}
 
+{#if driver?.showConnectionField('certificateJson', $values, showConnectionFieldArgs)}
+  <FormJsonFileInputField disabled={isConnected} label="Service account key JSON" name="certificateJson" />
+{/if}
+
 {#if driver}
   <div class="row">
     <div class="col-6 mr-1">

packages/web/src/utility/parseFileAsJson.js

@@ -0,0 +1,38 @@
+/**
+ * @template [T = any]
+ * @typedef {Object} FileParseResultSuccess
+ * @property {true} success
+ * @property {T} data
+ */
+
+/**
+ * @typedef {Object} FileParseResultError
+ * @property {false} success
+ * @property {string} error
+ */
+
+/**
+ * @template [T = any]
+ * @typedef {FileParseResultSuccess<T> | FileParseResultError} FileParseResult
+ */
+
+/**
+ * @template [T = any]
+ * @param {File} file
+ * @returns {Promise<FileParseResult<T>>}
+ */
+export async function parseFileAsJson(file) {
+  try {
+    const text = await file.text();
+    const data = JSON.parse(text);
+    return {
+      success: true,
+      data,
+    };
+  } catch (error) {
+    return {
+      success: false,
+      error: error instanceof Error ? error.message : 'Unknown parsing error',
+    };
+  }
+}