@finos/legend-application-studio 17.0.0 → 18.0.1

package/src/components/editor/edit-panel/connection-editor/RelationalDatabaseConnectionEditor.tsx

@@ -22,22 +22,16 @@ import {
   RELATIONAL_DATABASE_TAB_TYPE,
   POST_PROCESSOR_TYPE,
 } from '../../../../stores/editor-state/element-editor-state/connection/ConnectionEditorState.js';
-import { useState } from 'react';
 import {
   ResizablePanelGroup,
   ResizablePanel,
   ResizablePanelSplitter,
-  clsx,
   CustomSelectorInput,
-  CheckSquareIcon,
-  SquareIcon,
-  TimesIcon,
   ErrorIcon,
-  PencilIcon,
   PanelHeader,
   PanelHeaderActionItem,
   PlusIcon,
-  PanelTextEditor,
+  PanelFormTextEditor,
   ContextMenu,
   MenuContent,
   MenuContentItem,
@@ -50,6 +44,8 @@ import {
   Panel,
   Badge,
   PanelListSelectorItemLabel,
+  PanelSection,
+  PanelFormBooleanEditor,
 } from '@finos/legend-art';
 import { capitalize, prettyCONSTName } from '@finos/legend-shared';
 
@@ -75,9 +71,8 @@ import {
   PackageableElementExplicitReference,
   MapperPostProcessor,
 } from '@finos/legend-graph';
-import { runInAction } from 'mobx';
 import type { LegendStudioApplicationPlugin } from '../../../../stores/LegendStudioApplicationPlugin.js';
-import type { StoreRelational_LegendStudioApplicationPlugin_Extension } from '../../../../stores/StoreRelational_LegendStudioApplicationPlugin_Extension.js';
+import type { STO_Relational_LegendStudioApplicationPlugin_Extension } from '../../../../stores/STO_Relational_LegendStudioApplicationPlugin_Extension.js';
 import { DatabaseBuilder } from './DatabaseBuilder.js';
 import { useEditorStore } from '../../EditorStoreProvider.js';
 import {
@@ -86,7 +81,7 @@ import {
   type PackageableElementOption,
 } from '@finos/legend-application';
 import { StudioTextInputEditor } from '../../../shared/StudioTextInputEditor.js';
-import { connection_setStore } from '../../../../stores/graphModifier/DSLMapping_GraphModifierHelper.js';
+import { connection_setStore } from '../../../../stores/graphModifier/DSL_Mapping_GraphModifierHelper.js';
 import {
   apiTokenAuthenticationStrategy_setApiToken,
   bigQueryDatasourceSpecification_setDefaultDataset,
@@ -138,87 +133,36 @@ import {
   middleTierUsernamePasswordAuthenticationStrategy_setVaultReference,
   relationalDatabaseConnection_addPostProcessor,
   relationalDatabaseConnection_deletePostProcessor,
-} from '../../../../stores/graphModifier/StoreRelational_GraphModifierHelper.js';
+} from '../../../../stores/graphModifier/STO_Relational_GraphModifierHelper.js';
 import { MapperPostProcessorEditor } from './post-processor-editor/MapperPostProcessorEditor.js';
 import { UnsupportedEditorPanel } from '../UnsupportedElementEditor.js';
 import type { MapperPostProcessorEditorState } from '../../../../stores/editor-state/element-editor-state/connection/PostProcessorEditorState.js';
 
-/**
- * NOTE: this is a WIP we did to quickly assemble a modular UI for relational database connection editor
- * This is subjected to change and review, especially in terms in UX.
- */
-
-// TODO: consider to move this to shared
-export const ConnectionEditor_BooleanEditor = observer(
-  (props: {
-    name: string;
-    description?: string;
-    value: boolean | undefined;
-    isReadOnly: boolean;
-    update: (value: boolean | undefined) => void;
-  }) => {
-    const { value, name, description, isReadOnly, update } = props;
-    const toggle = (): void => {
-      if (!isReadOnly) {
-        update(!value);
-      }
-    };
-
-    return (
-      <div className="panel__content__form__section">
-        <div className="panel__content__form__section__header__label">
-          {capitalize(name)}
-        </div>
-        <div
-          className={clsx('panel__content__form__section__toggler', {
-            'panel__content__form__section__toggler--disabled': isReadOnly,
-          })}
-          onClick={toggle}
-        >
-          <button
-            className={clsx('panel__content__form__section__toggler__btn', {
-              'panel__content__form__section__toggler__btn--toggled': value,
-            })}
-            disabled={isReadOnly}
-            tabIndex={-1}
-          >
-            {value ? <CheckSquareIcon /> : <SquareIcon />}
-          </button>
-          <div className="panel__content__form__section__toggler__prompt">
-            {description}
-          </div>
-        </div>
-      </div>
-    );
-  },
-);
-
-// TODO: consider to move this to shared
-export const ConnectionEditor_TextEditor = observer(
+const LocalH2DatasourceSpecificationEditor = observer(
   (props: {
-    name: string;
-    description?: string;
-    value: string | undefined;
+    sourceSpec: LocalH2DatasourceSpecification;
     isReadOnly: boolean;
-    language: EDITOR_LANGUAGE;
-    update: (value: string | undefined) => void;
   }) => {
-    const { value, name, description, isReadOnly, language, update } = props;
+    const { sourceSpec, isReadOnly } = props;
+    // TODO?: support CSV and toggler to go to CSV mode
+    const SQLValue = sourceSpec.testDataSetupSqls.join('\n');
 
     return (
       <div className="panel__content__form__section">
         <div className="panel__content__form__section__header__label">
-          {capitalize(name)}
-        </div>
-        <div className="panel__content__form__section__header__prompt">
-          {description}
+          {capitalize('test data setup SQL')}
         </div>
         <div className="panel__content__form__section__text-editor">
           <StudioTextInputEditor
-            inputValue={value ?? ''}
-            updateInput={update}
+            inputValue={SQLValue}
+            updateInput={(value: string | undefined): void =>
+              localH2DatasourceSpecification_setTestDataSetupSqls(
+                sourceSpec,
+                value ? [value] : [],
+              )
+            }
             isReadOnly={isReadOnly}
-            language={language}
+            language={EDITOR_LANGUAGE.SQL}
           />
         </div>
       </div>
@@ -226,216 +170,6 @@ export const ConnectionEditor_TextEditor = observer(
   },
 );
 
-// TODO: consider to move this to shared
-export const ConnectionEditor_ArrayEditor = observer(
-  (props: {
-    name: string;
-    description?: string;
-    values: string[];
-    isReadOnly: boolean;
-    update: (updatedValues: string[]) => void;
-  }) => {
-    const { name, description, values, isReadOnly, update } = props;
-    const arrayValues = values;
-    // NOTE: `showEditInput` is either boolean (to hide/show the add value button) or a number (index of the item being edited)
-    const [showEditInput, setShowEditInput] = useState<boolean | number>(false);
-    const [itemValue, setItemValue] = useState<string>('');
-    const showAddItemInput = (): void => setShowEditInput(true);
-    const showEditItemInput =
-      (value: string, idx: number): (() => void) =>
-      (): void => {
-        setItemValue(value);
-        setShowEditInput(idx);
-      };
-    const hideAddOrEditItemInput = (): void => {
-      setShowEditInput(false);
-      setItemValue('');
-    };
-    const changeItemInputValue: React.ChangeEventHandler<HTMLInputElement> = (
-      event,
-    ) => setItemValue(event.target.value);
-    const addValue = (): void => {
-      if (itemValue && !isReadOnly && !arrayValues.includes(itemValue)) {
-        update(arrayValues.concat([itemValue]));
-      }
-      hideAddOrEditItemInput();
-    };
-    const updateValue =
-      (idx: number): (() => void) =>
-      (): void => {
-        if (itemValue && !isReadOnly && !arrayValues.includes(itemValue)) {
-          runInAction(() => {
-            arrayValues[idx] = itemValue;
-          });
-          update(arrayValues);
-        }
-        hideAddOrEditItemInput();
-      };
-    const deleteValue =
-      (idx: number): (() => void) =>
-      (): void => {
-        if (!isReadOnly) {
-          runInAction(() => arrayValues.splice(idx, 1));
-          update(arrayValues);
-          // Since we keep track of the value currently being edited using the index, we have to account for it as we delete entry
-          if (typeof showEditInput === 'number' && showEditInput > idx) {
-            setShowEditInput(showEditInput - 1);
-          }
-        }
-      };
-
-    return (
-      <div className="panel__content__form__section">
-        <div className="panel__content__form__section__header__label">
-          {capitalize(name)}
-        </div>
-        <div className="panel__content__form__section__header__prompt">
-          {description}
-        </div>
-        <div className="panel__content__form__section__list">
-          <div className="panel__content__form__section__list__items">
-            {arrayValues.map((value, idx) => (
-              // NOTE: since the value must be unique, we will use it as the key
-              <div
-                key={value}
-                className={
-                  showEditInput === idx
-                    ? 'panel__content__form__section__list__new-item'
-                    : 'panel__content__form__section__list__item'
-                }
-              >
-                {showEditInput === idx ? (
-                  <>
-                    <input
-                      className="panel__content__form__section__input panel__content__form__section__list__new-item__input"
-                      spellCheck={false}
-                      disabled={isReadOnly}
-                      value={itemValue}
-                      onChange={changeItemInputValue}
-                    />
-                    <div className="panel__content__form__section__list__new-item__actions">
-                      <button
-                        className="panel__content__form__section__list__new-item__add-btn btn btn--dark"
-                        disabled={isReadOnly || arrayValues.includes(itemValue)}
-                        onClick={updateValue(idx)}
-                        tabIndex={-1}
-                      >
-                        Save
-                      </button>
-                      <button
-                        className="panel__content__form__section__list__new-item__cancel-btn btn btn--dark"
-                        disabled={isReadOnly}
-                        onClick={hideAddOrEditItemInput}
-                        tabIndex={-1}
-                      >
-                        Cancel
-                      </button>
-                    </div>
-                  </>
-                ) : (
-                  <>
-                    <div className="panel__content__form__section__list__item__value">
-                      {value}
-                    </div>
-                    <div className="panel__content__form__section__list__item__actions">
-                      <button
-                        className="panel__content__form__section__list__item__edit-btn"
-                        disabled={isReadOnly}
-                        onClick={showEditItemInput(value, idx)}
-                        tabIndex={-1}
-                      >
-                        <PencilIcon />
-                      </button>
-                      <button
-                        className="panel__content__form__section__list__item__remove-btn"
-                        disabled={isReadOnly}
-                        onClick={deleteValue(idx)}
-                        tabIndex={-1}
-                      >
-                        <TimesIcon />
-                      </button>
-                    </div>
-                  </>
-                )}
-              </div>
-            ))}
-            {/* ADD NEW VALUE */}
-            {showEditInput === true && (
-              <div className="panel__content__form__section__list__new-item">
-                <input
-                  className="panel__content__form__section__input panel__content__form__section__list__new-item__input"
-                  spellCheck={false}
-                  disabled={isReadOnly}
-                  value={itemValue}
-                  onChange={changeItemInputValue}
-                />
-                <div className="panel__content__form__section__list__new-item__actions">
-                  <button
-                    className="panel__content__form__section__list__new-item__add-btn btn btn--dark"
-                    disabled={isReadOnly || arrayValues.includes(itemValue)}
-                    onClick={addValue}
-                    tabIndex={-1}
-                  >
-                    Save
-                  </button>
-                  <button
-                    className="panel__content__form__section__list__new-item__cancel-btn btn btn--dark"
-                    disabled={isReadOnly}
-                    onClick={hideAddOrEditItemInput}
-                    tabIndex={-1}
-                  >
-                    Cancel
-                  </button>
-                </div>
-              </div>
-            )}
-          </div>
-          {showEditInput !== true && (
-            <div className="panel__content__form__section__list__new-item__add">
-              <button
-                className="panel__content__form__section__list__new-item__add-btn btn btn--dark"
-                disabled={isReadOnly}
-                onClick={showAddItemInput}
-                tabIndex={-1}
-              >
-                Add Value
-              </button>
-            </div>
-          )}
-        </div>
-      </div>
-    );
-  },
-);
-
-const LocalH2DatasourceSpecificationEditor = observer(
-  (props: {
-    sourceSpec: LocalH2DatasourceSpecification;
-    isReadOnly: boolean;
-  }) => {
-    const { sourceSpec, isReadOnly } = props;
-    const SQLValue = sourceSpec.testDataSetupSqls.join('\n');
-    // TODO: support CSV and toggler to go to CSV mode
-    return (
-      <>
-        <ConnectionEditor_TextEditor
-          isReadOnly={isReadOnly}
-          value={SQLValue}
-          name={'test data setup SQL'}
-          language={EDITOR_LANGUAGE.SQL}
-          update={(value: string | undefined): void =>
-            localH2DatasourceSpecification_setTestDataSetupSqls(
-              sourceSpec,
-              value ? [value] : [],
-            )
-          }
-        />
-      </>
-    );
-  },
-);
-
-//data source
 const StaticDatasourceSpecificationEditor = observer(
   (props: {
     sourceSpec: StaticDatasourceSpecification;
@@ -448,8 +182,8 @@ const StaticDatasourceSpecificationEditor = observer(
     };
 
     return (
-      <>
-        <PanelTextEditor
+      <PanelSection>
+        <PanelFormTextEditor
           isReadOnly={isReadOnly}
           value={sourceSpec.host}
           name={'host'}
@@ -457,20 +191,16 @@ const StaticDatasourceSpecificationEditor = observer(
             staticDatasourceSpecification_setHost(sourceSpec, value ?? '')
           }
         />
-        <div className="panel__content__form__section">
-          <div className="panel__content__form__section__header__label">
-            port
-          </div>
-          <input
-            className="panel__content__form__section__input panel__content__form__section__number-input"
-            spellCheck={false}
-            type="number"
-            disabled={isReadOnly}
-            value={sourceSpec.port}
-            onChange={changePort}
-          />
-        </div>
-        <PanelTextEditor
+        <div className="panel__content__form__section__header__label">port</div>
+        <input
+          className="panel__content__form__section__input panel__content__form__section__number-input"
+          spellCheck={false}
+          type="number"
+          disabled={isReadOnly}
+          value={sourceSpec.port}
+          onChange={changePort}
+        />
+        <PanelFormTextEditor
           isReadOnly={isReadOnly}
           value={sourceSpec.databaseName}
           name={'database'}
@@ -481,7 +211,7 @@ const StaticDatasourceSpecificationEditor = observer(
             )
           }
         />
-      </>
+      </PanelSection>
     );
   },
 );
@@ -493,8 +223,8 @@ const EmbeddedH2DatasourceSpecificationEditor = observer(
   }) => {
     const { sourceSpec, isReadOnly } = props;
     return (
-      <>
-        <PanelTextEditor
+      <PanelSection>
+        <PanelFormTextEditor
           isReadOnly={isReadOnly}
           value={sourceSpec.databaseName}
           name={'database'}
@@ -505,7 +235,7 @@ const EmbeddedH2DatasourceSpecificationEditor = observer(
             )
           }
         />
-        <PanelTextEditor
+        <PanelFormTextEditor
           isReadOnly={isReadOnly}
           value={sourceSpec.directory}
           name={'directory'}
@@ -516,7 +246,7 @@ const EmbeddedH2DatasourceSpecificationEditor = observer(
             )
           }
         />
-        <ConnectionEditor_BooleanEditor
+        <PanelFormBooleanEditor
           isReadOnly={isReadOnly}
           value={sourceSpec.autoServerMode}
           name={'auto server mode'}
@@ -527,7 +257,7 @@ const EmbeddedH2DatasourceSpecificationEditor = observer(
             )
           }
         />
-      </>
+      </PanelSection>
     );
   },
 );
