@finos/legend-lego 0.1.3 → 0.1.5

package/lib/graph-editor/PackageableElementOption.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * 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 { isSystemElement, isGeneratedElement, isDependencyElement, } from '@finos/legend-graph';
+export const buildElementOption = (element) => ({
+    label: element.name,
+    value: element,
+});
+const getElementColorCode = (element) => isSystemElement(element)
+    ? 'system'
+    : isGeneratedElement(element)
+        ? 'generated'
+        : isDependencyElement(element)
+            ? 'dependency'
+            : '';
+const generateOptionTooltipText = (element) => isSystemElement(element)
+    ? 'system element'
+    : isGeneratedElement(element)
+        ? 'generated element'
+        : isDependencyElement(element)
+            ? 'dependency element'
+            : undefined;
+export const getPackageableElementOptionFormatter = (props) => function PackageableElementOptionLabel(option) {
+    const { darkMode } = props;
+    const className = darkMode
+        ? 'packageable-element-option-label--dark'
+        : 'packageable-element-option-label';
+    const colorCode = getElementColorCode(option.value);
+    return (_jsxs("div", { className: className, children: [_jsx("div", { title: generateOptionTooltipText(option.value), className: `packageable-element-option-label__type ${colorCode
+                    ? `packageable-element-option-label__type--${colorCode}`
+                    : ''} ` }), _jsx("div", { className: `${className}__name`, children: option.label }), option.value.package && (_jsx("div", { className: `${className}__tag`, children: option.value.path }))] }));
+};
+//# sourceMappingURL=PackageableElementOption.js.map

package/lib/graph-editor/PackageableElementOption.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PackageableElementOption.js","sourceRoot":"","sources":["../../src/graph-editor/PackageableElementOption.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAEL,eAAe,EACf,kBAAkB,EAClB,mBAAmB,GACpB,MAAM,qBAAqB,CAAC;AAO7B,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAChC,OAAU,EACmB,EAAE,CAAC,CAAC;IACjC,KAAK,EAAE,OAAO,CAAC,IAAI;IACnB,KAAK,EAAE,OAAO;CACf,CAAC,CAAC;AAEH,MAAM,mBAAmB,GAAG,CAAC,OAA2B,EAAU,EAAE,CAClE,eAAe,CAAC,OAAO,CAAC;IACtB,CAAC,CAAC,QAAQ;IACV,CAAC,CAAC,kBAAkB,CAAC,OAAO,CAAC;QAC7B,CAAC,CAAC,WAAW;QACb,CAAC,CAAC,mBAAmB,CAAC,OAAO,CAAC;YAC9B,CAAC,CAAC,YAAY;YACd,CAAC,CAAC,EAAE,CAAC;AAET,MAAM,yBAAyB,GAAG,CAChC,OAA2B,EACP,EAAE,CACtB,eAAe,CAAC,OAAO,CAAC;IACtB,CAAC,CAAC,gBAAgB;IAClB,CAAC,CAAC,kBAAkB,CAAC,OAAO,CAAC;QAC7B,CAAC,CAAC,mBAAmB;QACrB,CAAC,CAAC,mBAAmB,CAAC,OAAO,CAAC;YAC9B,CAAC,CAAC,oBAAoB;YACtB,CAAC,CAAC,SAAS,CAAC;AAEhB,MAAM,CAAC,MAAM,oCAAoC,GAAG,CAAC,KAEpD,EAEqB,EAAE,CACtB,SAAS,6BAA6B,CACpC,MAAoD;IAEpD,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAC3B,MAAM,SAAS,GAAG,QAAQ;QACxB,CAAC,CAAC,wCAAwC;QAC1C,CAAC,CAAC,kCAAkC,CAAC;IACvC,MAAM,SAAS,GAAG,mBAAmB,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAEpD,OAAO,CACL,eAAK,SAAS,EAAE,SAAS,aACvB,cACE,KAAK,EAAE,yBAAyB,CAAC,MAAM,CAAC,KAAK,CAAC,EAC9C,SAAS,EAAE,0CACT,SAAS;oBACP,CAAC,CAAC,2CAA2C,SAAS,EAAE;oBACxD,CAAC,CAAC,EACN,GAAG,GACE,EACP,cAAK,SAAS,EAAE,GAAG,SAAS,QAAQ,YAAG,MAAM,CAAC,KAAK,GAAO,EACzD,MAAM,CAAC,KAAK,CAAC,OAAO,IAAI,CACvB,cAAK,SAAS,EAAE,GAAG,SAAS,OAAO,YAAG,MAAM,CAAC,KAAK,CAAC,IAAI,GAAO,CAC/D,IACG,CACP,CAAC;AACJ,CAAC,CAAC"}

