Implement comprehensive database editor with editing capabilities

.changeset/orange-wolves-swim.md

@@ -0,0 +1,5 @@
+---
+"@finos/legend-extension-dsl-data-space-studio": minor
+---
+
+Add comprehensive DataSpace editor with tabbed interface

.changeset/swift-banks-turn.md

@@ -0,0 +1,5 @@
+---
+"@finos/legend-application-studio": minor
+---
+
+Add comprehensive database editor with editing capabilities for database elements

packages/legend-application-studio/src/components/editor/editor-group/database/DatabaseEditor.scss

@@ -0,0 +1,197 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.database-editor {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+
+  &__header {
+    &__lock {
+      margin-right: 0.5rem;
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+
+  &__tabs {
+    display: flex;
+    border-bottom: 1px solid var(--color-dark-grey-200);
+  }
+
+  &__tab {
+    padding: 0.5rem 1rem;
+    cursor: pointer;
+    font-weight: 500;
+    color: var(--color-dark-grey-400);
+
+    &:hover {
+      color: var(--color-dark-grey-50);
+    }
+
+    &--active {
+      color: var(--color-dark-grey-50);
+      border-bottom: 2px solid var(--color-blue-200);
+    }
+  }
+
+  &__tab-content {
+    flex: 1;
+    overflow: auto;
+  }
+
+  &__general-panel {
+    padding: 1rem;
+
+    &__section {
+      margin-bottom: 1.5rem;
+
+      &__header {
+        font-weight: 600;
+        margin-bottom: 0.5rem;
+      }
+
+      &__content {
+        padding-left: 0.5rem;
+      }
+    }
+
+    &__field {
+      margin-bottom: 0.5rem;
+      display: flex;
+
+      &__label {
+        font-weight: 500;
+        width: 120px;
+      }
+
+      &__value {
+        flex: 1;
+      }
+    }
+  }
+
+  &__schemas-panel,
+  &__joins-panel,
+  &__filters-panel {
+    padding: 1rem;
+
+    &__actions {
+      margin-bottom: 1rem;
+    }
+
+    &__empty {
+      color: var(--color-dark-grey-400);
+      font-style: italic;
+    }
+  }
+
+  &__schema,
+  &__join,
+  &__filter {
+    margin-bottom: 1rem;
+
+    &__header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 0.5rem;
+    }
+
+    &__name-input {
+      flex: 1;
+      margin-right: 0.5rem;
+    }
+
+    &__remove-button {
+      flex-shrink: 0;
+    }
+  }
+
+  &__schema__tables {
+    margin-left: 1rem;
+
+    &__header {
+      font-weight: 500;
+      margin-bottom: 0.5rem;
+    }
+
+    &__empty {
+      color: var(--color-dark-grey-400);
+      font-style: italic;
+      margin-left: 1rem;
+    }
+  }
+
+  &__table {
+    margin-left: 1rem;
+    margin-bottom: 0.25rem;
+  }
+
+  &__join__details,
+  &__filter__details {
+    margin-left: 1rem;
+    margin-bottom: 0.5rem;
+    color: var(--color-dark-grey-300);
+  }
+
+  .embedded-query-builder {
+    height: 100%;
+  }
+}
+
+.dark-mode {
+  .database-editor {
+    &__tab {
+      color: var(--color-light-grey-200);
+
+      &:hover {
+        color: var(--color-light-grey-50);
+      }
+
+      &--active {
+        color: var(--color-light-grey-50);
+        border-bottom-color: var(--color-blue-400);
+      }
+    }
+
+    &__schemas-panel,
+    &__joins-panel,
+    &__filters-panel {
+      &__empty {
+        color: var(--color-light-grey-200);
+      }
+    }
+
+    &__schema__tables {
+      &__empty {
+        color: var(--color-light-grey-200);
+      }
+    }
+
+    &__join__details,
+    &__filter__details {
+      color: var(--color-light-grey-200);
+    }
+  }
+}

packages/legend-application-studio/src/components/editor/editor-group/database/DatabaseEditor.tsx

@@ -0,0 +1,135 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { observer } from 'mobx-react-lite';
+import React from 'react';
+import {
+  BlankPanelContent,
+  Button,
+  LockIcon,
+  Panel,
+  PanelContent,
+  PanelHeader,
+  PanelLoadingIndicator,
+} from '@finos/legend-art';
+import { flowResult } from 'mobx';
+import { useApplicationStore } from '@finos/legend-application';
+import { useEditorStore } from '../../EditorStoreProvider.js';
+import {
+  DATABASE_EDITOR_TAB,
+  DatabaseEditorState,
+} from '../../../../stores/editor/editor-state/element-editor-state/database/DatabaseEditorState.js';
+import { DatabaseGeneralPanel } from './DatabaseGeneralPanel.js';
+import { DatabaseSchemasPanel } from './DatabaseSchemasPanel.js';
+import { DatabaseJoinsPanel } from './DatabaseJoinsPanel.js';
+import { DatabaseFiltersPanel } from './DatabaseFiltersPanel.js';
+
+export const DatabaseEditor = observer(() => {
+  const editorStore = useEditorStore();
+  const applicationStore = useApplicationStore();
+  const databaseEditorState =
+    editorStore.tabManagerState.getCurrentEditorState(DatabaseEditorState);
+  const database = databaseEditorState.database;
+  const isReadOnly = databaseEditorState.isReadOnly;
+
+  const handleTextModeClick = applicationStore.guardUnhandledError(() =>
+    flowResult(editorStore.toggleTextMode()),
+  );
+
+  const handleTabChange = (tabIndex: number): void => {
+    const tabs = Object.values(DATABASE_EDITOR_TAB);
+    if (tabIndex >= 0 && tabIndex < tabs.length) {
+      databaseEditorState.setSelectedTab(tabs[tabIndex] as DATABASE_EDITOR_TAB);
+    }
+  };
+
+  const renderTabContent = (): React.ReactNode => {
+    switch (databaseEditorState.selectedTab) {
+      case DATABASE_EDITOR_TAB.GENERAL:
+        return (
+          <DatabaseGeneralPanel databaseEditorState={databaseEditorState} />
+        );
+      case DATABASE_EDITOR_TAB.SCHEMAS:
+        return (
+          <DatabaseSchemasPanel databaseEditorState={databaseEditorState} />
+        );
+      case DATABASE_EDITOR_TAB.JOINS:
+        return <DatabaseJoinsPanel databaseEditorState={databaseEditorState} />;
+      case DATABASE_EDITOR_TAB.FILTERS:
+        return (
+          <DatabaseFiltersPanel databaseEditorState={databaseEditorState} />
+        );
+      case DATABASE_EDITOR_TAB.QUERY:
+        return (
+          <div className="embedded-query-builder">
+            {databaseEditorState.queryDatabaseState && (
+              <div>Query functionality will be implemented here</div>
+            )}
+          </div>
+        );
+      default:
+        return <BlankPanelContent>Select a tab</BlankPanelContent>;
+    }
+  };
+
+  return (
+    <div className="database-editor">
+      <Panel>
+        <PanelHeader>
+          <div className="panel__header__title">
+            {isReadOnly && (
+              <div className="database-editor__header__lock">
+                <LockIcon />
+              </div>
+            )}
+            <div className="panel__header__title__label">database</div>
+            <div className="panel__header__title__content">{database.name}</div>
+          </div>
+          <div className="panel__header__actions">
+            {!isReadOnly && (
+              <Button
+                className="panel__header__action"
+                text="Edit in Text Mode"
+                onClick={handleTextModeClick}
+              />
+            )}
+          </div>
+        </PanelHeader>
+        <div className="panel__content database-editor__content">
+          <div className="database-editor__tabs">
+            {Object.values(DATABASE_EDITOR_TAB).map((tab, index) => (
+              <div
+                key={String(tab)}
+                className={`database-editor__tab ${
+                  tab === databaseEditorState.selectedTab
+                    ? 'database-editor__tab--active'
+                    : ''
+                }`}
+                onClick={() => handleTabChange(index)}
+              >
+                {String(tab)}
+              </div>
+            ))}
+          </div>
+          <PanelContent className="database-editor__tab-content">
+            <PanelLoadingIndicator isLoading={false} />
+            {renderTabContent()}
+          </PanelContent>
+        </div>
+      </Panel>
+    </div>
+  );
+});