@@ -539,8 +269,8 @@ const DatabricksDatasourceSpecificationEditor = observer(
   }) => {
     const { sourceSpec, isReadOnly } = props;
     return (
-      <>
-        <PanelTextEditor
+      <PanelSection>
+        <PanelFormTextEditor
           isReadOnly={isReadOnly}
           value={sourceSpec.hostname}
           name="hostname"
@@ -551,7 +281,7 @@ const DatabricksDatasourceSpecificationEditor = observer(
             )
           }
         />
-        <PanelTextEditor
+        <PanelFormTextEditor
           isReadOnly={isReadOnly}
           value={sourceSpec.port}
           name="port"
@@ -559,7 +289,7 @@ const DatabricksDatasourceSpecificationEditor = observer(
             databricksDatasourceSpecification_setPort(sourceSpec, value ?? '')
           }
         />
-        <PanelTextEditor
+        <PanelFormTextEditor
           isReadOnly={isReadOnly}
           value={sourceSpec.protocol}
           name="protocol"
@@ -570,7 +300,7 @@ const DatabricksDatasourceSpecificationEditor = observer(
             )
           }
         />
-        <PanelTextEditor
+        <PanelFormTextEditor
           isReadOnly={isReadOnly}
           value={sourceSpec.httpPath}
           name="httpPath"
