Add Library page preview

client/DEVELOPER.md

@@ -118,6 +118,7 @@ if (typeof window !== 'undefined') {
     REACT_APP_WORKBENCHLINK_VSCODE: '/tools/vscode/',
     REACT_APP_WORKBENCHLINK_JUPYTERLAB: '/lab',
     REACT_APP_WORKBENCHLINK_JUPYTERNOTEBOOK: '',
+    REACT_APP_WORKBENCHLINK_LIBRARY_PREVIEW: '/preview/library',
     REACT_APP_WORKBENCHLINK_DT_PREVIEW: '/preview/digitaltwins',
 
     REACT_APP_CLIENT_ID: '1be55736756190b3ace4c2c4fb19bde386d1dcc748d20b47ea8cfb5935b8446c',
@@ -148,6 +149,7 @@ if (typeof window !== 'undefined') {
     REACT_APP_WORKBENCHLINK_VSCODE: '/tools/vscode/',
     REACT_APP_WORKBENCHLINK_JUPYTERLAB: '/lab',
     REACT_APP_WORKBENCHLINK_JUPYTERNOTEBOOK: '',
+    REACT_APP_WORKBENCHLINK_LIBRARY_PREVIEW: '/preview/library',
     REACT_APP_WORKBENCHLINK_DT_PREVIEW: '/preview/digitaltwins',
 
     REACT_APP_CLIENT_ID: '1be55736756190b3ace4c2c4fb19bde386d1dcc748d20b47ea8cfb5935b8446c',

client/config/dev.js

@@ -9,6 +9,7 @@ if (typeof window !== 'undefined') {
     REACT_APP_WORKBENCHLINK_VSCODE: '/tools/vscode/',
     REACT_APP_WORKBENCHLINK_JUPYTERLAB: '/lab',
     REACT_APP_WORKBENCHLINK_JUPYTERNOTEBOOK: '',
+    REACT_APP_WORKBENCHLINK_LIBRARY_PREVIEW: '/preview/library',
     REACT_APP_WORKBENCHLINK_DT_PREVIEW: '/preview/digitaltwins',
 
     REACT_APP_CLIENT_ID: '1be55736756190b3ace4c2c4fb19bde386d1dcc748d20b47ea8cfb5935b8446c',

client/config/local.js

@@ -9,6 +9,7 @@ if (typeof window !== 'undefined') {
     REACT_APP_WORKBENCHLINK_VSCODE: '/tools/vscode/',
     REACT_APP_WORKBENCHLINK_JUPYTERLAB: '/lab',
     REACT_APP_WORKBENCHLINK_JUPYTERNOTEBOOK: '',
+    REACT_APP_WORKBENCHLINK_LIBRARY_PREVIEW: '/preview/library',
     REACT_APP_WORKBENCHLINK_DT_PREVIEW: '/preview/digitaltwins',
 
     REACT_APP_CLIENT_ID: '1be55736756190b3ace4c2c4fb19bde386d1dcc748d20b47ea8cfb5935b8446c',

client/config/prod.js

@@ -9,6 +9,7 @@ if (typeof window !== 'undefined') {
     REACT_APP_WORKBENCHLINK_VSCODE: '/tools/vscode/',
     REACT_APP_WORKBENCHLINK_JUPYTERLAB: '/lab',
     REACT_APP_WORKBENCHLINK_JUPYTERNOTEBOOK: '',
+    REACT_APP_WORKBENCHLINK_LIBRARY_PREVIEW: '/preview/library',
     REACT_APP_WORKBENCHLINK_DT_PREVIEW: '/preview/digitaltwins',
 
     REACT_APP_CLIENT_ID: '1be55736756190b3ace4c2c4fb19bde386d1dcc748d20b47ea8cfb5935b8446c',

client/config/test.js

@@ -9,10 +9,11 @@ if (typeof window !== 'undefined') {
     REACT_APP_WORKBENCHLINK_VSCODE: '/tools/vscode/',
     REACT_APP_WORKBENCHLINK_JUPYTERLAB: '/lab',
     REACT_APP_WORKBENCHLINK_JUPYTERNOTEBOOK: '',
+    REACT_APP_WORKBENCHLINK_LIBRARY_PREVIEW: '/preview/library',
     REACT_APP_WORKBENCHLINK_DT_PREVIEW: '/preview/digitaltwins',
 
-    REACT_APP_CLIENT_ID: '1be55736756190b3ace4c2c4fb19bde386d1dcc748d20b47ea8cfb5935b8446c',
-    REACT_APP_AUTH_AUTHORITY: 'https://gitlab.com/',
+    REACT_APP_CLIENT_ID: '38bf4764fad5ebb2ebbf49b4f57c7720145b61266f13bf4891ff7851dd5c6563',
+    REACT_APP_AUTH_AUTHORITY: 'https://maestro.cps.digit.au.dk/gitlab',
     REACT_APP_REDIRECT_URI: 'http://localhost:4000/Library',
     REACT_APP_LOGOUT_REDIRECT_URI: 'http://localhost:4000/',
     REACT_APP_GITLAB_SCOPES: 'openid profile read_user read_repository api',

client/env.d.ts

@@ -12,6 +12,7 @@ declare global {
       REACT_APP_WORKBENCHLINK_VSCODE: string;
       REACT_APP_WORKBENCHLINK_JUPYTERLAB: string;
       REACT_APP_WORKBENCHLINK_JUPYTERNOTEBOOK: string;
+      REACT_APP_WORKBENCHLINK_LIBRARY_PREVIEW: string;
       REACT_APP_WORKBENCHLINK_DT_PREVIEW: string;
 
       REACT_APP_CLIENT_ID: string;

client/package.json

@@ -87,6 +87,7 @@
     "redux": "^5.0.1",
     "remarkable": "^2.0.1",
     "remarkable-katex": "^1.2.1",
+    "reselect": "^5.1.1",
     "resize-observer-polyfill": "^1.5.1",
     "serve": "^14.2.1",
     "styled-components": "^6.1.1",

client/src/components/LinkIconsLib.tsx

@@ -7,6 +7,7 @@ import OpenInNewIcon from '@mui/icons-material/OpenInNew';
 import GitHubIcon from '@mui/icons-material/GitHub';
 import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
 import TabIcon from '@mui/icons-material/Tab';
+import LibraryBooksOutlined from '@mui/icons-material/LibraryBooksOutlined';
 
 type LinkIconsType = {
   [key: string]: { icon: React.ReactElement; name: string | undefined };
@@ -29,6 +30,10 @@ const LinkIcons: LinkIconsType = {
     icon: <NoteAltOutlinedIcon />,
     name: 'Jupyter Notebook',
   },
+  LIBRARY_PREVIEW: {
+    icon: <LibraryBooksOutlined />,
+    name: 'Library page preview',
+  },
   DT_PREVIEW: {
     icon: <TabIcon />,
     name: 'Digital Twins page preview',

client/src/preview/components/asset/AddToCartButton.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { Button } from '@mui/material';
+import LibraryAsset from 'preview/util/libraryAsset';
+import useCart from 'preview/store/CartAccess';
+import { useSelector } from 'react-redux';
+import { selectAssetByPath } from 'preview/store/assets.slice';
+
+interface AddToCartButtonProps {
+  assetPath: string;
+}
+
+function AddToCartButton({ assetPath }: AddToCartButtonProps) {
+  const { state: cartState, actions } = useCart();
+  const asset = useSelector(selectAssetByPath(assetPath)) as LibraryAsset;
+
+  const isInCart = cartState.assets.some(
+    (item: LibraryAsset) => item.path === asset.path,
+  );
+
+  const handleAddToCart = async () => {
+    actions.add(asset);
+  };
+
+  const handleRemoveFromCart = async () => {
+    actions.remove(asset);
+  };
+
+  return (
+    <Button
+      variant="contained"
+      size="small"
+      color="primary"
+      onClick={() => {
+        if (isInCart) {
+          handleRemoveFromCart();
+        } else {
+          handleAddToCart();
+        }
+      }}
+    >
+      {isInCart ? 'Remove' : 'Add'}
+    </Button>
+  );
+}
+
+export default AddToCartButton;

client/src/preview/components/asset/Asset.ts

@@ -1,4 +1,10 @@
+import GitlabInstance from 'preview/util/gitlab';
+
 export interface Asset {
   name: string;
   path: string;
+  type: string;
+  isPrivate: boolean;
+  gitlabInstance?: GitlabInstance;
+  fullDescription?: string;
 }

client/src/preview/components/asset/AssetBoard.tsx

@@ -1,9 +1,14 @@
 import * as React from 'react';
-import { Grid } from '@mui/material';
+import { Grid, CircularProgress } from '@mui/material';
 import { useSelector, useDispatch } from 'react-redux';
+import {
+  deleteAsset,
+  selectAssetsByTypeAndPrivacy,
+} from 'preview/store/assets.slice';
+import { fetchDigitalTwins } from 'preview/util/init';
+import { setShouldFetchDigitalTwins } from 'preview/store/digitalTwin.slice';
 import { RootState } from 'store/store';
-import { deleteAsset } from 'preview/store/assets.slice';
-import { fetchAssets } from 'preview/util/init';
+import Filter from './Filter';
 import { Asset } from './Asset';
 import { AssetCardExecute, AssetCardManage } from './AssetCard';
 
@@ -45,36 +50,74 @@ const AssetGridItem: React.FC<{
 );
 
 const AssetBoard: React.FC<AssetBoardProps> = ({ tab }) => {
-  const assets = useSelector((state: RootState) => state.assets.items);
+  const allAssets = useSelector(
+    selectAssetsByTypeAndPrivacy('Digital Twins', true),
+  );
+  const [filter, setFilter] = React.useState<string>('');
   const [error, setError] = React.useState<string | null>(null);
+  const shouldFetchDigitalTwins = useSelector(
+    (state: RootState) => state.digitalTwin.shouldFetchDigitalTwins,
+  );
+  const [loading, setLoading] = React.useState<boolean>(true);
   const dispatch = useDispatch();
 
   React.useEffect(() => {
     const fetchData = async () => {
-      await fetchAssets(dispatch, setError);
+      setLoading(true);
+      try {
+        await fetchDigitalTwins(dispatch, setError);
+      } finally {
+        setLoading(false);
+        dispatch(setShouldFetchDigitalTwins(false));
+      }
     };
-    fetchData();
+
+    if (shouldFetchDigitalTwins === true) {
+      fetchData();
+    } else {
+      setLoading(false);
+    }
   }, [dispatch]);
 
   const handleDelete = (deletedAssetPath: string) => {
     dispatch(deleteAsset(deletedAssetPath));
   };
 
+  const filteredAssets = allAssets.filter((asset) =>
+    asset.name.toLowerCase().includes(filter.toLowerCase()),
+  );
+
   if (error) {
     return <em style={{ textAlign: 'center' }}>{error}</em>;
   }
 
   return (
-    <Grid {...outerGridContainerProps}>
-      {assets.map((asset) => (
-        <AssetGridItem
-          key={asset.path}
-          asset={asset}
-          tab={tab}
-          onDelete={handleDelete}
-        />
-      ))}
-    </Grid>
+    <>
+      {loading ? (
+        <Grid
+          container
+          justifyContent="center"
+          alignItems="center"
+          sx={{ minHeight: '10rem' }}
+        >
+          <CircularProgress />
+        </Grid>
+      ) : (
+        <>
+          <Filter value={filter} onChange={setFilter} />
+          <Grid {...outerGridContainerProps}>
+            {filteredAssets.map((asset) => (
+              <AssetGridItem
+                key={asset.path}
+                asset={asset}
+                tab={tab}
+                onDelete={handleDelete}
+              />
+            ))}
+          </Grid>
+        </>
+      )}
+    </>
   );
 };
 

client/src/preview/components/asset/AssetCard.tsx

@@ -14,16 +14,19 @@ import LogDialog from 'preview/route/digitaltwins/execute/LogDialog';
 import DetailsDialog from 'preview/route/digitaltwins/manage/DetailsDialog';
 import ReconfigureDialog from 'preview/route/digitaltwins/manage/ReconfigureDialog';
 import DeleteDialog from 'preview/route/digitaltwins/manage/DeleteDialog';
+import { selectAssetByPath } from 'preview/store/assets.slice';
 import StartStopButton from './StartStopButton';
 import LogButton from './LogButton';
 import { Asset } from './Asset';
 import DetailsButton from './DetailsButton';
 import ReconfigureButton from './ReconfigureButton';
 import DeleteButton from './DeleteButton';
+import AddToCartButton from './AddToCartButton';
 
 interface AssetCardProps {
   asset: Asset;
   buttons?: React.ReactNode;
+  library?: boolean;
 }
 
 interface AssetCardManageProps {
@@ -44,6 +47,12 @@ interface CardButtonsContainerExecuteProps {
   setShowLog: Dispatch<SetStateAction<boolean>>;
 }
 
+interface CardButtonsContainerLibraryProps {
+  assetName: string;
+  assetPath: string;
+  setShowDetails: Dispatch<SetStateAction<boolean>>;
+}
+
 const Header = styled(Typography)`
   display: -webkit-box;
   -webkit-line-clamp: 1;
@@ -59,11 +68,15 @@ const Description = styled(Typography)`
   text-overflow: ellipsis;
 `;
 
-function CardActionAreaContainer(asset: Asset) {
+function CardActionAreaContainer(asset: Asset, library?: boolean) {
   const digitalTwin = useSelector(
-    (state: RootState) => state.digitalTwin[asset.name],
+    (state: RootState) => state.digitalTwin.digitalTwin[asset.name],
   );
 
+  const libraryAsset = useSelector(selectAssetByPath(asset.path));
+
+  const selectedAsset = library ? libraryAsset : digitalTwin;
+
   return (
     <Grid container>
       <Grid item xs={12}>
@@ -78,7 +91,7 @@ function CardActionAreaContainer(asset: Asset) {
           }}
         >
           <Description variant="body2" color="text.secondary">
-            {digitalTwin.description}
+            {selectedAsset!.description}
           </Description>
         </CardContent>
       </Grid>
@@ -120,7 +133,25 @@ function CardButtonsContainerExecute({
   );
 }
 
-function AssetCard({ asset, buttons }: AssetCardProps) {
+function CardButtonsContainerLibrary({
+  assetName,
+  assetPath,
+  setShowDetails,
+}: CardButtonsContainerLibraryProps) {
+  return (
+    <CardActions style={{ justifyContent: 'flex-end' }}>
+      <DetailsButton
+        assetName={assetName}
+        setShowDetails={setShowDetails}
+        library={true}
+        assetPath={assetPath}
+      />
+      <AddToCartButton assetPath={assetPath} />
+    </CardActions>
+  );
+}
+
+function AssetCard({ asset, buttons, library }: AssetCardProps) {
   return (
     <Card
       sx={{
@@ -133,7 +164,7 @@ function AssetCard({ asset, buttons }: AssetCardProps) {
       }}
     >
       <Header variant="h6">{formatName(asset.name)}</Header>
-      <CardActionAreaContainer {...asset} />
+      <CardActionAreaContainer {...{ ...asset, library }} />
       {buttons}
     </Card>
   );
@@ -209,4 +240,32 @@ function AssetCardExecute({ asset }: AssetCardProps) {
   );
 }
 
-export { AssetCardManage, AssetCardExecute };
+function AssetCardLibrary({ asset }: AssetCardProps) {
+  useState<AlertColor>('success');
+  const [showDetails, setShowDetails] = useState(false);
+
+  return (
+    <>
+      <AssetCard
+        asset={asset}
+        buttons={
+          <CardButtonsContainerLibrary
+            assetName={asset.name}
+            assetPath={asset.path}
+            setShowDetails={setShowDetails}
+          />
+        }
+        library={true}
+      />
+      <DetailsDialog
+        showDialog={showDetails}
+        setShowDialog={setShowDetails}
+        name={asset.name}
+        library={true}
+        path={asset.path}
+      />
+    </>
+  );
+}
+
+export { AssetCardManage, AssetCardExecute, AssetCardLibrary };