@finos/legend-application-marketplace 0.0.19 → 0.0.21

package/src/pages/Lakehouse/entitlements/EntitlementsDashboard.tsx

@@ -0,0 +1,390 @@
+/**
+ * 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 { withAuth, type AuthContextProps } from 'react-oidc-context';
+import type { EntitlementsDashboardState } from '../../../stores/lakehouse/entitlements/EntitlementsDashboardState.js';
+import { observer } from 'mobx-react-lite';
+import { useState } from 'react';
+import {
+  V1_UserApprovalStatus,
+  type V1_ContractUserEventRecord,
+  type V1_UserPendingContractsRecord,
+} from '@finos/legend-graph';
+import { flowResult } from 'mobx';
+import {
+  DataGrid,
+  type DataGridCellRendererParams,
+} from '@finos/legend-lego/data-grid';
+import {
+  generateLakehouseContractPath,
+  generateLakehouseTaskPath,
+} from '../../../__lib__/LegendMarketplaceNavigation.js';
+import { Box, Button, Stack, Tab, Tabs, Typography } from '@mui/material';
+import { clsx } from '@finos/legend-art';
+
+const TDSColumnApprovalCellRenderer = (
+  params: DataGridCellRendererParams<V1_ContractUserEventRecord>,
+  handleApprove: (task: V1_ContractUserEventRecord) => void,
+  handleDeny: (task: V1_ContractUserEventRecord) => void,
+): React.ReactNode => {
+  const data = params.data;
+  if (!data) {
+    return null;
+  }
+  const onApprove = () => {
+    handleApprove(data);
+  };
+  const onDeny = () => {
+    handleDeny(data);
+  };
+  return (
+    <Stack direction={'row'} spacing={1} justifyContent={'center'}>
+      <Button
+        variant="contained"
+        size="small"
+        onClick={onApprove}
+        disabled={data.status !== V1_UserApprovalStatus.PENDING}
+        color="success"
+      >
+        Approve
+      </Button>
+      <Button
+        disabled={data.status !== V1_UserApprovalStatus.PENDING}
+        color="error"
+        variant="contained"
+        size="small"
+        onClick={onDeny}
+      >
+        Deny
+      </Button>
+    </Stack>
+  );
+};
+
+const Task_IdColumnClickableCellRenderer = (
+  params: DataGridCellRendererParams<V1_ContractUserEventRecord>,
+  onHandleClick: (id: string) => void,
+): React.ReactNode => {
+  const data = params.data;
+  if (!data) {
+    return null;
+  }
+  const handleClick = () => {
+    onHandleClick(data.taskId);
+  };
+  return (
+    <span
+      className="entitlements-tasks__grid-taskid-cell"
+      onClick={handleClick}
+    >
+      {data.taskId}
+    </span>
+  );
+};
+
+const Task_ContractClickableCellRenderer = (
+  params: DataGridCellRendererParams<V1_ContractUserEventRecord>,
+  onHandleClick: (id: string) => void,
+): React.ReactNode => {
+  const data = params.data;
+  if (!data) {
+    return null;
+  }
+  const handleClick = () => {
+    onHandleClick(data.dataContractId);
+  };
+  return (
+    <span
+      className="entitlements-tasks__grid-taskid-cell"
+      onClick={handleClick}
+    >
+      {data.dataContractId}
+    </span>
+  );
+};
+
+const PendingContract_IdColumnClickableCellRenderer = (
+  params: DataGridCellRendererParams<V1_UserPendingContractsRecord>,
+  onHandleClick: (id: string) => void,
+): React.ReactNode => {
+  const data = params.data;
+  if (!data) {
+    return null;
+  }
+  const handleClick = () => {
+    onHandleClick(data.contractId);
+  };
+  return (
+    <span
+      className="entitlements-tasks__grid-taskid-cell"
+      onClick={handleClick}
+    >
+      {data.contractId}
+    </span>
+  );
+};
+
+const PendingContract_TaskIdColumnClickableCellRenderer = (
+  params: DataGridCellRendererParams<V1_UserPendingContractsRecord>,
+  onHandleClick: (id: string) => void,
+): React.ReactNode => {
+  const data = params.data;
+  if (!data) {
+    return null;
+  }
+  const handleClick = () => {
+    onHandleClick(data.pendingTaskWithAssignees.taskId);
+  };
+  return (
+    <span
+      className="entitlements-tasks__grid-taskid-cell"
+      onClick={handleClick}
+    >
+      {data.pendingTaskWithAssignees.taskId}
+    </span>
+  );
+};
+
+type TaksProps = {
+  currentViewer: EntitlementsDashboardState;
+};
+
+export const EntitlementsDashboard = withAuth(
+  observer((props: TaksProps) => {
+    const { currentViewer } = props;
+    const state = currentViewer.state;
+    const tasks = currentViewer.pendingTasks;
+    const pendingConctracts = currentViewer.pendingContracts;
+    const auth = (props as unknown as { auth: AuthContextProps }).auth;
+    const enum EntitlementsTabs {
+      PENDING_TASKS = 'pendingTasks',
+      PENDING_CONTRACTS = 'pendingContracts',
+    }
+
+    const [value, setValue] = useState(EntitlementsTabs.PENDING_TASKS);
+
+    const handleTabChange = (
+      event: React.SyntheticEvent,
+      newValue: EntitlementsTabs,
+    ) => {
+      setValue(newValue);
+    };
+    const handleApprove = (task: V1_ContractUserEventRecord) => {
+      flowResult(currentViewer.approve(task, auth.user?.access_token)).catch(
+        state.applicationStore.alertUnhandledError,
+      );
+    };
+    const handleDeny = (task: V1_ContractUserEventRecord) => {
+      flowResult(currentViewer.deny(task, auth.user?.access_token)).catch(
+        state.applicationStore.alertUnhandledError,
+      );
+    };
+    return (
+      <>
+        <Tabs value={value} onChange={handleTabChange}>
+          <Tab
+            label={
+              <Typography variant="h4" gutterBottom={true}>
+                PENDING TASKS
+              </Typography>
+            }
+            value={EntitlementsTabs.PENDING_TASKS}
+          />
+          <Tab
+            label={
+              <Typography variant="h4" gutterBottom={true}>
+                PENDING CONTRACTS
+              </Typography>
+            }
+            value={EntitlementsTabs.PENDING_CONTRACTS}
+          />
+        </Tabs>
+        {value === EntitlementsTabs.PENDING_TASKS && (
+          <Box className="entitlements-tasks">
+            <div
+              className={clsx(
+                'entitlements-tasks__grid data-access-overview__grid',
+                {
+                  'ag-theme-balham': true,
+                },
+              )}
+            >
+              {tasks && (
+                <DataGrid
+                  rowData={tasks}
+                  onRowDataUpdated={(params) => {
+                    params.api.refreshCells({ force: true });
+                  }}
+                  suppressFieldDotNotation={true}
+                  suppressContextMenu={false}
+                  columnDefs={[
+                    {
+                      minWidth: 50,
+                      sortable: true,
+                      resizable: true,
+                      headerName: 'Task Id',
+                      cellRenderer: (
+                        params: DataGridCellRendererParams<V1_ContractUserEventRecord>,
+                      ) => {
+                        return Task_IdColumnClickableCellRenderer(
+                          params,
+                          (taskId) =>
+                            state.applicationStore.navigationService.navigator.updateCurrentLocation(
+                              generateLakehouseTaskPath(taskId),
+                            ),
+                        );
+                      },
+                      flex: 1,
+                    },
+                    {
+                      minWidth: 50,
+                      sortable: true,
+                      resizable: true,
+                      headerName: 'Contract Id',
+                      cellRenderer: (
+                        params: DataGridCellRendererParams<V1_ContractUserEventRecord>,
+                      ) => {
+                        return Task_ContractClickableCellRenderer(
+                          params,
+                          (taskId) =>
+                            state.applicationStore.navigationService.navigator.updateCurrentLocation(
+                              generateLakehouseContractPath(taskId),
+                            ),
+                        );
+                      },
+                      flex: 1,
+                    },
+                    {
+                      minWidth: 50,
+                      sortable: true,
+                      resizable: true,
+                      headerName: 'Consumer',
+                      valueGetter: (p) => p.data?.consumer,
+                      flex: 1,
+                    },
+                    {
+                      minWidth: 50,
+                      sortable: true,
+                      resizable: true,
+                      headerName: 'Status',
+                      valueGetter: (p) => p.data?.status,
+                      flex: 1,
+                    },
+                    {
+                      minWidth: 50,
+                      sortable: true,
+                      resizable: true,
+                      headerName: 'Approve/Deny',
+                      flex: 1,
+                      cellRenderer: (
+                        params: DataGridCellRendererParams<V1_ContractUserEventRecord>,
+                      ) => {
+                        return TDSColumnApprovalCellRenderer(
+                          params,
+                          handleApprove,
+                          handleDeny,
+                        );
+                      },
+                    },
+                  ]}
+                />
+              )}
+            </div>
+          </Box>
+        )}
+        {value === EntitlementsTabs.PENDING_CONTRACTS && (
+          <Box className="entitlements-tasks">
+            <div
+              className={clsx(
+                'entitlements-tasks__grid data-access-overview__grid',
+                {
+                  'ag-theme-balham': true,
+                },
+              )}
+            >
+              {pendingConctracts && (
+                <DataGrid
+                  rowData={pendingConctracts}
+                  onRowDataUpdated={(params) => {
+                    params.api.refreshCells({ force: true });
+                  }}
+                  suppressFieldDotNotation={true}
+                  suppressContextMenu={false}
+                  columnDefs={[
+                    {
+                      minWidth: 50,
+                      sortable: true,
+                      resizable: true,
+                      headerName: 'Contract Id',
+                      cellRenderer: (
+                        params: DataGridCellRendererParams<V1_UserPendingContractsRecord>,
+                      ) => {
+                        return PendingContract_IdColumnClickableCellRenderer(
+                          params,
+                          (taskId) =>
+                            state.applicationStore.navigationService.navigator.updateCurrentLocation(
+                              generateLakehouseContractPath(taskId),
+                            ),
+                        );
+                      },
+                      flex: 1,
+                    },
+
+                    {
+                      minWidth: 50,
+                      sortable: true,
+                      resizable: true,
+                      headerName: 'Contract Description',
+                      valueGetter: (p) => p.data?.contractDescription,
+                      flex: 1,
+                    },
+                    {
+                      minWidth: 50,
+                      sortable: true,
+                      resizable: true,
+                      headerName: 'Pending Task ID',
+                      cellRenderer: (
+                        params: DataGridCellRendererParams<V1_UserPendingContractsRecord>,
+                      ) => {
+                        return PendingContract_TaskIdColumnClickableCellRenderer(
+                          params,
+                          (taskId) =>
+                            state.applicationStore.navigationService.navigator.updateCurrentLocation(
+                              generateLakehouseTaskPath(taskId),
+                            ),
+                        );
+                      },
+                      flex: 1,
+                    },
+                    {
+                      minWidth: 50,
+                      sortable: true,
+                      resizable: true,
+                      headerName: 'Pending Task Assignes',
+                      valueGetter: (p) =>
+                        p.data?.pendingTaskWithAssignees.assignee.join(','),
+                      flex: 1,
+                    },
+                  ]}
+                />
+              )}
+            </div>
+          </Box>
+        )}
+      </>
+    );
+  }),
+);

package/src/pages/Lakehouse/entitlements/EntitlementsDataContractCreator.tsx

@@ -0,0 +1,99 @@
+/**
+ * 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 {
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  Dialog,
+  Modal,
+  PanelForm,
+  PanelFormValidatedTextField,
+  ModalFooterButton,
+  PanelLoadingIndicator,
+} from '@finos/legend-art';
+import type { V1_AccessPointGroup } from '@finos/legend-graph';
+import { observer } from 'mobx-react-lite';
+import { useRef, useState } from 'react';
+import type { DataProductViewerState } from '../../../stores/lakehouse/DataProductViewerState.js';
+import { withAuth, type AuthContextProps } from 'react-oidc-context';
+import { flowResult } from 'mobx';
+
+export const DataContractCreator = withAuth(
+  observer(
+    (props: {
+      onClose: () => void;
+      accessGroupPoint: V1_AccessPointGroup;
+      viewerState: DataProductViewerState;
+    }) => {
+      const { onClose, viewerState, accessGroupPoint } = props;
+      const [description, setDescription] = useState<string | undefined>(
+        undefined,
+      );
+      const auth = (props as unknown as { auth: AuthContextProps }).auth;
+      const onCreate = (): void => {
+        if (description) {
+          flowResult(
+            props.viewerState.create(
+              description,
+              accessGroupPoint,
+              auth.user?.access_token,
+            ),
+          ).catch(viewerState.applicationStore.alertUnhandledError);
+        }
+      };
+
+      const patternRef = useRef<HTMLInputElement>(null);
+      return (
+        <Dialog
+          open={true}
+          onClose={onClose}
+          classes={{ container: 'dataContract-creator-modal__container' }}
+          PaperProps={{
+            classes: { root: 'dataContract-creator-modal__inner-container' },
+          }}
+        >
+          <Modal>
+            <PanelLoadingIndicator
+              isLoading={viewerState.creatingContractState.isInProgress}
+            />
+            <ModalHeader>Create Data Contract</ModalHeader>
+            <ModalBody>
+              <PanelForm>
+                <PanelFormValidatedTextField
+                  ref={patternRef}
+                  name="Description"
+                  className="service-editor__pattern__input"
+                  errorMessageClassName="service-editor__pattern__input"
+                  prompt={'Description for the data contract'}
+                  update={(value: string | undefined): void => {
+                    setDescription(value ?? '');
+                  }}
+                  validate={undefined}
+                  value={description}
+                />
+              </PanelForm>
+            </ModalBody>
+
+            <ModalFooter>
+              <ModalFooterButton onClick={onCreate}>Create</ModalFooterButton>
+            </ModalFooter>
+          </Modal>
+        </Dialog>
+      );
+    },
+  ),
+);

package/src/pages/Lakehouse/entitlements/EntitlementsDataContractViewer.tsx

@@ -0,0 +1,33 @@
+/**
+ * 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 { GridItemsViewer } from '../shared/GridItemViewer.js';
+import type { EntitlementsDataContractViewerState } from '../../../stores/lakehouse/entitlements/EntitlementsDataContractViewerState.js';
+
+export const EntitlementsDataContractViewer = observer(
+  (props: { currentViewer: EntitlementsDataContractViewerState }) => {
+    const { currentViewer } = props;
+    return (
+      <div className="entitlements-grid-viewer">
+        <GridItemsViewer
+          details={currentViewer.contractDetails}
+          title="Contract Metadata"
+        />
+      </div>
+    );
+  },
+);

package/src/pages/Lakehouse/entitlements/EntitlementsTaskViewer.tsx

@@ -0,0 +1,73 @@
+/**
+ * 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 { withAuth, type AuthContextProps } from 'react-oidc-context';
+import type { EntitlementsTaskViewerState } from '../../../stores/lakehouse/entitlements/EntitlementsTaskViewerState.js';
+import { observer } from 'mobx-react-lite';
+import { GridItemsViewer } from '../shared/GridItemViewer.js';
+import { Button, Divider, Stack } from '@mui/material';
+
+export const EntitlementsTaskViewer = withAuth(
+  observer((props: { currentViewer: EntitlementsTaskViewerState }) => {
+    const auth = (props as unknown as { auth: AuthContextProps }).auth;
+    const { currentViewer } = props;
+    const handleApprove = (): void => {
+      currentViewer.approve(auth.user?.access_token);
+    };
+
+    const handleDeny = (): void => {
+      currentViewer.deny(auth.user?.access_token);
+    };
+
+    return (
+      <div className="entitlements-grid-viewer">
+        {currentViewer.canApprove && (
+          <div className="entitlements-grid-viewer__action-header">
+            <Stack
+              className="entitlements-grid-viewer__action"
+              direction={'row'}
+              spacing={1}
+            >
+              <Button
+                variant="contained"
+                size="small"
+                onClick={handleApprove}
+                color="success"
+                sx={{ fontSize: '10px' }}
+              >
+                Approve
+              </Button>
+              <Button
+                color="error"
+                variant="contained"
+                size="small"
+                onClick={handleDeny}
+                sx={{ fontSize: '10px' }}
+              >
+                Deny
+              </Button>
+            </Stack>
+            <Divider />
+          </div>
+        )}
+        <GridItemsViewer
+          details={currentViewer.taskDetails}
+          title="Task Metadata"
+        />
+      </div>
+    );
+  }),
+);

package/src/pages/Lakehouse/entitlements/LakehouseEntitlements.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 { observer } from 'mobx-react-lite';
+import {
+  useLakehouseEntitlementsStore,
+  withLakehouseEntitlementsStore,
+} from './LakehouseEntitlementsStoreProvider.js';
+import { useAuth } from 'react-oidc-context';
+import { useEffect } from 'react';
+import {
+  CubesLoadingIndicator,
+  CubesLoadingIndicatorIcon,
+} from '@finos/legend-art';
+import {} from '@finos/legend-lego/data-grid';
+import { useParams } from '@finos/legend-application/browser';
+import {
+  LEGEND_MARKETPLACE_ROUTE_PATTERN_TOKEN,
+  type LakehouseEntitlementsTasksParam,
+} from '../../../__lib__/LegendMarketplaceNavigation.js';
+import { EntitlementsDashboardState } from '../../../stores/lakehouse/entitlements/EntitlementsDashboardState.js';
+import { EntitlementsTaskViewerState } from '../../../stores/lakehouse/entitlements/EntitlementsTaskViewerState.js';
+import { LegendMarketplacePage } from '../../LegendMarketplacePage.js';
+import { EntitlementsDataContractViewer } from './EntitlementsDataContractViewer.js';
+import { EntitlementsTaskViewer } from './EntitlementsTaskViewer.js';
+import { EntitlementsDashboard } from './EntitlementsDashboard.js';
+import { EntitlementsDataContractViewerState } from '../../../stores/lakehouse/entitlements/EntitlementsDataContractViewerState.js';
+
+export const LakehouseEntitlements = withLakehouseEntitlementsStore(
+  observer(() => {
+    const entitlementsStore = useLakehouseEntitlementsStore();
+    const auth = useAuth();
+    const params = useParams<LakehouseEntitlementsTasksParam>();
+
+    useEffect(() => {
+      entitlementsStore.init(
+        params[LEGEND_MARKETPLACE_ROUTE_PATTERN_TOKEN.TASK_ID],
+        params[LEGEND_MARKETPLACE_ROUTE_PATTERN_TOKEN.CONTRACT_ID],
+        auth.user?.access_token,
+      );
+    }, [auth.user?.access_token, entitlementsStore, params]);
+
+    const renderCurrentViewer = (): React.ReactNode => {
+      const currentViewer = entitlementsStore.currentViewer;
+      if (currentViewer instanceof EntitlementsDashboardState) {
+        return <EntitlementsDashboard currentViewer={currentViewer} />;
+      } else if (currentViewer instanceof EntitlementsTaskViewerState) {
+        return <EntitlementsTaskViewer currentViewer={currentViewer} />;
+      } else if (currentViewer instanceof EntitlementsDataContractViewerState) {
+        return <EntitlementsDataContractViewer currentViewer={currentViewer} />;
+      }
+
+      return null;
+    };
+    return (
+      <LegendMarketplacePage className="legend-marketplace-lakehouse-entitlements">
+        <CubesLoadingIndicator
+          isLoading={Boolean(
+            entitlementsStore.initializationState.isInProgress ||
+              entitlementsStore.currentViewer?.initializationState.isInProgress,
+          )}
+        >
+          <CubesLoadingIndicatorIcon />
+        </CubesLoadingIndicator>
+        {renderCurrentViewer()}
+      </LegendMarketplacePage>
+    );
+  }),
+);