@@ -581,7 +311,7 @@ const DatabricksDatasourceSpecificationEditor = observer(
             )
           }
         />
-      </>
+      </PanelSection>
     );
   },
 );
@@ -593,8 +323,8 @@ const SnowflakeDatasourceSpecificationEditor = observer(
   }) => {
     const { sourceSpec, isReadOnly } = props;
     return (
-      <>
-        <PanelTextEditor
+      <PanelSection>
+        <PanelFormTextEditor
           isReadOnly={isReadOnly}
           value={sourceSpec.accountName}
           name="account"
@@ -602,7 +332,7 @@ const SnowflakeDatasourceSpecificationEditor = observer(
             snowflakeDatasourceSpec_setAccountName(sourceSpec, value ?? '')
           }
         />
-        <PanelTextEditor
+        <PanelFormTextEditor
           isReadOnly={isReadOnly}
           value={sourceSpec.region}
           name="region"
@@ -610,7 +340,7 @@ const SnowflakeDatasourceSpecificationEditor = observer(
             snowflakeDatasourceSpec_setRegion(sourceSpec, value ?? '')
           }
         />
-        <PanelTextEditor
+        <PanelFormTextEditor
           isReadOnly={isReadOnly}
           value={sourceSpec.warehouseName}
           name="warehouse"
@@ -618,7 +348,7 @@ const SnowflakeDatasourceSpecificationEditor = observer(
             snowflakeDatasourceSpec_setWarehouseName(sourceSpec, value ?? '')
           }
         />
-        <PanelTextEditor
+        <PanelFormTextEditor
           isReadOnly={isReadOnly}
           value={sourceSpec.databaseName}
           name="database"
@@ -626,7 +356,7 @@ const SnowflakeDatasourceSpecificationEditor = observer(
             snowflakeDatasourceSpec_setDatabaseName(sourceSpec, value ?? '')
           }
         />
-        <PanelTextEditor
+        <PanelFormTextEditor
           isReadOnly={isReadOnly}
           value={sourceSpec.cloudType}
           name="cloud type"
@@ -634,7 +364,7 @@ const SnowflakeDatasourceSpecificationEditor = observer(
             snowflakeDatasourceSpec_setCloudType(sourceSpec, value)
           }
         />
-        <PanelTextEditor
+        <PanelFormTextEditor
           isReadOnly={isReadOnly}
           value={sourceSpec.proxyHost}
           name="proxy host"
@@ -642,7 +372,7 @@ const SnowflakeDatasourceSpecificationEditor = observer(
             snowflakeDatasourceSpec_setProxyHost(sourceSpec, value)
           }
         />
-        <PanelTextEditor
+        <PanelFormTextEditor
           isReadOnly={isReadOnly}
           value={sourceSpec.proxyPort}
           name="proxy port"
@@ -650,7 +380,7 @@ const SnowflakeDatasourceSpecificationEditor = observer(
             snowflakeDatasourceSpec_setProxyPort(sourceSpec, value)
           }
         />
-        <PanelTextEditor
+        <PanelFormTextEditor
           isReadOnly={isReadOnly}
           value={sourceSpec.nonProxyHosts}
           name="non proxy hosts"
@@ -658,7 +388,7 @@ const SnowflakeDatasourceSpecificationEditor = observer(
             snowflakeDatasourceSpec_setNonProxyHosts(sourceSpec, value)
           }
         />
-        <PanelTextEditor
+        <PanelFormTextEditor
           isReadOnly={isReadOnly}
           value={sourceSpec.organization}
           name="organization"
@@ -666,7 +396,7 @@ const SnowflakeDatasourceSpecificationEditor = observer(
             snowflakeDatasourceSpec_setOrganization(sourceSpec, value)
           }
         />
-        <PanelTextEditor
+        <PanelFormTextEditor
           isReadOnly={isReadOnly}
           value={sourceSpec.accountType}
           name="account type"
@@ -674,7 +404,7 @@ const SnowflakeDatasourceSpecificationEditor = observer(
             snowflakeDatasourceSpec_setAccountType(sourceSpec, value)
           }
         />
-        <PanelTextEditor
+        <PanelFormTextEditor
           isReadOnly={isReadOnly}
           value={sourceSpec.role}
           name="role"
@@ -683,7 +413,7 @@ const SnowflakeDatasourceSpecificationEditor = observer(
           }
         />
         {/* TODO: we should reconsider adding this field, it's an optional boolean, should we default it to `undefined` when it's `false`?*/}
-        <ConnectionEditor_BooleanEditor
+        <PanelFormBooleanEditor
           isReadOnly={isReadOnly}
           value={sourceSpec.quotedIdentifiersIgnoreCase}
           name="quoted identifiers ignore case"
@@ -695,7 +425,7 @@ const SnowflakeDatasourceSpecificationEditor = observer(
             )
           }
         />
-      </>
+      </PanelSection>
     );
   },
 );
