@finos/legend-extension-dsl-data-space 10.0.10 → 10.0.12

package/src/components/DataSpaceQuickStart.tsx

@@ -17,24 +17,23 @@
 import { observer } from 'mobx-react-lite';
 import {
   AnchorLinkIcon,
+  BlankPanelContent,
   CodeIcon,
   CopyIcon,
+  DataAccessIcon,
   LegendLogo,
   MoreVerticalIcon,
   QuestionCircleIcon,
+  StatisticsIcon,
   clsx,
 } from '@finos/legend-art';
-import {
-  DATA_SPACE_VIEWER_ACTIVITY_MODE,
-  generateAnchorForActivity,
-  type DataSpaceViewerState,
-  generateAnchorForQuickStart,
-} from '../stores/DataSpaceViewerState.js';
+import { type DataSpaceViewerState } from '../stores/DataSpaceViewerState.js';
 import { useApplicationStore } from '@finos/legend-application';
 import {
   DataSpaceExecutableTDSResult,
   type DataSpaceExecutableAnalysisResult,
   type DataSpaceExecutableTDSResultColumn,
+  DataSpaceServiceExecutableInfo,
 } from '../graph-manager/action/analytics/DataSpaceAnalysis.js';
 import { DataSpaceMarkdownTextViewer } from './DataSpaceMarkdownTextViewer.js';
 import type { DSL_DataSpace_LegendApplicationPlugin_Extension } from '../stores/DSL_DataSpace_LegendApplicationPlugin_Extension.js';
@@ -46,12 +45,22 @@ import {
 } from '@finos/legend-lego/data-grid';
 import {
   CODE_EDITOR_LANGUAGE,
+  CODE_EDITOR_THEME,
   CodeEditor,
 } from '@finos/legend-lego/code-editor';
+import {
+  DATA_SPACE_VIEWER_ACTIVITY_MODE,
+  generateAnchorForActivity,
+  generateAnchorForQuickStart,
+} from '../stores/DataSpaceViewerNavigation.js';
+import { DataAccessOverview } from '@finos/legend-query-builder';
 
 enum TDS_EXECUTABLE_ACTION_TAB {
   COLUMN_SPECS = 'COLUMN_SPECS',
   QUERY = 'QUERY',
+
+  DATA_ACCESS = 'DATA_ACCESS',
+  USAGE_STATS = 'USAGE_STATS',
   QUERY_TEXT = 'QUERY_TEXT',
 }
 
@@ -99,7 +108,20 @@ const DataSpaceExecutableTDSResultView = observer(
       TDS_EXECUTABLE_ACTION_TAB.COLUMN_SPECS,
     );
     const queryText = executableAnalysisResult.info?.query;
+    const dataAccessState =
+      dataSpaceViewerState.quickStartState.dataAccessStateIndex.get(
+        executableAnalysisResult,
+      );
 
+    const openServiceQuery = (): void => {
+      if (
+        executableAnalysisResult.info instanceof DataSpaceServiceExecutableInfo
+      ) {
+        dataSpaceViewerState.openServiceQuery(
+          executableAnalysisResult.executable,
+        );
+      }
+    };
     const columnSpecifications = tdsResult.columns;
     const extractTDSExecutableActionConfigurations =
       applicationStore.pluginManager
@@ -185,25 +207,64 @@ const DataSpaceExecutableTDSResultView = observer(
               </button>
             ))}
           </div>
