@finos/legend-application-marketplace 0.0.19 → 0.0.21

package/src/pages/Lakehouse/shared/GridItemViewer.tsx

@@ -0,0 +1,105 @@
+/**
+ * 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 { Grid2, Typography } from '@mui/material';
+import {
+  GridTiemStatus,
+  type GridItemDetail,
+} from '../../../stores/lakehouse/LakehouseUtils.js';
+import { clsx } from '@finos/legend-art';
+
+export const GridItemsViewer = (props: {
+  details: GridItemDetail[];
+  title: string;
+}) => {
+  const gridDetails = props.details;
+  const title = props.title;
+  return (
+    <>
+      <Typography
+        className="entitlements-grid-viewer__header"
+        variant="h6"
+        sx={{ marginBottom: '0.5rem' }}
+      >
+        {title}
+      </Typography>
+      <Grid2
+        container={true}
+        spacing={0}
+        sx={{
+          '--Grid-borderWidth': '1px',
+          borderTop: 'var(--Grid-borderWidth) solid',
+          borderLeft: 'var(--Grid-borderWidth) solid',
+          borderColor: 'divider',
+          '& > div': {
+            borderRight: 'var(--Grid-borderWidth) solid',
+            borderBottom: 'var(--Grid-borderWidth) solid',
+            borderColor: 'divider',
+          },
+        }}
+      >
+        {gridDetails.map((gridItem, index) => (
+          <>
+            <Grid2
+              container={false}
+              key={gridItem.name}
+              size={4}
+              sx={{
+                alignContent: 'center',
+                backgroundColor: index % 2 === 0 ? '#f5f5f5' : 'white',
+              }}
+            >
+              <Typography
+                variant="button"
+                fontWeight={'bold'}
+                sx={{ fontSize: '14px', padding: '6px' }}
+              >
+                {gridItem.name}
+              </Typography>
+            </Grid2>
+            <Grid2
+              container={false}
+              size={8}
+              sx={{
+                alignContent: 'center',
+                backgroundColor: index % 2 === 0 ? '#f5f5f5' : 'white',
+              }}
+            >
+              <Typography
+                variant="subtitle1"
+                sx={{ fontSize: '14px', padding: '6px' }}
+                className={clsx({
+                  'entitlements-grid-viewer__item-clickable-text': Boolean(
+                    gridItem.onClick,
+                  ),
+                  'entitlements-grid-viewer__status--success':
+                    gridItem.status === GridTiemStatus.SUCCESS,
+                  'entitlements-grid-viewer__status--error':
+                    gridItem.status === GridTiemStatus.ERROR,
+                  'entitlements-grid-viewer__status--in-progress':
+                    gridItem.status === GridTiemStatus.INFO,
+                })}
+                onClick={() => gridItem.onClick?.()}
+              >
+                {gridItem.value}
+              </Typography>
+            </Grid2>
+          </>
+        ))}
+      </Grid2>
+    </>
+  );
+};

package/src/pages/Lakehouse/subscriptions/LakehouseSubscriptions.tsx

@@ -0,0 +1,358 @@
+/**
+ * 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 { useAuth } from 'react-oidc-context';
+import { useEffect, useState } from 'react';
+import {
+  clsx,
+  CubesLoadingIndicator,
+  CubesLoadingIndicatorIcon,
+} from '@finos/legend-art';
+import { DataGrid } from '@finos/legend-lego/data-grid';
+import {
+  Box,
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  FormControl,
+  InputLabel,
+  MenuItem,
+  Select,
+  TextField,
+  Typography,
+} from '@mui/material';
+import {
+  type V1_DataSubscriptionTarget,
+  V1_DataSubscriptionTargetType,
+  V1_SnowflakeNetwork,
+  V1_SnowflakeRegion,
+  V1_SnowflakeTarget,
+} from '@finos/legend-graph';
+import {
+  useLakehouseSubscriptionsStore,
+  withLakehouseSubscriptionsStore,
+} from './LakehouseSubscriptionsStoreProvider.js';
+import { assertErrorThrown } from '@finos/legend-shared';
+import { flowResult } from 'mobx';
+import type { LakehouseSubscriptionsStore } from '../../../stores/lakehouse/subscriptions/LakehouseSubscriptionsStore.js';
+import { LegendMarketplacePage } from '../../LegendMarketplacePage.js';
+
+export const LakehouseSubscriptionsCreateDialog = (props: {
+  open: boolean;
+  onClose: () => void;
+  onSubmit: (
+    contractId: string,
+    target: V1_DataSubscriptionTarget,
+  ) => Promise<void>;
+}) => {
+  const { open, onClose, onSubmit } = props;
+
+  const [contractId, setContractId] = useState<string>('');
+  const [targetType] = useState<V1_DataSubscriptionTargetType>(
+    V1_DataSubscriptionTargetType.Snowflake,
+  );
+  const [snowflakeAccountId, setSnowflakeAccountId] = useState<string>('');
+  const [snowflakeRegion] = useState<V1_SnowflakeRegion>(
+    V1_SnowflakeRegion.AWS_US_EAST_1,
+  );
+  const [snowflakeNetwork] = useState<V1_SnowflakeNetwork>(
+    V1_SnowflakeNetwork.GOLDMAN,
+  );
+
+  return (
+    <Dialog
+      open={open}
+      onClose={onClose}
+      slotProps={{
+        paper: {
+          component: 'form',
+          onSubmit: (event: React.FormEvent<HTMLFormElement>) => {
+            event.preventDefault();
+            if (targetType === V1_DataSubscriptionTargetType.Snowflake) {
+              const snowflakeTarget = new V1_SnowflakeTarget();
+              snowflakeTarget.snowflakeAccountId = snowflakeAccountId;
+              snowflakeTarget.snowflakeRegion = snowflakeRegion;
+              snowflakeTarget.snowflakeNetwork = snowflakeNetwork;
+              // eslint-disable-next-line no-void
+              void onSubmit(contractId, snowflakeTarget);
+              onClose();
+            } else {
+              onClose();
+              throw new Error(`Unsupported target type: ${targetType}`);
+            }
+          },
+        },
+      }}
+    >
+      <DialogTitle>Create New Subscription</DialogTitle>
+      <DialogContent>
+        <TextField
+          required={true}
+          margin="dense"
+          id="contractId"
+          name="contractId"
+          label="Contract ID"
+          fullWidth={true}
+          variant="outlined"
+          value={contractId}
+          onChange={(event) => setContractId(event.target.value)}
+        />
+        <FormControl fullWidth={true} margin="dense">
+          <InputLabel id="target-type-select-label">Target Type</InputLabel>
+          <Select
+            required={true}
+            labelId="target-type-select-label"
+            id="target-type-select"
+            value={targetType}
+            label="Target Type"
+            disabled={true}
+          >
+            {Object.values(V1_DataSubscriptionTargetType).map((_targetType) => (
+              <MenuItem key={_targetType} value={_targetType}>
+                {_targetType}
+              </MenuItem>
+            ))}
+          </Select>
+        </FormControl>
+        <TextField
+          required={true}
+          margin="dense"
+          id="snowflakeAccountId"
+          name="snowflakeAccountId"
+          label="Snowflake Account ID"
+          fullWidth={true}
+          variant="outlined"
+          value={snowflakeAccountId}
+          onChange={(event) => setSnowflakeAccountId(event.target.value)}
+        />
+        <FormControl fullWidth={true} margin="dense">
+          <InputLabel id="snowflake-region-select-label">
+            Snowflake Region
+          </InputLabel>
+          <Select
+            required={true}
+            labelId="snowflake-region-select-label"
+            id="snowflake-region-select"
+            value={snowflakeRegion}
+            label="Snowflake Region"
+            disabled={true}
+          >
+            {Object.values(V1_SnowflakeRegion).map((region) => (
+              <MenuItem key={region} value={region}>
+                {region}
+              </MenuItem>
+            ))}
+          </Select>
+        </FormControl>
+        <FormControl fullWidth={true} margin="dense">
+          <InputLabel id="snowflake-network-select-label">
+            Snowflake Network
+          </InputLabel>
+          <Select
+            required={true}
+            labelId="snowflake-network-select-label"
+            id="snowflake-network-select"
+            value={snowflakeNetwork}
+            label="Snowflake Network"
+            disabled={true}
+          >
+            {Object.values(V1_SnowflakeNetwork).map((_snowflakeNetwork) => (
+              <MenuItem key={_snowflakeNetwork} value={_snowflakeNetwork}>
+                {_snowflakeNetwork}
+              </MenuItem>
+            ))}
+          </Select>
+        </FormControl>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose} variant="outlined">
+          Cancel
+        </Button>
+        <Button type="submit" variant="contained">
+          Create Subsciption
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export const LakehouseSubscriptionsMainView = observer(
+  (props: { subscriptionsStore: LakehouseSubscriptionsStore }) => {
+    const { subscriptionsStore } = props;
+    const auth = useAuth();
+
+    const [isCreateDialogOpen, setIsCreateDialogOpen] =
+      useState<boolean>(false);
+
+    const subscriptions = subscriptionsStore.subscriptions;
+
+    const createDialogHandleSubmit = async (
+      contractId: string,
+      target: V1_DataSubscriptionTarget,
+    ): Promise<void> => {
+      try {
+        const createdSubscription = await subscriptionsStore.createSubscription(
+          contractId,
+          target,
+          auth.user?.access_token,
+        );
+        subscriptionsStore.applicationStore.notificationService.notifySuccess(
+          `Created subscription ${createdSubscription.guid}`,
+        );
+        flowResult(subscriptionsStore.init(auth.user?.access_token)).catch(
+          subscriptionsStore.applicationStore.alertUnhandledError,
+        );
+      } catch (error) {
+        assertErrorThrown(error);
+        subscriptionsStore.applicationStore.alertUnhandledError(error);
+      }
+    };
+
+    return (
+      <>
+        <Box className="subscriptions">
+          <Box className="subscriptions__header">
+            <Typography variant="h4">ALL SUBSCRIPTIONS</Typography>
+            <Button
+              onClick={() => setIsCreateDialogOpen(true)}
+              variant="contained"
+            >
+              Create New Subscription
+            </Button>
+          </Box>
+          <div
+            className={clsx('subscriptions__grid', {
+              'ag-theme-balham': true,
+            })}
+          >
+            <DataGrid
+              rowData={subscriptions}
+              onRowDataUpdated={(params) => {
+                params.api.refreshCells({ force: true });
+              }}
+              suppressFieldDotNotation={true}
+              suppressContextMenu={false}
+              columnDefs={[
+                {
+                  minWidth: 50,
+                  sortable: true,
+                  resizable: true,
+                  headerName: 'Subscription Id',
+                  valueGetter: (p) => p.data?.guid,
+                  flex: 1,
+                },
+                {
+                  minWidth: 50,
+                  sortable: true,
+                  resizable: true,
+                  headerName: 'Contract ID',
+                  valueGetter: (p) => p.data?.dataContractId,
+                  flex: 1,
+                },
+                {
+                  minWidth: 50,
+                  sortable: true,
+                  resizable: true,
+                  headerName: 'Target Type',
+                  valueGetter: (p) =>
+                    p.data?.target instanceof V1_SnowflakeTarget
+                      ? 'Snowflake'
+                      : 'Unknown',
+                  flex: 1,
+                },
+                {
+                  minWidth: 50,
+                  sortable: true,
+                  resizable: true,
+                  headerName: 'Snowflake Account ID',
+                  valueGetter: (p) =>
+                    p.data?.target instanceof V1_SnowflakeTarget
+                      ? p.data.target.snowflakeAccountId
+                      : 'Unknown',
+                  flex: 1,
+                },
+                {
+                  minWidth: 50,
+                  sortable: true,
+                  resizable: true,
+                  headerName: 'Snowflake Region',
+                  valueGetter: (p) =>
+                    p.data?.target instanceof V1_SnowflakeTarget
+                      ? p.data.target.snowflakeRegion
+                      : 'Unknown',
+                  flex: 1,
+                },
+                {
+                  minWidth: 50,
+                  sortable: true,
+                  resizable: true,
+                  headerName: 'Snowflake Network',
+                  valueGetter: (p) =>
+                    p.data?.target instanceof V1_SnowflakeTarget
+                      ? p.data.target.snowflakeNetwork
+                      : 'Unknown',
+                  flex: 1,
+                },
+                {
+                  minWidth: 50,
+                  sortable: true,
+                  resizable: true,
+                  headerName: 'Created By',
+                  valueGetter: (p) => p.data?.createdBy,
+                  flex: 1,
+                },
+              ]}
+            />
+          </div>
+        </Box>
+        <LakehouseSubscriptionsCreateDialog
+          open={isCreateDialogOpen}
+          onClose={() => setIsCreateDialogOpen(false)}
+          onSubmit={createDialogHandleSubmit}
+        />
+      </>
+    );
+  },
+);
+
+export const LakehouseSubscriptions = withLakehouseSubscriptionsStore(
+  observer(() => {
+    const subscriptionsStore = useLakehouseSubscriptionsStore();
+    const auth = useAuth();
+
+    useEffect(() => {
+      subscriptionsStore.init(auth.user?.access_token);
+    }, [auth.user?.access_token, subscriptionsStore]);
+
+    return (
+      <LegendMarketplacePage className="legend-marketplace-lakehouse-subscriptions">
+        <CubesLoadingIndicator
+          isLoading={Boolean(
+            subscriptionsStore.initializationState.isInProgress,
+          )}
+        >
+          <CubesLoadingIndicatorIcon />
+        </CubesLoadingIndicator>
+        <LakehouseSubscriptionsMainView
+          subscriptionsStore={subscriptionsStore}
+        />
+      </LegendMarketplacePage>
+    );
+  }),
+);

package/src/pages/Lakehouse/subscriptions/LakehouseSubscriptionsStoreProvider.tsx

@@ -0,0 +1,65 @@
+/**
+ * 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 { createContext, useContext } from 'react';
+import { useLocalObservable } from 'mobx-react-lite';
+import { guaranteeNonNullable } from '@finos/legend-shared';
+import {
+  useLegendMarketplaceApplicationStore,
+  useLegendMarketplaceBaseStore,
+} from '../../../application/LegendMarketplaceFrameworkProvider.js';
+import { LakehouseSubscriptionsStore } from '../../../stores/lakehouse/subscriptions/LakehouseSubscriptionsStore.js';
+
+const LakehouseSubscriptionsStoreContext = createContext<
+  LakehouseSubscriptionsStore | undefined
+>(undefined);
+
+export const LakehouseSubscriptionsStoreProvider: React.FC<{
+  children: React.ReactNode;
+}> = ({ children }) => {
+  const applicationStore = useLegendMarketplaceApplicationStore();
+  const baseStore = useLegendMarketplaceBaseStore();
+  const lakehouseServerClient = guaranteeNonNullable(
+    baseStore.lakehouseServerClient,
+    'lakehouse server client required to render',
+  );
+  const store = useLocalObservable(
+    () =>
+      new LakehouseSubscriptionsStore(applicationStore, lakehouseServerClient),
+  );
+  return (
+    <LakehouseSubscriptionsStoreContext.Provider value={store}>
+      {children}
+    </LakehouseSubscriptionsStoreContext.Provider>
+  );
+};
+
+export const useLakehouseSubscriptionsStore = (): LakehouseSubscriptionsStore =>
+  guaranteeNonNullable(
+    useContext(LakehouseSubscriptionsStoreContext),
+    `Can't find lakehouse subscriptions store in context`,
+  );
+
+export const withLakehouseSubscriptionsStore = (
+  WrappedComponent: React.FC,
+): React.FC =>
+  function WithLakehouseSubscriptionsStore() {
+    return (
+      <LakehouseSubscriptionsStoreProvider>
+        <WrappedComponent />
+      </LakehouseSubscriptionsStoreProvider>
+    );
+  };

package/src/pages/LegendMarketplacePage.tsx

@@ -0,0 +1,26 @@
+/**
+ * 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 { clsx } from '@finos/legend-art';
+import { observer } from 'mobx-react-lite';
+import type React from 'react';
+
+export const LegendMarketplacePage = observer(
+  (props: { className?: string; children: React.ReactNode }) => {
+    const { className, children } = props;
+    return <div className={clsx('app__page', className)}>{children}</div>;
+  },
+);