@@ -711,8 +441,8 @@ const RedshiftDatasourceSpecificationEditor = observer(
       redshiftDatasourceSpecification_setPort(sourceSpec, parseInt(val, 10));
     };
     return (
-      <>
-        <PanelTextEditor
+      <PanelSection>
+        <PanelFormTextEditor
           isReadOnly={isReadOnly}
           value={sourceSpec.host}
           name="host"
@@ -733,7 +463,7 @@ const RedshiftDatasourceSpecificationEditor = observer(
             onChange={changePort}
           />
         </div>
-        <PanelTextEditor
+        <PanelFormTextEditor
           isReadOnly={isReadOnly}
           value={sourceSpec.databaseName}
           name="database"
@@ -745,7 +475,7 @@ const RedshiftDatasourceSpecificationEditor = observer(
           }
         />
 
-        <PanelTextEditor
+        <PanelFormTextEditor
           isReadOnly={isReadOnly}
           value={sourceSpec.region}
           name="region"
@@ -753,7 +483,7 @@ const RedshiftDatasourceSpecificationEditor = observer(
             redshiftDatasourceSpecification_setRegion(sourceSpec, value ?? '')
           }
         />
-        <PanelTextEditor
+        <PanelFormTextEditor
           isReadOnly={isReadOnly}
           value={sourceSpec.clusterID}
           name="cluster"
@@ -764,7 +494,7 @@ const RedshiftDatasourceSpecificationEditor = observer(
             )
           }
         />
-        <PanelTextEditor
+        <PanelFormTextEditor
           isReadOnly={isReadOnly}
           value={sourceSpec.endpointURL}
           name="endpointURL"
@@ -775,7 +505,7 @@ const RedshiftDatasourceSpecificationEditor = observer(
             )
           }
         />
