@finos/legend-extension-dsl-data-space 9.2.4 → 9.2.6

package/src/components/DataSpaceDataAccess.tsx

@@ -25,8 +25,6 @@ import { useApplicationStore } from '@finos/legend-application';
 import { DataSpaceWikiPlaceholder } from './DataSpacePlaceholder.js';
 import { useEffect } from 'react';
 import { flowResult } from 'mobx';
-import { AgGridReact } from '@ag-grid-community/react';
-import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';
 import {
   DatasetEntitlementAccessApprovedReport,
   DatasetEntitlementAccessGrantedReport,
@@ -34,22 +32,13 @@ import {
   DatasetEntitlementAccessRequestedReport,
   DatasetEntitlementUnsupportedReport,
 } from '@finos/legend-graph';
+import { DataGrid } from '@finos/legend-lego/data-grid';
 
-export const DataSpaceDataAccess = observer(
+const DataAccessOverview = observer(
   (props: { dataSpaceViewerState: DataSpaceViewerState }) => {
     const { dataSpaceViewerState } = props;
     const dataAccessState = dataSpaceViewerState.dataAccessState;
     const applicationStore = useApplicationStore();
-    const analysisResult = dataSpaceViewerState.dataSpaceAnalysisResult;
-    const documentationUrl = analysisResult.supportInfo?.documentationUrl;
-
-    const seeDocumentation = (): void => {
-      if (documentationUrl) {
-        applicationStore.navigationService.navigator.visitAddress(
-          documentationUrl,
-        );
-      }
-    };
 
     useEffect(() => {
       flowResult(dataAccessState.fetchDatasetSpecifications()).catch(
@@ -64,6 +53,102 @@ export const DataSpaceDataAccess = observer(
       dataSpaceViewerState.currentExecutionContext,
     ]);
 
+    return (
+      <div className="data-space__viewer__data-access__overview">
+        <PanelLoadingIndicator
+          isLoading={
+            dataAccessState.fetchDatasetSpecificationsState.isInProgress ||
+            dataAccessState.fetchDatasetEntitlementReportsState.isInProgress
+          }
+        />
+        <div className="data-space__viewer__data-access__chart"></div>
+        <div className="data-space__viewer__data-access__grid data-space__viewer__grid ag-theme-balham-dark">
+          <DataGrid
+            rowData={dataAccessState.datasets}
+            gridOptions={{
+              suppressScrollOnNewData: true,
+              getRowId: (rowData) => rowData.data.uuid,
+            }}
+            suppressFieldDotNotation={true}
+            columnDefs={[
+              {
+                minWidth: 50,
+                sortable: true,
+                resizable: true,
+                valueGetter: (params) => params.data?.specification.name,
+                headerName: 'Dataset',
+                flex: 1,
+              },
+              {
+                minWidth: 50,
+                sortable: true,
+                resizable: true,
+                valueGetter: (params) => params.data?.specification.type,
+                headerName: 'Type',
+                flex: 1,
+              },
+              {
+                minWidth: 50,
+                sortable: true,
+                resizable: true,
+                headerName: 'Access Status',
+                valueGetter: (params) => {
+                  const entitlementReport = params.data?.entitlementReport;
+                  if (
+                    entitlementReport instanceof
+                    DatasetEntitlementAccessGrantedReport
+                  ) {
+                    return 'Access Granted';
+                  } else if (
+                    entitlementReport instanceof
+                    DatasetEntitlementAccessApprovedReport
+                  ) {
+                    return 'Access Approved';
+                  } else if (
+                    entitlementReport instanceof
+                    DatasetEntitlementAccessRequestedReport
+                  ) {
+                    return 'Access Requested';
+                  } else if (
+                    entitlementReport instanceof
+                    DatasetEntitlementAccessNotGrantedReport
+                  ) {
+                    return '(x) Access Not Granted';
+                  } else if (
+                    entitlementReport instanceof
+                    DatasetEntitlementUnsupportedReport
+                  ) {
+                    return '(unsupported)';
+                  }
+                  return '';
+                },
+                flex: 1,
+                wrapText: true,
+                autoHeight: true,
+              },
+            ]}
+          />
+        </div>
+      </div>
+    );
+  },
+);
+
+export const DataSpaceDataAccess = observer(
+  (props: { dataSpaceViewerState: DataSpaceViewerState }) => {
+    const { dataSpaceViewerState } = props;
+    const applicationStore = useApplicationStore();
+    const analysisResult = dataSpaceViewerState.dataSpaceAnalysisResult;
+    const documentationUrl = analysisResult.supportInfo?.documentationUrl;
+
+    const seeDocumentation = (): void => {
+      if (documentationUrl) {
+        applicationStore.navigationService.navigator.visitAddress(
+          documentationUrl,
+        );
+      }
+    };
+
     return (
       <div className="data-space__viewer__wiki__section">
         <div className="data-space__viewer__wiki__section__header">
@@ -85,92 +170,12 @@ export const DataSpaceDataAccess = observer(
           )}
         </div>
         <div className="data-space__viewer__wiki__section__content">
-          <PanelLoadingIndicator
-            isLoading={
-              dataAccessState.fetchDatasetSpecificationsState.isInProgress ||
-              dataAccessState.fetchDatasetEntitlementReportsState.isInProgress
-            }
-          />
           <div className="data-space__viewer__data-access">
-            {dataAccessState.datasets.length > 0 && (
+            {!dataSpaceViewerState.TEMPORARY__enableExperimentalFeatures && (
               <DataSpaceWikiPlaceholder message="View Data Access (Work in Progress)" />
             )}
-            {dataAccessState.datasets.length === 0 && (
-              <>
-                <div className="data-space__viewer__data-access__chart"></div>
-                <div className="data-space__viewer__data-access__grid data-space__viewer__grid ag-theme-balham-dark">
-                  <AgGridReact
-                    rowData={dataAccessState.datasets}
-                    gridOptions={{
-                      suppressScrollOnNewData: true,
-                      getRowId: (rowData) => rowData.data.uuid,
-                    }}
-                    modules={[ClientSideRowModelModule]}
-                    suppressFieldDotNotation={true}
-                    columnDefs={[
-                      {
-                        minWidth: 50,
-                        sortable: true,
-                        resizable: true,
-                        valueGetter: (params) =>
-                          params.data?.specification.name,
-                        headerName: 'Dataset',
-                        flex: 1,
-                      },
-                      {
-                        minWidth: 50,
-                        sortable: true,
-                        resizable: true,
-                        valueGetter: (params) =>
-                          params.data?.specification.type,
-                        headerName: 'Type',
-                        flex: 1,
-                      },
-                      {
-                        minWidth: 50,
-                        sortable: true,
-                        resizable: true,
-                        headerName: 'Access Status',
-                        valueGetter: (params) => {
-                          const entitlementReport =
-                            params.data?.entitlementReport;
-                          if (
-                            entitlementReport instanceof
-                            DatasetEntitlementAccessGrantedReport
-                          ) {
-                            return 'Access Granted';
-                          } else if (
-                            entitlementReport instanceof
-                            DatasetEntitlementAccessApprovedReport
-                          ) {
-                            return 'Access Approved';
-                          } else if (
-                            entitlementReport instanceof
-                            DatasetEntitlementAccessRequestedReport
-                          ) {
-                            return 'Access Requested';
-                          } else if (
-                            entitlementReport instanceof
-                            DatasetEntitlementAccessNotGrantedReport
-                          ) {
-                            return '(x) Access Not Granted';
-                          } else if (
-                            entitlementReport instanceof
-                            DatasetEntitlementUnsupportedReport
-                          ) {
-                            return '(unsupported)';
-                          }
-                          return '';
-                        },
-                        flex: 1,
-                        wrapText: true,
-                        autoHeight: true,
-                      },
-                    ]}
-                  />
-                </div>
-                <DataSpaceWikiPlaceholder message="No documentation provided" />
-              </>
+            {dataSpaceViewerState.TEMPORARY__enableExperimentalFeatures && (
+              <DataAccessOverview dataSpaceViewerState={dataSpaceViewerState} />
             )}
           </div>
         </div>

package/src/components/DataSpaceDiagramViewer.tsx

@@ -168,7 +168,7 @@ export const DataSpaceDiagramViewer = observer(
                     <div className="data-space__viewer__diagram-viewer__carousel__frame__indicators__notch">
                       {analysisResult.diagrams.map((diagram) => (
                         <button
-                          key={diagram.diagram.path}
+                          key={diagram.uuid}
                           className={clsx(
                             'data-space__viewer__diagram-viewer__carousel__frame__indicator',
                             {