-          {queryText !== undefined && (
+          <div className="data-space__viewer__quickstart__item__content__action-tab-group">
             <button
               className={clsx(
                 'data-space__viewer__quickstart__item__content__tab',
                 {
                   'data-space__viewer__quickstart__item__content__tab--active':
-                    selectedTab === TDS_EXECUTABLE_ACTION_TAB.QUERY_TEXT,
+                    selectedTab === TDS_EXECUTABLE_ACTION_TAB.DATA_ACCESS,
                 },
               )}
               tabIndex={-1}
+              title="Data Access"
               onClick={() =>
-                setSelectedTab(TDS_EXECUTABLE_ACTION_TAB.QUERY_TEXT)
+                setSelectedTab(TDS_EXECUTABLE_ACTION_TAB.DATA_ACCESS)
               }
             >
               <div className="data-space__viewer__quickstart__item__content__tab__icon">
-                <CodeIcon className="data-space__viewer__quickstart__item__content__tab__icon--query" />
+                <DataAccessIcon />
               </div>
             </button>
-          )}
+            <button
+              className={clsx(
+                'data-space__viewer__quickstart__item__content__tab',
+                {
+                  'data-space__viewer__quickstart__item__content__tab--active':
+                    selectedTab === TDS_EXECUTABLE_ACTION_TAB.USAGE_STATS,
+                },
+              )}
+              tabIndex={-1}
+              title="Usage Statistics"
+              onClick={() =>
+                setSelectedTab(TDS_EXECUTABLE_ACTION_TAB.USAGE_STATS)
+              }
+            >
+              <div className="data-space__viewer__quickstart__item__content__tab__icon">
+                <StatisticsIcon />
+              </div>
+            </button>
+            {queryText !== undefined && (
+              <button
+                className={clsx(
+                  'data-space__viewer__quickstart__item__content__tab',
+                  {
+                    'data-space__viewer__quickstart__item__content__tab--active':
+                      selectedTab === TDS_EXECUTABLE_ACTION_TAB.QUERY_TEXT,
+                  },
+                )}
+                tabIndex={-1}
+                title="Pure Query"
+                onClick={() =>
+                  setSelectedTab(TDS_EXECUTABLE_ACTION_TAB.QUERY_TEXT)
+                }
+              >
+                <div className="data-space__viewer__quickstart__item__content__tab__icon">
+                  <CodeIcon className="data-space__viewer__quickstart__item__content__tab__icon--query" />
+                </div>
+              </button>
+            )}
+          </div>
         </div>
         <div className="data-space__viewer__quickstart__item__content__tab__content">
           {selectedTab === TDS_EXECUTABLE_ACTION_TAB.COLUMN_SPECS && (
@@ -258,9 +319,7 @@ const DataSpaceExecutableTDSResultView = observer(
                 <button
                   className="data-space__viewer__quickstart__tds__query__action btn--dark"
                   tabIndex={-1}
-                  onClick={() => {
-                    // TODO: wire this so we can go to the query for the service
-                  }}
+                  onClick={openServiceQuery}
                 >
                   Open in Query
                 </button>
@@ -274,6 +333,26 @@ const DataSpaceExecutableTDSResultView = observer(
               </div>
             </div>
           )}
+          {selectedTab === TDS_EXECUTABLE_ACTION_TAB.DATA_ACCESS &&
+            (dataAccessState ? (
+              <DataAccessOverview
+                dataAccessState={dataAccessState}
+                compact={true}
+              />
+            ) : (
+              <div className="data-space__viewer__quickstart__tds__placeholder-panel">
+                <BlankPanelContent>
+                  No data access information available
+                </BlankPanelContent>
+              </div>
+            ))}
+          {selectedTab === TDS_EXECUTABLE_ACTION_TAB.USAGE_STATS && (
+            <div className="data-space__viewer__quickstart__tds__placeholder-panel">
+              <BlankPanelContent>
+                Usage Statistics (Work in Progress)
+              </BlankPanelContent>
+            </div>
+          )}
           {selectedTab === TDS_EXECUTABLE_ACTION_TAB.QUERY_TEXT &&
             queryText !== undefined && (
               <div className="data-space__viewer__quickstart__tds__query-text">
@@ -281,8 +360,9 @@ const DataSpaceExecutableTDSResultView = observer(
                   <CodeEditor
                     inputValue={queryText}
                     isReadOnly={true}
+                    lightTheme={CODE_EDITOR_THEME.ONE_DARK_PRO}
                     language={CODE_EDITOR_LANGUAGE.PURE}
-                    showMiniMap={false}
+                    hideMinimap={true}
                     hideGutter={true}
                   />
                 </div>

package/src/components/DataSpaceSupportPanel.tsx

@@ -15,28 +15,39 @@
  */
 
 import { observer } from 'mobx-react-lite';
-import { BlankPanelContent, EnvelopIcon } from '@finos/legend-art';
-import { DataSpaceSupportEmail } from '../graph/metamodel/pure/model/packageableElements/dataSpace/DSL_DataSpace_DataSpace.js';
+import {
+  BlankPanelContent,
+  DocumentationIcon,
+  EnvelopIcon,
+  HomeIcon,
+  QuestionAnswerIcon,
+  SparkleIcon,
+  SupportIcon,
+} from '@finos/legend-art';
+import {
+  DataSpaceSupportCombinedInfo,
+  DataSpaceSupportEmail,
+} from '../graph/metamodel/pure/model/packageableElements/dataSpace/DSL_DataSpace_DataSpace.js';
 import { type DataSpaceViewerState } from '../stores/DataSpaceViewerState.js';
 
 const DataSpaceSupportEmailViewer = observer(
   (props: {
     dataSpaceViewerState: DataSpaceViewerState;
-    dataSpaceSupportEmail: DataSpaceSupportEmail;
+    supportInfo: DataSpaceSupportEmail;
   }) => {
-    const { dataSpaceSupportEmail } = props;
+    const { supportInfo } = props;
 
     return (
-      <div className="data-space__viewer__support__email">
-        <div className="data-space__viewer__support__email__entry">
-          <div className="data-space__viewer__support__email__entry__icon">
+      <div className="data-space__viewer__support__section">
+        <div className="data-space__viewer__support__entry">
+          <div className="data-space__viewer__support__entry__icon">
             <EnvelopIcon />
           </div>
           <a
-            href={`mailto:${dataSpaceSupportEmail.address}`}
-            className="data-space__viewer__support__email__entry__content"
+            href={`mailto:${supportInfo.address}`}
+            className="data-space__viewer__support__entry__content"
           >
-            {dataSpaceSupportEmail.address}
+            {supportInfo.address}
           </a>
         </div>
       </div>
@@ -44,6 +55,111 @@ const DataSpaceSupportEmailViewer = observer(
   },
 );
 
+const DataSpaceSupportCombinedInfoViewer = observer(
+  (props: {
+    dataSpaceViewerState: DataSpaceViewerState;
+    supportInfo: DataSpaceSupportCombinedInfo;
+  }) => {
+    const { supportInfo } = props;
+
+    return (
+      <>
+        <div className="data-space__viewer__support__section">
+          <div className="data-space__viewer__support__entry" title="Website">
+            <div className="data-space__viewer__support__entry__icon data-space__viewer__support__entry__icon--website">
+              <HomeIcon />
+            </div>
+            {supportInfo.website ? (
+              <a
+                href={supportInfo.website}
+                className="data-space__viewer__support__entry__content"
+              >
+                {supportInfo.website}
+              </a>
+            ) : (
+              <div className="data-space__viewer__support__entry__content">
+                (not specified)
+              </div>
+            )}
+          </div>
+          <div
+            className="data-space__viewer__support__entry"
+            title="Documentation"
+          >
+            <div className="data-space__viewer__support__entry__icon">
+              <DocumentationIcon />
+            </div>
+            {supportInfo.documentationUrl ? (
+              <a
+                href={supportInfo.documentationUrl}
+                className="data-space__viewer__support__entry__content"
+              >
+                {supportInfo.documentationUrl}
+              </a>
+            ) : (
+              <div className="data-space__viewer__support__entry__content">
+                (not specified)
+              </div>
+            )}
+          </div>
+          <div className="data-space__viewer__support__entry" title="Support">
+            <div className="data-space__viewer__support__entry__icon data-space__viewer__support__entry__icon--support">
+              <SupportIcon />
+            </div>
+            {supportInfo.supportUrl ? (
+              <a
+                href={supportInfo.supportUrl}
+                className="data-space__viewer__support__entry__content"
+              >
+                {supportInfo.supportUrl}
+              </a>
+            ) : (
+              <div className="data-space__viewer__support__entry__content">
+                (not specified)
+              </div>
+            )}
+          </div>
+          <div className="data-space__viewer__support__entry" title="FAQ">
+            <div className="data-space__viewer__support__entry__icon data-space__viewer__support__entry__icon--faq">
+              <QuestionAnswerIcon />
+            </div>
+            {supportInfo.faqUrl ? (
+              <a
+                href={supportInfo.faqUrl}
+                className="data-space__viewer__support__entry__content"
+              >
+                {supportInfo.faqUrl}
+              </a>
+            ) : (
+              <div className="data-space__viewer__support__entry__content">
+                (not specified)
+              </div>
+            )}
+          </div>
+        </div>
+        {supportInfo.emails?.length && (
+          <div className="data-space__viewer__support__section">
+            {supportInfo.emails.map((email, idx) => (
+              // eslint-disable-next-line react/no-array-index-key
+              <div key={idx} className="data-space__viewer__support__entry">
+                <div className="data-space__viewer__support__entry__icon">
+                  <EnvelopIcon />
+                </div>
+                <a
+                  href={`mailto:${email}`}
+                  className="data-space__viewer__support__entry__content"
+                >
+                  {email}
+                </a>
+              </div>
+            ))}
+          </div>
+        )}
+      </>
+    );
+  },
+);
+
 const DataSpaceSupport = observer(
   (props: { dataSpaceViewerState: DataSpaceViewerState }) => {
     const { dataSpaceViewerState } = props;
@@ -56,12 +172,21 @@ const DataSpaceSupport = observer(
       return (
         <DataSpaceSupportEmailViewer
           dataSpaceViewerState={dataSpaceViewerState}
-          dataSpaceSupportEmail={supportInfo}
+          supportInfo={supportInfo}
+        />
+      );
+    } else if (supportInfo instanceof DataSpaceSupportCombinedInfo) {
+      return (
+        <DataSpaceSupportCombinedInfoViewer
+          dataSpaceViewerState={dataSpaceViewerState}
+          supportInfo={supportInfo}
         />
       );
     }
     return (
-      <BlankPanelContent>{`Can't display support info`}</BlankPanelContent>
+      <div className="data-space__viewer__panel__content__placeholder">
+        <SparkleIcon /> This is work in progress
+      </div>
     );
   },
 );
@@ -71,8 +196,15 @@ export const DataSpaceSupportPanel = observer(
     const { dataSpaceViewerState } = props;
     return (
       <div className="data-space__viewer__panel">
-        <div className="data-space__viewer__support-info">
-          <DataSpaceSupport dataSpaceViewerState={dataSpaceViewerState} />
+        <div className="data-space__viewer__panel__header">
+          <div className="data-space__viewer__panel__header__label">
+            Support
+          </div>
+        </div>
+        <div className="data-space__viewer__panel__content">
+          <div className="data-space__viewer__support-info">
+            <DataSpaceSupport dataSpaceViewerState={dataSpaceViewerState} />
+          </div>
         </div>
       </div>
     );

package/src/components/DataSpaceViewer.tsx

@@ -16,22 +16,31 @@
 
 import { observer } from 'mobx-react-lite';
 import {
-  BlankPanelContent,
+  CaretDownIcon,
   CaretUpIcon,
+  DropdownMenu,
+  MenuContent,
+  MenuContentDivider,
+  MenuContentItem,
+  MoreVerticalIcon,
+  PlayIcon,
   VerifiedIcon,
   clsx,
 } from '@finos/legend-art';
-import {
-  type DataSpaceViewerState,
-  DATA_SPACE_VIEWER_ACTIVITY_MODE,
-  DATA_SPACE_WIKI_PAGE_SECTIONS,
-} from '../stores/DataSpaceViewerState.js';
+import { type DataSpaceViewerState } from '../stores/DataSpaceViewerState.js';
 import { DataSpaceExecutionContextViewer } from './DataSpaceExecutionContextViewer.js';
 import { DataSpaceInfoPanel } from './DataSpaceInfoPanel.js';
 import { DataSpaceSupportPanel } from './DataSpaceSupportPanel.js';
 import { DataSpaceWiki } from './DataSpaceWiki.js';
 import { DataSpaceViewerActivityBar } from './DataSpaceViewerActivityBar.js';
 import { useEffect, useRef, useState } from 'react';
+import { DATA_SPACE_WIKI_PAGE_SECTIONS } from '../stores/DataSpaceLayoutState.js';
+import {
+  DATA_SPACE_VIEWER_ACTIVITY_MODE,
+  generateAnchorForActivity,
+} from '../stores/DataSpaceViewerNavigation.js';
+import { DataSpacePlaceholderPanel } from './DataSpacePlaceholder.js';
+import { useApplicationStore } from '@finos/legend-application';
 
 const DataSpaceHeader = observer(
   (props: {
@@ -39,6 +48,7 @@ const DataSpaceHeader = observer(
     showFullHeader: boolean;
   }) => {
     const { dataSpaceViewerState, showFullHeader } = props;
+    const applicationStore = useApplicationStore();
     const headerRef = useRef<HTMLDivElement>(null);
     const analysisResult = dataSpaceViewerState.dataSpaceAnalysisResult;
 
@@ -69,28 +79,133 @@ const DataSpaceHeader = observer(
               {analysisResult.displayName}
             </div>
             {dataSpaceViewerState.isVerified && (
-              <VerifiedIcon
+              <div
                 className="data-space__viewer__header__title__verified-badge"
                 title="Verified Data Space"
-              />
+              >
+                <VerifiedIcon />
+              </div>
             )}
           </div>
+          <div className="data-space__viewer__header__actions">
+            <DropdownMenu
+              className="data-space__viewer__header__execution-context-selector"
+              menuProps={{
+                anchorOrigin: { vertical: 'bottom', horizontal: 'right' },
+                transformOrigin: { vertical: 'top', horizontal: 'right' },
+                elevation: 7,
+              }}
+              title={`Current Execution Context: ${dataSpaceViewerState.currentExecutionContext.name}\nClick to switch`}
+              content={
+                <MenuContent>
+                  {Array.from(
+                    dataSpaceViewerState.dataSpaceAnalysisResult.executionContextsIndex.values(),
+                  ).map((context) => (
+                    <MenuContentItem
+                      key={context.name}
+                      className={clsx(
+                        'data-space__viewer__header__execution-context-selector__option',
+                        {
+                          'data-space__viewer__header__execution-context-selector__option--active':
+                            context ===
+                            dataSpaceViewerState.currentExecutionContext,
+                        },
+                      )}
+                      onClick={() =>
+                        dataSpaceViewerState.setCurrentExecutionContext(context)
+                      }
+                    >
+                      {context.name}
+                    </MenuContentItem>
+                  ))}
+                </MenuContent>
+              }
+            >
+              <div className="data-space__viewer__header__execution-context-selector__trigger">
+                <div className="data-space__viewer__header__execution-context-selector__trigger__icon">
+                  <PlayIcon />
+                </div>
+                <div className="data-space__viewer__header__execution-context-selector__trigger__label">
+                  {dataSpaceViewerState.currentExecutionContext.name}
+                </div>
+                <div className="data-space__viewer__header__execution-context-selector__trigger__dropdown-icon">
+                  <CaretDownIcon />
+                </div>
+              </div>
+            </DropdownMenu>
+            <DropdownMenu
+              className="data-space__viewer__header__actions-selector"
+              menuProps={{
+                anchorOrigin: { vertical: 'bottom', horizontal: 'right' },
+                transformOrigin: { vertical: 'top', horizontal: 'right' },
+                elevation: 7,
+              }}
+              title="More Actions..."
+              content={
+                <MenuContent>
+                  <MenuContentItem
+                    onClick={() =>
+                      dataSpaceViewerState.queryDataSpace(
+                        dataSpaceViewerState.currentExecutionContext.name,
+                      )
+                    }
+                  >
+                    Query Data Space
+                  </MenuContentItem>
+                  <MenuContentDivider />
+                  <MenuContentItem
+                    onClick={() =>
+                      dataSpaceViewerState.viewProject(analysisResult.path)
+                    }
+                  >
+                    View Project
+                  </MenuContentItem>
+                  <MenuContentItem
+                    onClick={() => {
+                      dataSpaceViewerState
+                        .viewSDLCProject(analysisResult.path)
+                        .catch(applicationStore.alertUnhandledError);
+                    }}
+                  >
+                    View SDLC Project
+                  </MenuContentItem>
+                  <MenuContentDivider />
+                  <MenuContentItem
+                    onClick={() => {
+                      const documentationUrl =
+                        analysisResult.supportInfo?.documentationUrl;
+                      if (documentationUrl) {
+                        applicationStore.navigationService.navigator.visitAddress(
+                          documentationUrl,
+                        );
+                      }
+                    }}
+                  >
+                    View Documentation
+                  </MenuContentItem>
+                  <MenuContentItem
+                    onClick={() =>
+                      dataSpaceViewerState.changeZone(
+                        generateAnchorForActivity(
+                          DATA_SPACE_VIEWER_ACTIVITY_MODE.SUPPORT,
+                        ),
+                      )
+                    }
+                  >
+                    Get Help
+                  </MenuContentItem>
+                </MenuContent>
+              }
+            >
+              <MoreVerticalIcon />
+            </DropdownMenu>
+          </div>
         </div>
       </div>
     );
   },
 );
 
-const DataSpacePlaceholderPanel: React.FC<{ message: string }> = (props) => {
-  const { message } = props;
-
-  return (
-    <div className="data-space__viewer__panel">
-      <BlankPanelContent>{message}</BlankPanelContent>
-    </div>
-  );
-};
-
 export const DataSpaceViewer = observer(
   (props: { dataSpaceViewerState: DataSpaceViewerState }) => {
     const { dataSpaceViewerState } = props;
@@ -182,23 +297,38 @@ export const DataSpaceViewer = observer(
               )}
               {dataSpaceViewerState.currentActivity ===
                 DATA_SPACE_VIEWER_ACTIVITY_MODE.DATA_STORES && (
-                <DataSpacePlaceholderPanel message="View all data stores (Work in Progress)" />
+                <DataSpacePlaceholderPanel
+                  header="Data Stores"
+                  message="This panel will provide details about the available datasets' schema and test data"
+                />
               )}
               {dataSpaceViewerState.currentActivity ===
                 DATA_SPACE_VIEWER_ACTIVITY_MODE.DATA_AVAILABILITY && (
-                <DataSpacePlaceholderPanel message="View data availability (Work in Progress)" />
+                <DataSpacePlaceholderPanel
+                  header="Data Availability"
+                  message="This panel will provide details about the status of data being made available to end-users and applications"
+                />
               )}
               {dataSpaceViewerState.currentActivity ===
                 DATA_SPACE_VIEWER_ACTIVITY_MODE.DATA_READINESS && (
-                <DataSpacePlaceholderPanel message="View data readiness (Work in Progress)" />
+                <DataSpacePlaceholderPanel
+                  header="Data Readiness"
+                  message="This will provide details about the status of data being prepared to collect, process, and analyze"
+                />
               )}
               {dataSpaceViewerState.currentActivity ===
                 DATA_SPACE_VIEWER_ACTIVITY_MODE.DATA_COST && (
-                <DataSpacePlaceholderPanel message="View data cost (Work in Progress)" />
+                <DataSpacePlaceholderPanel
+                  header="Data Cost"
+                  message="This will provide details about the cost of data usage"
+                />
               )}
               {dataSpaceViewerState.currentActivity ===
                 DATA_SPACE_VIEWER_ACTIVITY_MODE.DATA_GOVERNANCE && (
-                <DataSpacePlaceholderPanel message="View data ownership and governance (Work in Progress)" />
+                <DataSpacePlaceholderPanel
+                  header="Data Governance"
+                  message="This will provide details about data policy, data contract, and dataset lineage information"
+                />
               )}
               {dataSpaceViewerState.currentActivity ===
                 DATA_SPACE_VIEWER_ACTIVITY_MODE.INFO && (