-      </>
+      </PanelSection>
     );
   },
 );
@@ -787,8 +517,8 @@ const BigQueryDatasourceSpecificationEditor = observer(
   }) => {
     const { sourceSpec, isReadOnly } = props;
     return (
-      <>
-        <PanelTextEditor
+      <PanelSection>
+        <PanelFormTextEditor
           isReadOnly={isReadOnly}
           value={sourceSpec.projectId}
           name={'project id'}
@@ -799,7 +529,7 @@ const BigQueryDatasourceSpecificationEditor = observer(
             )
           }
         />
-        <PanelTextEditor
+        <PanelFormTextEditor
           isReadOnly={isReadOnly}
           value={sourceSpec.defaultDataset}
           name={'default dataset'}
@@ -810,7 +540,7 @@ const BigQueryDatasourceSpecificationEditor = observer(
             )
           }
         />
-        <PanelTextEditor
+        <PanelFormTextEditor
           isReadOnly={isReadOnly}
           value={sourceSpec.proxyHost}
           name="proxy host"
@@ -822,7 +552,7 @@ const BigQueryDatasourceSpecificationEditor = observer(
             )
           }
         />
-        <PanelTextEditor
+        <PanelFormTextEditor
           isReadOnly={isReadOnly}
           value={sourceSpec.proxyPort}
           name="proxy port"
