respect readonly connection flag in table editor

packages/web/src/buttons/DropDownButton.svelte

@@ -8,9 +8,12 @@
   export let icon = 'icon chevron-down';
   export let menu;
   export let narrow = false;
+  export let disabled = false;
   let domButton;
 
   function handleClick() {
+    if (disabled) return;
+    
     const rect = domButton.getBoundingClientRect();
     const left = rect.left;
     const top = rect.bottom;
@@ -18,6 +21,6 @@
   }
 </script>
 
-<InlineButton square {narrow} on:click={handleClick} bind:this={domButton}>
+<InlineButton square {narrow} on:click={handleClick} bind:this={domButton} {disabled}>
   <FontIcon {icon} />
 </InlineButton>

packages/web/src/forms/FormDropDownTextFieldRaw.svelte

@@ -22,6 +22,7 @@
 <div class="flex">
   <TextField
     {...$$restProps}
+    {disabled}
     value={$values[name] ?? defaultValue}
     on:input={e => setFieldValue(name, e.target['value'])}
   />

packages/web/src/tableeditor/ColumnEditorModal.svelte

@@ -19,6 +19,8 @@
   export let driver = null;
 
   export let addDataCommand = false;
+
+  $: isReadOnly = !setTableInfo;
 </script>
 
 <FormProvider initialValues={fillEditorColumnInfo(columnInfo || {}, tableInfo)}>
@@ -27,33 +29,35 @@
       >{columnInfo ? 'Edit column' : `Add column ${(tableInfo?.columns || []).length + 1}`}</svelte:fragment
     >
 
-    <FormTextField name="columnName" label="Column name" focused />
+    <FormTextField name="columnName" label="Column name" focused disabled={isReadOnly} />
-    <DataTypeEditor dialect={driver?.dialect} />
+    <DataTypeEditor dialect={driver?.dialect} disabled={isReadOnly} />
 
-    <FormCheckboxField name="notNull" label="NOT NULL" />
+    <FormCheckboxField name="notNull" label="NOT NULL" disabled={isReadOnly} />
-    <FormCheckboxField name="isPrimaryKey" label="Is Primary Key" />
+    <FormCheckboxField name="isPrimaryKey" label="Is Primary Key" disabled={isReadOnly} />
-    <FormCheckboxField name="autoIncrement" label="Is Autoincrement" />
+    <FormCheckboxField name="autoIncrement" label="Is Autoincrement" disabled={isReadOnly} />
     <FormTextField
       name="defaultValue"
       label="Default value. Please use valid SQL expression, eg. 'Hello World' for string value, '' for empty string"
+      disabled={!setTableInfo}
     />