package/lib/graph-editor/index.d.ts

@@ -0,0 +1,18 @@
+/**
+ * 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.
+ */
+export * from './PackageableElementOption.js';
+export * from './ElementIconUtils.js';
+//# sourceMappingURL=index.d.ts.map

package/lib/graph-editor/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/graph-editor/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,cAAc,+BAA+B,CAAC;AAC9C,cAAc,uBAAuB,CAAC"}

package/lib/graph-editor/index.js

@@ -0,0 +1,18 @@
+/**
+ * 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.
+ */
+export * from './PackageableElementOption.js';
+export * from './ElementIconUtils.js';
+//# sourceMappingURL=index.js.map

package/lib/graph-editor/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/graph-editor/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,cAAc,+BAA+B,CAAC;AAC9C,cAAc,uBAAuB,CAAC"}

package/lib/index.css

@@ -1,4 +1,4 @@
-/** @license @finos/legend-lego v0.1.3
+/** @license @finos/legend-lego v0.1.5
  * Copyright (c) 2020-present, Goldman Sachs
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -14,4 +14,4 @@
  * limitations under the License.
  */
 
-@import"@ag-grid-community/styles/ag-grid.css";@import"@ag-grid-community/styles/ag-theme-balham.css";.code-editor__container{height:100%;width:100%;position:relative;background:var(--color-dark-grey-50)}.code-editor__body{height:100%;width:100%;position:absolute;top:0;left:0;overflow:hidden}.monaco-editor *{font-size:1.4rem}.monaco-editor--small-font *{font-size:1.2rem}/*# sourceMappingURL=index.css.map */
+@import"@ag-grid-community/styles/ag-grid.css";@import"@ag-grid-community/styles/ag-theme-balham.css";.fuzzy-search__advanced-config__panel{width:100%;background:var(--color-dark-grey-250)}.fuzzy-search__advanced-config__panel__header__label{display:flex;align-items:center;font-weight:500;color:var(--color-light-grey-50);background:var(--color-dark-grey-300);padding:0 1rem;line-height:2rem;font-size:1.2rem;cursor:default;user-select:none}.tab-manager{display:flex;flex:1;overflow:hidden;height:100%}.tab-manager__content{width:calc(100% - 2.8rem);display:flex;overflow-x:overlay}.tab-manager__tab{display:flex;align-items:center;cursor:pointer;color:var(--color-light-grey-400);background:var(--color-dark-grey-80);border-right:.1rem solid var(--color-dark-grey-50)}.tab-manager__tab--active{color:var(--color-light-grey-100);background:var(--color-dark-grey-50)}.tab-manager__tab--dragged{filter:opacity(0.7)}.tab-manager__tab__content{display:flex;align-items:center;height:100%;width:100%}.tab-manager__tab__label{height:100%;color:inherit;padding:0 .5rem 0 1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tab-manager__tab__close-btn{visibility:hidden;display:flex;align-items:center}.tab-manager__tab__close-btn svg{color:var(--color-light-grey-200);font-size:1.2rem;margin-right:1rem}.tab-manager__tab--active .tab-manager__tab__close-btn,.tab-manager__tab:hover .tab-manager__tab__close-btn{visibility:visible}.tab-manager__tab--active .tab-manager__tab__close-btn svg,.tab-manager__tab:hover .tab-manager__tab__close-btn svg{color:var(--color-light-grey-100)}.tab-manager__tab__dnd__placeholder{text-align:left;margin:0;padding:0 .5rem;background-color:var(--color-dark-grey-100)}.tab-manager__menu{min-width:15rem;max-width:30rem;height:100%;padding:0}.tab-manager__menu__toggler{display:flex;align-items:center;justify-content:center;flex-grow:0;flex-shrink:0;color:var(--color-light-grey-400);border-left:.1rem solid var(--color-dark-grey-50);height:100%;width:2.8rem}.tab-manager__menu__item{justify-content:space-between}.tab-manager__menu__item--active,.tab-manager__menu__item:not([disabled]):hover{background:var(--color-dark-grey-250)}.tab-manager__menu__item__label{text-align:left;white-space:nowrap;font-size:1.3rem;overflow:hidden;text-overflow:ellipsis}.tab-manager__menu__item__close-btn{display:flex;align-items:center;justify-content:center;flex-grow:0;flex-shrink:0;padding:.4rem;margin-left:.6rem;flex-direction:end}.tab-manager__menu__item__close-btn svg{width:1.2rem;height:1.2rem}.documentation-link{display:inline-flex;align-self:center;color:var(--color-dark-grey-500);cursor:pointer}.documentation-preview{display:flex;background:var(--color-dark-grey-85);border:.1rem solid var(--color-dark-grey-280);border-radius:.2rem}.documentation-preview__text{padding:1rem;width:calc(100% - 3rem);color:var(--color-light-grey-400);line-height:2rem}.documentation-preview__hint{display:flex;justify-content:center;padding:1rem 0;width:3rem}.monaco-editor *{font-size:1.4rem}.monaco-editor--small-font *{font-size:1.2rem}.code-editor__container{height:100%;width:100%;position:relative;background:var(--color-dark-grey-50)}.code-editor__body{height:100%;width:100%;position:absolute;top:0;left:0;overflow:hidden}.packageable-element-option-label{display:flex;align-items:center}.packageable-element-option-label__tag{display:flex;align-items:center;color:var(--color-dark-grey-500);background:var(--color-light-grey-50);border:.1rem solid var(--color-light-grey-180);margin-left:1rem;border-radius:.2rem;font-size:1rem;padding:0 .5rem;height:1.6rem;font-weight:500}.packageable-element-option-label__name{display:flex;align-items:center;height:1.8rem}.packageable-element-option-label__type{margin:-1rem .8rem -1rem -1.2rem;height:3.2rem;padding-left:.5rem;background:rgba(0,0,0,0)}.packageable-element-option-label__type--system{background:var(--color-system)}.packageable-element-option-label__type--generated{background:var(--color-generated)}.packageable-element-option-label__type--dependency{background:var(--color-dependency)}.packageable-element-option-label--dark{display:flex;align-items:center;display:flex}.packageable-element-option-label--dark__tag{display:flex;align-items:center;color:var(--color-dark-grey-250);background:var(--color-dark-grey-400);margin-left:1rem;border-radius:.2rem;font-size:1rem;padding:0 .5rem;height:1.6rem;font-weight:500}.packageable-element-option-label--dark__name{display:flex;align-items:center;height:1.8rem}/*# sourceMappingURL=index.css.map */

package/lib/index.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../style/_data-grid.scss","../style/_code-editor.scss","../style/reset/_monaco-editor.scss"],"names":[],"mappings":"AAgBQ,+CACA,+ECCJ,YACA,WACA,kBACA,qCAGF,mBACE,YACA,WACA,kBACA,MACA,OACA,gBCdJ,iBACE,iBAGF,6BACE","file":"index.css"}
+{"version":3,"sourceRoot":"","sources":["../style/_data-grid.scss","../style/application/_fuzzy-search.scss","../../../node_modules/@finos/legend-art/scss/_mixins.scss","../style/application/_tab-manager.scss","../style/application/_documentation-link.scss","../style/reset/_monaco-editor.scss","../style/_code-editor.scss","../style/graph-editor/_packageable-element-option-label.scss"],"names":[],"mappings":"AAgBQ,+CACA,uDCCR,sCACE,WACA,sCAEA,qDCQA,aACA,mBDNE,gBACA,iCACA,sCACA,eACA,iBACA,iBACA,eACA,iBEdJ,aACE,aACA,OACA,gBACA,YAEA,sBACE,0BACA,aACA,mBAGF,+BDCA,mBCEE,eACA,kCACA,qCACA,mDAEA,0BACE,kCACA,qCAGF,2BACE,oBAGF,2BDjBF,aACA,mBCmBI,YACA,WAGF,yBACE,YACA,cACA,uBACA,mBACA,gBACA,uBAGF,6BACE,kBDlCJ,aACA,mBCqCI,iCACE,kCACA,iBACA,kBAIJ,4GAEE,mBAEA,oHACE,kCAIJ,oCACE,gBACA,SACA,gBACA,4CAIJ,mBACE,gBACA,gBACA,YACA,UAEA,4BD1EF,aACA,mBACA,uBA2BA,YACA,cCgDI,kCACA,kDACA,YACA,aAGF,yBACE,8BAEA,gFAEE,sCAIJ,gCACE,gBACA,mBACA,iBACA,gBACA,uBAGF,oCDrGF,aACA,mBACA,uBA2BA,YACA,cC2EI,cACA,kBACA,mBAEA,wCACE,aACA,cCrHR,oBACE,oBACA,kBACA,iCACA,eAGF,uBACE,aACA,qCACA,8CACA,oBAEA,6BACE,aACA,wBACA,kCACA,iBAGF,6BFHA,aACA,uBEKE,eACA,WC1BJ,iBACE,iBAGF,6BACE,iBCJA,wBACE,YACA,WACA,kBACA,qCAGF,mBACE,YACA,WACA,kBACA,MACA,OACA,gBCZJ,kCLYE,aACA,mBKVA,uCLSA,aACA,mBKPE,iCACA,sCACA,+CACA,iBACA,oBACA,eACA,gBACA,cACA,gBAGF,wCLLA,aACA,mBKOE,cAIJ,wCACE,iCACA,cACA,mBACA,yBAEA,gDACE,+BAGF,mDACE,kCAGF,oDACE,mCAIJ,wCL/BE,aACA,mBKiCA,aAEA,6CLpCA,aACA,mBKsCE,iCACA,sCACA,iBACA,oBACA,eACA,gBACA,cACA,gBAGF,8CLjDA,aACA,mBKmDE","file":"index.css"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finos/legend-lego",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "Legend shared advanced application components and building blocks",
   "keywords": [
     "legend",
@@ -20,10 +20,12 @@
   "sideEffects": false,
   "type": "module",
   "exports": {
-    "./data-grid": "./lib/data-grid/index.js",
+    "./application": "./lib/application/index.js",
     "./code-editor": "./lib/code-editor/index.js",
-    "./code-editor/test": "./lib/code-editor/testing/index.js",
-    "./code-editor/test/MockedMonacoEditor.js": "./lib/code-editor/testing/MockedMonacoEditor.js",
+    "./code-editor/test": "./lib/code-editor/__test__.js",
+    "./code-editor/test/MockedMonacoEditor.js": "./lib/code-editor/__test-utils__/MockedMonacoEditor.js",
+    "./data-grid": "./lib/data-grid/index.js",
+    "./graph-editor": "./lib/graph-editor/index.js",
     "./lib/index.css": "./lib/index.css"
   },
   "module": "lib/index.js",
@@ -49,19 +51,22 @@
     "@ag-grid-community/core": "29.2.0",
     "@ag-grid-community/react": "29.2.0",
     "@ag-grid-community/styles": "29.2.0",
-    "@finos/legend-application": "14.0.3",
-    "@finos/legend-art": "7.0.0",
-    "@finos/legend-shared": "8.2.0",
-    "@types/react": "18.0.34",
+    "@finos/legend-application": "15.0.0",
+    "@finos/legend-art": "7.0.1",
+    "@finos/legend-graph": "28.0.0",
+    "@finos/legend-shared": "9.0.0",
+    "@types/css-font-loading-module": "0.0.8",
+    "@types/react": "18.0.37",
     "@types/react-dom": "18.0.11",
     "mobx": "6.9.0",
     "mobx-react-lite": "3.4.3",
     "monaco-editor": "0.37.1",
     "react": "18.2.0",
+    "react-dnd": "16.0.1",
     "react-dom": "18.2.0"
   },
   "devDependencies": {
-    "@finos/legend-dev-utils": "2.0.53",
+    "@finos/legend-dev-utils": "2.0.54",
     "@jest/globals": "29.5.0",
     "cross-env": "7.0.3",
     "eslint": "8.38.0",

package/src/application/DocumentationLink.tsx

@@ -0,0 +1,82 @@
+/**
+ * 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 {
+  shouldDisplayVirtualAssistantDocumentationEntry,
+  useApplicationStore,
+} from '@finos/legend-application';
+import { clsx, QuestionCircleIcon } from '@finos/legend-art';
+
+export const DocumentationLink: React.FC<{
+  documentationKey: string;
+  title?: string | undefined;
+  className?: string | undefined;
+}> = (props) => {
+  const { documentationKey, title, className } = props;
+  const applicationStore = useApplicationStore();
+  const documentationEntry =
+    applicationStore.documentationService.getDocEntry(documentationKey);
+  const openDocLink: React.MouseEventHandler<HTMLDivElement> = (
+    event,
+  ): void => {
+    event.preventDefault();
+    event.stopPropagation();
+    applicationStore.assistantService.openDocumentationEntryLink(
+      documentationKey,
+    );
+  };
+
+  if (
+    !documentationEntry ||
+    (!documentationEntry.url &&
+      !shouldDisplayVirtualAssistantDocumentationEntry(documentationEntry))
+  ) {
+    return null;
+  }
+  return (
+    <div
+      onClick={openDocLink}
+      title={title ?? 'Click to see documentation'}
+      className={clsx('documentation-link', className)}
+    >
+      <QuestionCircleIcon />
+    </div>
+  );
+};
+
+export const DocumentationPreview: React.FC<{
+  text?: string | undefined;
+  documentationKey: string;
+  className?: string | undefined;
+}> = (props) => {
+  const { documentationKey, text, className } = props;
+  const applicationStore = useApplicationStore();
+  const documentationEntry =
+    applicationStore.documentationService.getDocEntry(documentationKey);
+  const textContent = text ?? documentationEntry?.text;
+
+  if (!documentationEntry || !textContent) {
+    return null;
+  }
+  return (
+    <div className={clsx('documentation-preview', className)}>
+      <div className="documentation-preview__text">{textContent}</div>
+      <div className="documentation-preview__hint">
+        <DocumentationLink documentationKey={documentationKey} />
+      </div>
+    </div>
+  );
+};

package/src/application/FuzzySearchAdvancedConfigMenu.tsx

@@ -0,0 +1,66 @@
+/**
+ * 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 { BaseRadioGroup } from '@finos/legend-art';
+import { observer } from 'mobx-react-lite';
+import { DocumentationLink } from './DocumentationLink.js';
+import {
+  ADVANCED_FUZZY_SEARCH_MODE,
+  type FuzzySearchAdvancedConfigState,
+} from '@finos/legend-shared';
+import { LEGEND_APPLICATION_DOCUMENTATION_KEY } from '@finos/legend-application';
+
+export const FuzzySearchAdvancedConfigMenu = observer(
+  (props: { configState: FuzzySearchAdvancedConfigState }) => {
+    const { configState } = props;
+
+    const handleSearchMode: React.ChangeEventHandler<HTMLInputElement> = (
+      event,
+    ): void => {
+      const searchMode = event.target.value as ADVANCED_FUZZY_SEARCH_MODE;
+      configState.setCurrentMode(searchMode);
+    };
+
+    return (
+      <div className="fuzzy-search__advanced-config__panel">
+        <div className="fuzzy-search__advanced-config__panel__header__label">
+          search config
+          <DocumentationLink
+            className="fuzzy-search__advanced-config__panel__header__hint"
+            documentationKey={
+              LEGEND_APPLICATION_DOCUMENTATION_KEY.QUESTION_HOW_TO_USE_ADVANCED_SEARCH_SYNTAX
+            }
+          />
+        </div>
+        <div>
+          <BaseRadioGroup
+            className="text-search-advanced-config__options"
+            value={configState.currentMode}
+            onChange={handleSearchMode}
+            row={false}
+            options={[
+              ADVANCED_FUZZY_SEARCH_MODE.STANDARD,
+              ADVANCED_FUZZY_SEARCH_MODE.INCLUDE,
+              ADVANCED_FUZZY_SEARCH_MODE.EXACT,
+              ADVANCED_FUZZY_SEARCH_MODE.INVERSE,
+            ]}
+            size={1}
+          />
+        </div>
+      </div>
+    );
+  },
+);

package/src/application/TabManager.tsx

@@ -0,0 +1,285 @@
+/**
+ * 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 {
+  ChevronDownIcon,
+  clsx,
+  ContextMenu,
+  DragPreviewLayer,
+  DropdownMenu,
+  MenuContent,
+  MenuContentItem,
+  PanelEntryDropZonePlaceholder,
+  TimesIcon,
+  useDragPreviewLayer,
+} from '@finos/legend-art';
+import { observer } from 'mobx-react-lite';
+import { useRef, useCallback } from 'react';
+import { type DropTargetMonitor, useDrop, useDrag } from 'react-dnd';
+import type { TabManagerState, TabState } from './TabManagerState.js';
+
+type TabDragSource = {
+  tab: TabState;
+};
+
+const horizontalToVerticalScroll: React.WheelEventHandler = (event) => {
+  // if scrolling is more horizontal than vertical, there's nothing much to do, the OS should handle it just fine
+  // else, intercept
+  if (Math.abs(event.deltaY) <= Math.abs(event.deltaX)) {
+    return;
+  }
+  event.stopPropagation();
+  let deltaX;
+  // NOTE: only convert horizontal to vertical scroll when the scroll causes more horizontal than vertical displacement
+  // let the direction of `deltaY` be the direction of the scroll, i.e.
+  // - if we scroll upward, that translate to a left scroll
+  // - if we scroll downward, that translates to a right scroll
+  if (event.deltaY === 0) {
+    deltaX = event.deltaY;
+  } else if (event.deltaY < 0) {
+    deltaX = -Math.abs(event.deltaY);
+  } else {
+    deltaX = Math.abs(event.deltaY);
+  }
+  event.currentTarget.scrollBy(deltaX, 0);
+};
+
+const TabContextMenu = observer(
+  (props: { tabState: TabState; managerTabState: TabManagerState }) => {
+    const { tabState, managerTabState } = props;
+    const close = (): void => managerTabState.closeTab(tabState);
+    const closeOthers = (): void => managerTabState.closeAllOtherTabs(tabState);
+    const closeAll = (): void => managerTabState.closeAllTabs();
+
+    return (
+      <MenuContent>
+        <MenuContentItem onClick={close}>Close</MenuContentItem>
+        <MenuContentItem
+          disabled={managerTabState.tabs.length < 2}
+          onClick={closeOthers}
+        >
+          Close Others
+        </MenuContentItem>
+        <MenuContentItem onClick={closeAll}>Close All</MenuContentItem>
+      </MenuContent>
+    );
+  },
+);
+
+const Tab = observer(
+  (props: {
+    tabState: TabState;
+    tabManagerState: TabManagerState;
+    tabRenderer?: ((editorState: TabState) => React.ReactNode) | undefined;
+  }) => {
+    const ref = useRef<HTMLDivElement>(null);
+    const { tabManagerState, tabState, tabRenderer } = props;
+
+    // Drag and Drop
+    const handleHover = useCallback(
+      (item: TabDragSource, monitor: DropTargetMonitor): void => {
+        const draggingTab = item.tab;
+        const hoveredTab = tabState;
+
+        const dragIndex = tabManagerState.tabs.findIndex(
+          (e) => e === draggingTab,
+        );
+        const hoverIndex = tabManagerState.tabs.findIndex(
+          (e) => e === hoveredTab,
+        );
+
+        const hoverBoundingReact = ref.current?.getBoundingClientRect();
+        const distanceThreshold =
+          ((hoverBoundingReact?.left ?? 0) - (hoverBoundingReact?.right ?? 0)) /
+          2;
+        const dragDistance =
+          (monitor.getClientOffset()?.x ?? 0) -
+          (hoverBoundingReact?.right ?? 0);
+        if (dragIndex < hoverIndex && dragDistance < distanceThreshold) {
+          return;
+        }
+        if (dragIndex > hoverIndex && dragDistance > distanceThreshold) {
+          return;
+        }
+
+        tabManagerState.swapTabs(draggingTab, hoveredTab);
+      },
+      [tabManagerState, tabState],
+    );
+
+    const closeTabOnMiddleClick =
+      (currTab: TabState): React.MouseEventHandler =>
+      (event): void => {
+        if (event.nativeEvent.button === 1) {
+          tabManagerState.closeTab(currTab);
+        }
+      };
+
+    const [{ isBeingDraggedEditorPanel }, dropConnector] = useDrop<
+      TabDragSource,
+      void,
+      { isBeingDraggedEditorPanel: TabState | undefined }
+    >(
+      () => ({
+        accept: [tabManagerState.dndType],
+        hover: (item, monitor) => handleHover(item, monitor),
+        collect: (
+          monitor,
+        ): {
+          isBeingDraggedEditorPanel: TabState | undefined;
+        } => ({
+          isBeingDraggedEditorPanel: monitor.getItem<TabDragSource | null>()
+            ?.tab,
+        }),
+      }),
+      [handleHover],
+    );
+    const isBeingDragged = tabState === isBeingDraggedEditorPanel;
+
+    const [, dragConnector, dragPreviewConnector] = useDrag<TabDragSource>(
+      () => ({
+        type: tabManagerState.dndType,
+        item: () => ({
+          tab: tabState,
+        }),
+      }),
+      [tabState, tabManagerState],
+    );
+    dragConnector(dropConnector(ref));
+    useDragPreviewLayer(dragPreviewConnector);
+
+    return (
+      <div
+        ref={ref}
+        className={clsx('tab-manager__tab', {
+          'tab-manager__tab--active': tabState === tabManagerState.currentTab,
+          'tab-manager__tab--dragged': isBeingDragged,
+        })}
+        onMouseUp={closeTabOnMiddleClick(tabState)}
+      >
+        <PanelEntryDropZonePlaceholder
+          showPlaceholder={false}
+          className="tab-manager__tab__dnd__placeholder"
+        >
+          <ContextMenu
+            content={
+              <TabContextMenu
+                tabState={tabState}
+                managerTabState={tabManagerState}
+              />
+            }
+            className="tab-manager__tab__content"
+          >
+            <button
+              className="tab-manager__tab__label"
+              tabIndex={-1}
+              onClick={() => tabManagerState.openTab(tabState)}
+              title={tabState.description}
+            >
+              {tabRenderer?.(tabState) ?? tabState.label}
+            </button>
+            <button
+              className="tab-manager__tab__close-btn"
+              onClick={() => tabManagerState.closeTab(tabState)}
+              tabIndex={-1}
+              title="Close"
+            >
+              <TimesIcon />
+            </button>
+          </ContextMenu>
+        </PanelEntryDropZonePlaceholder>
+      </div>
+    );
+  },
+);
+
+const TabMenu = observer((props: { managerTabState: TabManagerState }) => {
+  const { managerTabState } = props;
+  return (
+    <DropdownMenu
+      className="tab-manager__menu__toggler"
+      title="Show All Tabs"
+      content={
+        <MenuContent className="tab-manager__menu">
+          {managerTabState.tabs.map((tabState) => (
+            <MenuContentItem
+              key={tabState.uuid}
+              className={clsx('tab-manager__menu__item', {
+                'tab-manager__menu__item--active':
+                  tabState === managerTabState.currentTab,
+              })}
+              onClick={() => managerTabState.openTab(tabState)}
+            >
+              <div className="tab-manager__menu__item__label">
+                {tabState.label}
+              </div>
+              <div
+                className="tab-manager__menu__item__close-btn"
+                onClick={(event) => {
+                  // NOTE: prevent default action of dropdown menu
+                  event.stopPropagation();
+                  managerTabState.closeTab(tabState);
+                }}
+                tabIndex={-1}
+                title="Close"
+              >
+                <TimesIcon />
+              </div>
+            </MenuContentItem>
+          ))}
+        </MenuContent>
+      }
+      menuProps={{
+        anchorOrigin: { vertical: 'bottom', horizontal: 'right' },
+        transformOrigin: { vertical: 'top', horizontal: 'right' },
+      }}
+    >
+      <ChevronDownIcon />
+    </DropdownMenu>
+  );
+});
+
+export const TabManager = observer(
+  (props: {
+    tabManagerState: TabManagerState;
+    tabRenderer?: ((editorState: TabState) => React.ReactNode) | undefined;
+  }) => {
+    const { tabManagerState, tabRenderer } = props;
+
+    return (
+      <div className="tab-manager">
+        <div
+          className="tab-manager__content"
+          onWheel={horizontalToVerticalScroll}
+        >
+          {tabManagerState.tabs.map((tab) => (
+            <Tab
+              key={tab.uuid}
+              tabState={tab}
+              tabManagerState={tabManagerState}
+              tabRenderer={tabRenderer}
+            />
+          ))}
+          <DragPreviewLayer
+            labelGetter={(item: TabDragSource): string => item.tab.label}
+            types={[tabManagerState.dndType]}
+          />
+        </div>
+        <TabMenu managerTabState={tabManagerState} />
+      </div>
+    );
+  },
+);