@@ -834,7 +564,7 @@ const BigQueryDatasourceSpecificationEditor = observer(
             )
           }
         />
-      </>
+      </PanelSection>
     );
   },
 );
@@ -849,7 +579,7 @@ const DelegatedKerberosAuthenticationStrategyEditor = observer(
     const { authSpec, isReadOnly } = props;
     return (
       <>
-        <PanelTextEditor
+        <PanelFormTextEditor
           isReadOnly={isReadOnly}
           value={authSpec.serverPrincipal}
           name={'server principal'}
@@ -873,7 +603,7 @@ const ApiTokenAuthenticationStrategyEditor = observer(
     const { authSpec, isReadOnly } = props;
     return (
       <>
-        <PanelTextEditor
+        <PanelFormTextEditor
           isReadOnly={isReadOnly}
           value={authSpec.apiToken}
           name={'apiTokenRef'}
@@ -893,8 +623,8 @@ const SnowflakePublicAuthenticationStrategyEditor = observer(
   }) => {
     const { authSpec, isReadOnly } = props;
     return (
-      <>
-        <PanelTextEditor
+      <PanelSection>
+        <PanelFormTextEditor
           isReadOnly={isReadOnly}
           value={authSpec.privateKeyVaultReference}
           name={'private key vault reference'}
@@ -905,7 +635,7 @@ const SnowflakePublicAuthenticationStrategyEditor = observer(
             )
           }
         />
-        <PanelTextEditor
+        <PanelFormTextEditor
           isReadOnly={isReadOnly}
           value={authSpec.passPhraseVaultReference}
           name={'pass phrase vault reference'}
@@ -916,7 +646,7 @@ const SnowflakePublicAuthenticationStrategyEditor = observer(
             )
           }
         />
-        <PanelTextEditor
+        <PanelFormTextEditor
           isReadOnly={isReadOnly}
           value={authSpec.publicUserName}
           name={'public user name'}
@@ -927,7 +657,7 @@ const SnowflakePublicAuthenticationStrategyEditor = observer(
             )
           }
         />
-      </>
+      </PanelSection>
     );
   },
 );