-    <FormTextField name="computedExpression" label="Computed expression" />
+    <FormTextField name="computedExpression" label="Computed expression" disabled={isReadOnly} />
     {#if driver?.dialect?.columnProperties?.isUnsigned}
-      <FormCheckboxField name="isUnsigned" label="Unsigned" />
+      <FormCheckboxField name="isUnsigned" label="Unsigned" disabled={isReadOnly} />
     {/if}
     {#if driver?.dialect?.columnProperties?.isZerofill}
-      <FormCheckboxField name="isZerofill" label="Zero fill" />
+      <FormCheckboxField name="isZerofill" label="Zero fill" disabled={isReadOnly} />
     {/if}
     {#if driver?.dialect?.columnProperties?.columnComment}
-      <FormTextField name="columnComment" label="Comment" />
+      <FormTextField name="columnComment" label="Comment" disabled={isReadOnly} />
     {/if}
     {#if driver?.dialect?.columnProperties?.isSparse}
-      <FormCheckboxField name="isSparse" label="Sparse" />
+      <FormCheckboxField name="isSparse" label="Sparse" disabled={isReadOnly} />
     {/if}
 
     <svelte:fragment slot="footer">
       <FormSubmit
         value={columnInfo ? 'Save' : 'Save and next'}
+        disabled={isReadOnly}
         on:click={e => {
           closeCurrentModal();
           if (columnInfo) {
@@ -68,6 +72,7 @@
         <FormButton
           type="button"
           value="Save"
+          disabled={isReadOnly}
           on:click={e => {
             closeCurrentModal();
             setTableInfo(tbl => editorAddColumn(tbl, e.detail, addDataCommand));

packages/web/src/tableeditor/ColumnsConstraintEditorModal.svelte

@@ -33,6 +33,8 @@
       ...(getExtractConstraintProps ? getExtractConstraintProps() : {}),
     };
   }
+
+  $: isReadOnly = !setTableInfo;
 </script>
 
 <FormProvider>
@@ -45,7 +47,12 @@
       <div class="row">
         <div class="label col-3">{constraintNameLabel}</div>
         <div class="col-9">
-          <TextField value={constraintName} on:input={e => (constraintName = e.target['value'])} focused />
+          <TextField
+            value={constraintName}
+            on:input={e => (constraintName = e.target['value'])}
+            focused
+            disabled={isReadOnly}
+          />
         </div>
       </div>
 
@@ -61,6 +68,7 @@
               <SelectField
                 value={column.columnName}
                 isNative
+                disabled={isReadOnly}
                 options={tableInfo.columns.map(col => ({
                   label: col.columnName,
                   value: col.columnName,
@@ -81,6 +89,7 @@
           <div class="col-3 button">
             <FormStyledButton
               value="Delete"
+              disabled={isReadOnly}
               on:click={e => {
                 const x = [...columns];
                 x.splice(index, 1);
@@ -97,6 +106,7 @@
           {#key columns.length}
             <SelectField
               placeholder="Select column"
+              disabled={isReadOnly}
               value={''}
               on:change={e => {
                 if (e.detail)
@@ -127,6 +137,7 @@
     <svelte:fragment slot="footer">
       <FormSubmit
         value={'Save'}
+        disabled={isReadOnly}
         on:click={() => {
           closeCurrentModal();
           if (constraintInfo) {
@@ -142,6 +153,7 @@
         <FormStyledButton
           type="button"
           value="Remove"
+          disabled={isReadOnly}
           on:click={() => {
             closeCurrentModal();
             setTableInfo(tbl => editorDeleteConstraint(tbl, constraintInfo));

packages/web/src/tableeditor/DataTypeEditor.svelte

@@ -14,6 +14,7 @@
   }
 
   export let dialect;
+  export let disabled = false;
 </script>
 
-<FormDropDownTextField name="dataType" label="Data type" menu={createDataTypesMenu} />
+<FormDropDownTextField name="dataType" label="Data type" menu={createDataTypesMenu} {disabled} />

packages/web/src/tableeditor/ForeignKeyEditorModal.svelte

@@ -53,6 +53,8 @@
       updateAction: _.startCase(updateAction).toUpperCase(),
     };
   }
+
+  $: isReadOnly = !setTableInfo;
 </script>
 
 <FormProvider>
@@ -63,7 +65,12 @@
       <div class="row">
         <div class="label col-3">Constraint name</div>
         <div class="col-9">
-          <TextField value={constraintName} on:input={e => (constraintName = e.target['value'])} focused />
+          <TextField
+            value={constraintName}
+            on:input={e => (constraintName = e.target['value'])}
+            focused
+            disabled={isReadOnly}
+          />
         </div>
       </div>
 
@@ -78,6 +85,7 @@
               label: fullNameToLabel(tbl),
               value: fullNameToString(tbl),
             }))}
+            disabled={isReadOnly}
             on:change={e => {
               if (e.detail) {
                 const name = fullNameFromString(e.detail);
@@ -97,6 +105,7 @@
             isNative
             notSelected
             options={foreignKeyActionsOptions}
+            disabled={isReadOnly}
             on:change={e => {
               updateAction = e.detail || null;
             }}
@@ -112,6 +121,7 @@
             isNative
             notSelected
             options={foreignKeyActionsOptions}
+            disabled={isReadOnly}
             on:change={e => {
               deleteAction = e.detail || null;
             }}
@@ -136,6 +146,7 @@
                 value={column.columnName}
                 isNative
                 notSelected
+                disabled={isReadOnly}
                 options={tableInfo.columns.map(col => ({
                   label: col.columnName,
                   value: col.columnName,
@@ -154,6 +165,7 @@
                 value={column.refColumnName}
                 isNative
                 notSelected
+                disabled={isReadOnly}
                 options={(refTableInfo?.columns || []).map(col => ({
                   label: col.columnName,
                   value: col.columnName,
@@ -169,6 +181,7 @@
           <div class="col-2 button">
             <FormStyledButton
               value="Delete"
+              disabled={isReadOnly}
               on:click={e => {
                 const x = [...columns];
                 x.splice(index, 1);
@@ -182,6 +195,7 @@
       <FormStyledButton
         type="button"
         value="Add column"
+        disabled={isReadOnly}
         on:click={() => {
           columns = [...columns, {}];
         }}
@@ -190,7 +204,8 @@
 
     <svelte:fragment slot="footer">
       <FormSubmit
-        value={'Save'}
+        value="Save"
+        disabled={isReadOnly}
         on:click={() => {
           closeCurrentModal();
           if (constraintInfo) {
@@ -205,6 +220,7 @@
       {#if constraintInfo}
         <FormStyledButton
           type="button"
+          disabled={isReadOnly}
           value="Remove"
           on:click={() => {
             closeCurrentModal();

packages/web/src/tableeditor/IndexEditorModal.svelte

@@ -16,6 +16,8 @@
       isUnique,
     };
   }
+
+  $: isReadOnly = !setTableInfo;
 </script>
 
 <ColumnsConstraintEditorModal
@@ -32,6 +34,7 @@
     <SelectField
       value={column.isDescending ? 'desc' : 'asc'}
       isNative
+      disabled={isReadOnly}
       options={[
         { label: 'ASC', value: 'asc' },
         { label: 'DESC', value: 'desc' },
@@ -53,7 +56,8 @@
   <svelte:fragment slot="constraintProps">
     <div class="largeFormMarker">
       <div class="row">
-        <CheckboxField checked={isUnique} on:change={e => (isUnique = e.target.checked)} /> Is unique index
+        <CheckboxField checked={isUnique} on:change={e => (isUnique = e.target.checked)} disabled={isReadOnly} /> Is unique
+        index
       </div>
     </div>
   </svelte:fragment>