@finos/legend-application-studio 26.1.1 → 26.1.2

package/src/components/editor/editor-group/uml-editor/ClassEditor.tsx

@@ -354,7 +354,7 @@ const PropertyBasicEditor = observer(
               >
                 {propertyTypeName !== CLASS_PROPERTY_TYPE.PRIMITIVE && (
                   <div className="property-basic-editor__type__abbr">
-                    {getElementIcon(editorStore, propertyType)}
+                    {getElementIcon(propertyType, editorStore)}
                   </div>
                 )}
                 <div className="property-basic-editor__type__label">
@@ -395,7 +395,7 @@ const PropertyBasicEditor = observer(
               >
                 {propertyTypeName !== CLASS_PROPERTY_TYPE.PRIMITIVE && (
                   <div className="property-basic-editor__type__abbr">
-                    {getElementIcon(editorStore, propertyType)}
+                    {getElementIcon(propertyType, editorStore)}
                   </div>
                 )}
                 <div className="property-basic-editor__type__label">
@@ -723,7 +723,7 @@ const DerivedPropertyBasicEditor = observer(
                 >
                   {propertyTypeName !== CLASS_PROPERTY_TYPE.PRIMITIVE && (
                     <div className="property-basic-editor__type__abbr">
-                      {getElementIcon(editorStore, propertyType)}
+                      {getElementIcon(propertyType, editorStore)}
                     </div>
                   )}
                   <div className="property-basic-editor__type__label">
@@ -764,7 +764,7 @@ const DerivedPropertyBasicEditor = observer(
                 >
                   {propertyTypeName !== CLASS_PROPERTY_TYPE.PRIMITIVE && (
                     <div className="property-basic-editor__type__abbr">
-                      {getElementIcon(editorStore, propertyType)}
+                      {getElementIcon(propertyType, editorStore)}
                     </div>
                   )}
                   <div className="property-basic-editor__type__label">

package/src/components/editor/panel-group/PanelGroup.tsx

@@ -26,6 +26,7 @@ import {
   PanelHeader,
   PanelHeaderActions,
   PanelHeaderActionItem,
+  SparkleIcon,
 } from '@finos/legend-art';
 import { ConsolePanel } from './ConsolePanel.js';
 import { PANEL_MODE } from '../../../stores/editor/EditorConfig.js';
@@ -33,6 +34,17 @@ import { isNonNullable } from '@finos/legend-shared';
 import { DevToolPanel } from './DevToolPanel.js';
 import { useEditorStore } from '../EditorStoreProvider.js';
 import { ProblemsPanel } from './ProblemsPanel.js';
+import { SQLPlaygroundPanel } from './SQLPlaygroundPanel.js';
+import { GraphEditFormModeState } from '../../../stores/editor/GraphEditFormModeState.js';
+
+export const PanelGroupItemExperimentalBadge: React.FC = () => (
+  <div
+    className="panel-group__header__tab__experimental-badge"
+    title="This is an experimental feature"
+  >
+    <SparkleIcon />
+  </div>
+);
 
 export const PanelGroup = observer(() => {
   const editorStore = useEditorStore();
@@ -51,6 +63,7 @@ export const PanelGroup = observer(() => {
       icon?: React.ReactNode;
       isVisible: boolean;
       counter?: number;
+      experimental?: boolean;
     };
   } = {
     [PANEL_MODE.CONSOLE]: {
@@ -58,6 +71,7 @@ export const PanelGroup = observer(() => {
       name: 'CONSOLE',
       icon: undefined,
       isVisible: true,
+      experimental: true,
     },
     [PANEL_MODE.DEV_TOOL]: {
       mode: PANEL_MODE.DEV_TOOL,
@@ -72,11 +86,23 @@ export const PanelGroup = observer(() => {
       isVisible: true,
       counter: editorStore.graphState.problems.length,
     },
+    [PANEL_MODE.SQL_PLAYGROUND]: {
+      mode: PANEL_MODE.SQL_PLAYGROUND,
+      name: 'SQL PLAYGROUND',
+      icon: undefined,
+      isVisible: editorStore.graphEditorMode instanceof GraphEditFormModeState,
+      experimental: true,
+    },
   };
 
-  const tabsToShow = Object.values(PANEL_MODE).filter(
-    (tab) => isNonNullable(tabs[tab]) && tabs[tab].isVisible,
-  );
+  const tabsToShow = Object.values(PANEL_MODE)
+    .filter((tab) => isNonNullable(tabs[tab]) && tabs[tab].isVisible)
+    .filter(
+      (tab) =>
+        tab !== PANEL_MODE.SQL_PLAYGROUND ||
+        editorStore.applicationStore.config.options
+          .TEMPORARY__enableRawSQLExecutor,
+    );
   const isTabVisible = (tabType: PANEL_MODE): boolean =>
     editorStore.activePanelMode === tabType && tabsToShow.includes(tabType);
 
@@ -117,6 +143,7 @@ export const PanelGroup = observer(() => {
                     />
                   )}
                 </div>
+                {tab.experimental && <PanelGroupItemExperimentalBadge />}
               </button>
             ))}
         </div>
@@ -157,6 +184,11 @@ export const PanelGroup = observer(() => {
             <DevToolPanel />
           </div>
         )}
+        {isTabVisible(PANEL_MODE.SQL_PLAYGROUND) && (
+          <div className="panel-group__content__tab">
+            <SQLPlaygroundPanel />
+          </div>
+        )}
       </PanelContent>
     </div>
   );