@@ -937,7 +667,7 @@ const OAuthAuthenticationStrategyEditor = observer(
     const { authSpec, isReadOnly } = props;
     return (
       <>
-        <PanelTextEditor
+        <PanelFormTextEditor
           isReadOnly={isReadOnly}
           value={authSpec.oauthKey}
           name={'oauth key'}
@@ -945,7 +675,7 @@ const OAuthAuthenticationStrategyEditor = observer(
             oAuthAuthenticationStrategy_setOauthKey(authSpec, value ?? '')
           }
         />
-        <PanelTextEditor
+        <PanelFormTextEditor
           isReadOnly={isReadOnly}
           value={authSpec.scopeName}
           name={'scope name'}
@@ -966,7 +696,7 @@ const UsernamePasswordAuthenticationStrategyEditor = observer(
     const { authSpec, isReadOnly } = props;
     return (
       <>
-        <PanelTextEditor
+        <PanelFormTextEditor
           isReadOnly={isReadOnly}
           value={authSpec.baseVaultReference}
           name={'base vault reference'}
@@ -977,7 +707,7 @@ const UsernamePasswordAuthenticationStrategyEditor = observer(
             )
           }
         />
-        <PanelTextEditor
+        <PanelFormTextEditor
           isReadOnly={isReadOnly}
           value={authSpec.userNameVaultReference}
           name={'user name vault reference'}
@@ -988,7 +718,7 @@ const UsernamePasswordAuthenticationStrategyEditor = observer(
             )
           }
         />
-        <PanelTextEditor
+        <PanelFormTextEditor
           isReadOnly={isReadOnly}
           value={authSpec.passwordVaultReference}
           name={'password vault reference'}
@@ -1012,7 +742,7 @@ const MiddleTierUsernamePasswordAuthenticationStrategyEditor = observer(
     const { authSpec, isReadOnly } = props;
     return (
       <>
-        <PanelTextEditor
+        <PanelFormTextEditor
           isReadOnly={isReadOnly}
           value={authSpec.vaultReference}
           name={'vault reference'}
@@ -1038,7 +768,7 @@ const GCPWorkloadIdentityFederationAuthenticationStrategyEditor = observer(
     const GCPScopes = authSpec.additionalGcpScopes.join('\n');
     return (
       <>
-        <PanelTextEditor
+        <PanelFormTextEditor
           isReadOnly={isReadOnly}
           value={authSpec.serviceAccountEmail}
           name={'Service Account Email'}
@@ -1049,7 +779,7 @@ const GCPWorkloadIdentityFederationAuthenticationStrategyEditor = observer(
             )
           }
         />
-        <PanelTextEditor
+        <PanelFormTextEditor
           isReadOnly={isReadOnly}
           value={GCPScopes}
           name={'Additional GCP Scopes'}
@@ -1159,7 +889,7 @@ const renderEditorPostProcessor = (
     const extraPostProcessorEditorRenderers = plugins.flatMap(
       (plugin) =>
         (
-          plugin as StoreRelational_LegendStudioApplicationPlugin_Extension
+          plugin as STO_Relational_LegendStudioApplicationPlugin_Extension
         ).getExtraPostProcessorEditorRenderers?.() ?? [],
     );
     for (const editorRenderer of extraPostProcessorEditorRenderers) {
@@ -1217,7 +947,7 @@ const PostProcessorRelationalConnectionEditor = observer(
         plugins.flatMap(
           (plugin) =>
             (
-              plugin as StoreRelational_LegendStudioApplicationPlugin_Extension
+              plugin as STO_Relational_LegendStudioApplicationPlugin_Extension
             ).getExtraPostProcessorClassifiers?.() ?? [],
         ),
       )
@@ -1242,7 +972,7 @@ const PostProcessorRelationalConnectionEditor = observer(
             const extraPostProcessorCreators = plugins.flatMap(
               (plugin) =>
                 (
-                  plugin as StoreRelational_LegendStudioApplicationPlugin_Extension
+                  plugin as STO_Relational_LegendStudioApplicationPlugin_Extension
                 ).getExtraPostProcessorCreators?.() ?? [],
             );
             for (const creator of extraPostProcessorCreators) {
@@ -1269,7 +999,7 @@ const PostProcessorRelationalConnectionEditor = observer(
         const extraPostProcessorEditorClassifier = plugins.flatMap(
           (plugin) =>
             (
-              plugin as StoreRelational_LegendStudioApplicationPlugin_Extension
+              plugin as STO_Relational_LegendStudioApplicationPlugin_Extension
             ).getExtraPostProcessorClassifierGetters?.() ?? [],
         );
         for (const classify of extraPostProcessorEditorClassifier) {
@@ -1450,7 +1180,7 @@ const renderDatasourceSpecificationEditor = (
     const extraDatasourceSpecificationEditorRenderers = plugins.flatMap(
       (plugin) =>
         (
-          plugin as StoreRelational_LegendStudioApplicationPlugin_Extension
+          plugin as STO_Relational_LegendStudioApplicationPlugin_Extension
         ).getExtraDatasourceSpecificationEditorRenderers?.() ?? [],
     );
     for (const editorRenderer of extraDatasourceSpecificationEditorRenderers) {
@@ -1527,7 +1257,7 @@ const renderAuthenticationStrategyEditor = (
     const extraAuthenticationStrategyEditorRenderers = plugins.flatMap(
       (plugin) =>
         (
-          plugin as StoreRelational_LegendStudioApplicationPlugin_Extension
+          plugin as STO_Relational_LegendStudioApplicationPlugin_Extension
         ).getExtraAuthenticationStrategyEditorRenderers?.() ?? [],
     );
     for (const editorRenderer of extraAuthenticationStrategyEditorRenderers) {
@@ -1574,7 +1304,7 @@ const RelationalConnectionGeneralEditor = observer(
         plugins.flatMap(
           (plugin) =>
             (
-              plugin as StoreRelational_LegendStudioApplicationPlugin_Extension
+              plugin as STO_Relational_LegendStudioApplicationPlugin_Extension
             ).getExtraDatasourceSpecificationTypes?.() ?? [],
         ),
       )
@@ -1602,7 +1332,7 @@ const RelationalConnectionGeneralEditor = observer(
         plugins.flatMap(
           (plugin) =>
             (
-              plugin as StoreRelational_LegendStudioApplicationPlugin_Extension
+              plugin as STO_Relational_LegendStudioApplicationPlugin_Extension
             ).getExtraAuthenticationStrategyTypes?.() ?? [],
         ),
       )
@@ -1626,7 +1356,7 @@ const RelationalConnectionGeneralEditor = observer(
       <div className="relational-connection-editor">
         <ResizablePanelGroup orientation="horizontal">
           <ResizablePanel size={200} minSize={15}>
-            <div className="panel">
+            <Panel>
               <PanelHeader title="general"></PanelHeader>
 
               <div className="panel__content relational-connection-editor__general">
@@ -1641,7 +1371,7 @@ const RelationalConnectionGeneralEditor = observer(
                     darkMode={true}
                   />
                 </div>
-                <ConnectionEditor_BooleanEditor
+                <PanelFormBooleanEditor
                   isReadOnly={isReadOnly}
                   value={connection.quoteIdentifiers}
                   name="Quote identifiers"
@@ -1651,7 +1381,7 @@ const RelationalConnectionGeneralEditor = observer(
                   }
                 />
               </div>
-            </div>
+            </Panel>
           </ResizablePanel>
           <ResizablePanelSplitter />
           <ResizablePanel>
@@ -1734,14 +1464,14 @@ export const RelationalDatabaseConnectionEditor = observer(
         );
       };
     return (
-      <>
+      <Panel>
         <PanelTabs
           tabTitles={Object.values(RELATIONAL_DATABASE_TAB_TYPE)}
           changeTheTab={changeTab}
           selectedTab={selectedTab}
           tabClassName="relational-connection-editor__tab"
         />
-        <div className="panel__content">
+        <PanelContent>
           {selectedTab === RELATIONAL_DATABASE_TAB_TYPE.GENERAL && (
             <RelationalConnectionGeneralEditor
               connectionValueState={connectionValueState}
@@ -1760,8 +1490,8 @@ export const RelationalDatabaseConnectionEditor = observer(
               isReadOnly={isReadOnly}
             />
           )}
-        </div>
-      </>
+        </PanelContent>
+      </Panel>
     );
   },
 );