respect readonly connection flag in table editor

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();