hise-flow-graphs 1.0.21 → 1.1.0

package/src/components/Certificates/ReadCertificate/MetadataModal/index.tsx

@@ -0,0 +1,142 @@
+import React, { useEffect, useState } from 'react';
+import { NodeProps } from 'reactflow';
+import * as R from 'ramda';
+import { Button, ConfirmationModal } from 'hise-components';
+import { useGraph } from '../../../../state/GraphContext';
+import MetadataTable from './MetadataTable';
+import { getHeader, getTabs, hasMetadata } from './helpers';
+import { getSchemes } from '../../CertificateGraph/helpers';
+
+const Tabs = ({ tabs, activeTab, setActiveTab }: {
+  tabs: Array<string>,
+  activeTab: string,
+  setActiveTab: Function,
+}) => (
+  <ul className="nav justify-content-center">
+    {tabs.map((tab) => (
+      <li className="nav-item" key={tab}>
+        <button
+          type="button"
+          className={`nav-link btn btn-link ${(activeTab === tab) && 'font-weight-bold'}`}
+          onClick={() => setActiveTab(tab)}
+        >
+          {tab.split(/(?=[A-Z])/).join(' ').toUpperCase()}
+        </button>
+      </li>
+    ))}
+  </ul>
+);
+
+export const MetadataButton = ({ label, node }: {
+  label: string,
+  node: NodeProps,
+}) => {
+  const { certificate, setNode } = useGraph();
+
+  if (!['Sample', 'Subject'].includes(label)) return null;
+
+  const { metadata } = certificate;
+  const { toggleMetadataModal } = node.data;
+
+  const showButton = hasMetadata(metadata, node.id);
+
+  if (!showButton || !toggleMetadataModal) return null;
+
+  return (
+    <Button
+      id="metadata-btn"
+      key="metadata-btn"
+      color="link"
+      className="p-0"
+      style={{ lineHeight: 'normal' }}
+      onClick={() => {
+        toggleMetadataModal();
+        setNode(node);
+      }}
+    >
+      <span style={{ fontSize: '1.75rem' }}>≡</span>
+    </Button>
+  );
+};
+
+interface Modal {
+  activeTab: string,
+  description: string,
+  header: string,
+  tabs: Array<string>,
+};
+
+const MetadataModal = ({ isOpen, toggle }: {
+  isOpen: boolean,
+  toggle: Function,
+}) => {
+  const { node, certificate } = useGraph();
+  const { id } = node;
+  const {
+    metadata,
+    schemes,
+    serviceLabels,
+    customLabels,
+    generatedLabels,
+  } = certificate;
+
+  const [nodeMetadata, setNodeMetadata] = useState({});
+  const [nodeSchemes, setNodeSchemes] = useState({});
+  const [modal, setModal] = useState<Modal>({
+    activeTab: '',
+    description: '',
+    header: '',
+    tabs: [],
+  });
+
+  useEffect(() => {
+    if (!isOpen || R.isEmpty(metadata) || R.isEmpty(node)) return;
+
+    const md = metadata[node.id];
+
+    const label = id?.split('/')[0];
+    const description = customLabels[id] || generatedLabels[id];
+    const header = getHeader(label, description);
+    const metadataTabs: string[] = getTabs(md);
+
+    const schemeObject = getSchemes(label, id, serviceLabels, schemes);
+
+    setNodeMetadata(md);
+    setNodeSchemes(schemeObject);
+    setModal((prevState) => ({
+      ...prevState,
+      activeTab: metadataTabs[0],
+      description: description,
+      header: header,
+      tabs: metadataTabs,
+    }));
+  }, [isOpen, node, metadata]);
+
+  const setActiveTab = (tab: string) => setModal((prevState) => ({ ...prevState, activeTab: tab }));
+
+  return (
+    <ConfirmationModal
+      scrollable
+      isOpen={isOpen}
+      onClose={toggle}
+      headerContent={modal.header}
+      noSubmit
+      cancelButtonText="Close"
+      content={(
+        <>
+          <Tabs tabs={modal.tabs} activeTab={modal.activeTab} setActiveTab={setActiveTab} />
+
+          <div className="mt-2">
+            <MetadataTable
+              metadata={nodeMetadata}
+              scheme={nodeSchemes}
+              activeTab={modal.activeTab}
+            />
+          </div>
+        </>
+      )}
+    />
+  );
+};
+
+export default MetadataModal;

package/src/components/Certificates/ReadCertificate/ReadNode.tsx

@@ -1,10 +1,15 @@
 import * as React from 'react';
 import { Handle, Position, NodeProps } from 'reactflow';
+import { useGraph } from '../../../state/GraphContext';
 import { MetadataButton } from './MetadataModal/index';
 import { Description, Label } from '../CertificateGraph/NodeAttributes';
 
 const ReadNode = (props: NodeProps) => {
-  const { label, description } = props.data;
+  const { id } = props;
+  const { customLabels, generatedLabels } = useGraph().certificate;
+
+  const label = id.split('/')[0];
+  const description = customLabels[id] || generatedLabels[id];
 
   return (
     <React.Fragment>
@@ -17,7 +22,7 @@ const ReadNode = (props: NodeProps) => {
         <div className="d-flex align-items-center">
           <Label label={label} description={description} />
 
-          <MetadataButton node={props.data} />
+          <MetadataButton label={label} node={props} />
         </div>
 
         <Description label={label} description={description} />

package/src/components/Certificates/ReadCertificate/index.tsx

@@ -2,7 +2,6 @@ import React, { useState } from 'react';
 import CertificateGraph from '../CertificateGraph/index';
 import MetadataModal from './MetadataModal/index';
 import { getNodesAndEdges } from '../CertificateGraph/helpers';
-import { getReadNodeData } from './helpers';
 import { Certificate } from '../../../@types/CertificateTypes';
 
 const ReadCertificate = ({ certificate }: { certificate: Certificate }) => {
@@ -10,11 +9,11 @@ const ReadCertificate = ({ certificate }: { certificate: Certificate }) => {
   const toggle = () => setIsMetadataModalOpen(!isMetadataModalOpen);
 
   const type = 'readNode';
-  const data = getReadNodeData(certificate.vertices, certificate, toggle);
+  const data = { toggleMetadataModal: toggle };
   const graph = getNodesAndEdges(
     certificate.vertices,
     certificate.edges,
-    certificate.assetReviews,
+    certificate.restrictedAssets,
     type,
     data,
   );

package/src/components/Certificates/ReviewCertificate/RestrictNode/index.tsx

@@ -0,0 +1,161 @@
+import React, { useEffect, useState } from 'react';
+import { toast } from 'react-toastify';
+import { Button, ConfirmationModal, ResourceEditor } from 'hise-components';
+import { useGraph } from '../../../../state/GraphContext';
+import { getFilteredRestrictedAssets, getFormControls } from '../helpers';
+
+type ModalProps = {
+    isOpen: boolean,
+    onClose: Function,
+    refresh: Function,
+    handleUpdate: Function,
+};
+
+const RestrictNodeModal: React.FC<ModalProps> = ({
+    isOpen,
+    onClose,
+    refresh,
+    handleUpdate,
+}) => {
+    const { node, certificate } = useGraph();
+    const { restrictedAssets } = certificate;
+
+    const restrictionObject = restrictedAssets ? restrictedAssets[node.id] : undefined;
+
+    const initialFormData = {
+        restrictionNotes: restrictionObject ? restrictionObject.restrictionNotes : '',
+        restrictionInstructions: restrictionObject ? restrictionObject.restrictionInstructions : ''
+    };
+
+    const [formData, setFormData] = useState(initialFormData);
+    const [isLoading, setIsLoading] = useState(false);
+
+    const [
+        isConfirmRemoveRestrictionModalOpen,
+        setIsConfirmRemoveRestrictionModalOpen
+    ] = useState(false);
+
+    useEffect(() => {
+        setFormData(initialFormData);
+    }, [restrictionObject]);
+
+    const clearForm = () => {
+        setFormData(initialFormData);
+        setIsLoading(false);
+        onClose();
+    }
+
+    const handleRemoveRestriction = async () => {
+        setIsLoading(true);
+
+        handleUpdate({
+            restrictedAssets: getFilteredRestrictedAssets(node.id, restrictedAssets)
+        }).then((response: Response) => {
+            if (response?.status === 200) {
+                toast.success('Successfully removed restrictions!');
+                setIsLoading(false);
+                setIsConfirmRemoveRestrictionModalOpen(false);
+                onClose();
+                refresh();
+            } else {
+                setIsLoading(false);
+            }
+        }).catch((error: any) => {
+            setIsLoading(false);
+            toast.error(`Request failed, ${error.toString()}`);
+        })
+    };
+
+    const handleRestrict = async () => {
+        if (formData.restrictionInstructions.length < 1 || formData.restrictionNotes.length < 1) {
+            return;
+        }
+
+        setIsLoading(true);
+
+        const preparedData = {
+            [node.id]: formData
+        };
+
+        handleUpdate({
+            restrictedAssets: {
+                ...restrictedAssets,
+                ...preparedData,
+            },
+        }).then((response: Response) => {
+            if (response?.status === 200) {
+                toast.success('Asset has been successfully restricted!')
+                setIsLoading(false);
+                onClose();
+                setFormData(initialFormData);
+                refresh();
+            } else {
+                setIsLoading(false);
+                toast.error(`Request failed...`);
+            }
+        }).catch((error: any) => {
+            setIsLoading(false);
+            toast.error(`Request failed, ${error.toString()}`);
+        });
+    }
+
+    return (
+        <>
+            <ConfirmationModal
+                id='restrict-removal-confirmation'
+                isOpen={isConfirmRemoveRestrictionModalOpen}
+                onClose={() => setIsConfirmRemoveRestrictionModalOpen(false)}
+                onSubmit={handleRemoveRestriction}
+                submitButtonText='Confirm'
+                pending={isLoading}
+                headerContent='Do you confirm the removal of restrictions for this node?'
+            />
+            <ConfirmationModal
+                id="restrict-single-node-modal"
+                isOpen={isOpen}
+                onClose={onClose}
+                size='lg'
+                headerContent="Change Node Restrictions"
+                noSubmit
+                noCancel
+                disabled={isLoading}
+                content={<>
+                    <ResourceEditor
+                        className=""
+                        onChange={(l: any) => setFormData(l)}
+                        editedResource={formData}
+                        controls={getFormControls()}
+                    />
+                    <div
+                        className="float-right mt-3 d-flex flex-wrap"
+                        style={{ gap: '0.5rem', padding: '0 15px' }}
+                    >
+                        <Button onClick={clearForm}>
+                            Cancel
+                        </Button>
+                        {restrictionObject && (
+                            <Button
+                                color='danger'
+                                onClick={() => setIsConfirmRemoveRestrictionModalOpen(true)}
+                                pending={isLoading}
+                            >
+                                Remove Restrictions
+                            </Button>
+                        )}
+                        <Button
+                            color='primary'
+                            onClick={handleRestrict}
+                            pending={isLoading}
+                        >
+                            {restrictionObject && ('Update Restrictions')}
+                            {!restrictionObject && ('Restrict')}
+                        </Button>
+                    </div>
+                </>}
+            >
+            </ConfirmationModal>
+        </>
+    )
+}
+
+export default RestrictNodeModal;

package/src/components/Certificates/ReviewCertificate/ReviewNode.tsx

@@ -1,15 +1,18 @@
 import React from 'react';
 import { Handle, Position, NodeProps } from 'reactflow';
+import { useGraph } from '../../../state/GraphContext';
 import { ReviewBtn } from './ReviewNodes';
 import { Description, Label } from '../CertificateGraph/NodeAttributes';
 import { MetadataButton } from '../ReadCertificate/MetadataModal';
 import { getLabelLink } from '../CertificateGraph/helpers';
 
 const ReviewNode = (props: NodeProps) => {
-  const { vertex, description, isExecutable } = props.data;
+  const { certificate } = useGraph();
+  const { id } = props;
 
-  const [label, guid] = vertex.split('/');
-  const link = getLabelLink(label, guid, isExecutable);
+  const [label, guid] = id.split('/');
+  const description = certificate.customLabels[id] || certificate.generatedLabels[id];
+  const link = getLabelLink(label, guid, certificate.isExecutable);
 
   return (
     <>
@@ -22,9 +25,9 @@ const ReviewNode = (props: NodeProps) => {
         <div className="d-flex align-items-center">
           <Label link={link} label={label} description={description} />
 
-          <ReviewBtn node={props.data} />
+          <ReviewBtn node={props} />
 
-          <MetadataButton node={props.data} />
+          <MetadataButton label={label} node={props} />
         </div>
 
         <Description label={label} description={description} />

package/src/components/Certificates/ReviewCertificate/ReviewNodes/index.tsx

@@ -1,14 +1,15 @@
 import React, { useState } from 'react';
-import { Node } from 'reactflow';
+import { NodeProps } from 'reactflow';
 import { Button, ConfirmationModal, ResourceEditor, MessageStripe } from 'hise-components';
 import { useGraph } from '../../../../state/GraphContext';
 import { getFormControls } from '../helpers';
 import { Response } from '../../../../@types/GeneralTypes';
 
-export const ReviewBtn = ({ node }: { node: Node['data'] }) => {
+export const ReviewBtn = ({ node }: { node: NodeProps }) => {
   const { setNode } = useGraph();
+  const { toggleReviewModal } = node.data;
 
-  const { label, toggleReviewModal } = node;
+  const label = node.id.split('/')[0];
 
   if (!['File', 'IDE'].includes(label)) return null;
 
@@ -21,7 +22,7 @@ export const ReviewBtn = ({ node }: { node: Node['data'] }) => {
       icon="fa-edit"
       noText
       onClick={() => {
-        toggleReviewModal && toggleReviewModal();
+        toggleReviewModal();
         setNode(node);
       }}
     />

package/src/components/Certificates/ReviewCertificate/helpers.ts

@@ -1,58 +1,6 @@
 import { CSSProperties } from 'react';
-import { Node } from 'reactflow';
-import * as R from 'ramda';
-import { getSchemes } from '../CertificateGraph/helpers';
-import { Certificate, AssetReview, AssetReviewStatus } from '../../../@types/CertificateTypes';
 
-export const getReviewNodeData = (
-  vertices: Certificate['vertices'],
-  certificate: Certificate,
-  toggleReviewModal: Function,
-  toggleMetadataModal: Function,
-) => {
-  const data: { [key: string]: Node['data'] } = {};
-
-  const {
-    id,
-    isExecutable,
-    generatedLabels,
-    customLabels,
-    serviceLabels,
-    schemes,
-    metadata,
-    assetReviews,
-  } = certificate;
-
-  if (R.isEmpty(vertices) || R.isNil(vertices)) return data;
-
-  vertices.forEach((vertex: string) => {
-    const label = vertex.split('/')[0];
-    const description = customLabels[vertex] || generatedLabels[vertex];
-    const assetReview = ['File', 'IDE'].includes(label)
-      ? R.find(R.propEq('vertex', vertex))(assetReviews)
-      : {};
-    const otherReviews = R.reject((review: AssetReview) => (review.vertex === vertex), assetReviews);
-
-    data[vertex] = {
-      vertex,
-      label,
-      description,
-      assetReview,
-      otherReviews,
-      certificate,
-      schemes: getSchemes(vertex, serviceLabels, schemes),
-      metadata: metadata ? metadata[vertex] : null,
-      certId: id,
-      toggleReviewModal,
-      toggleMetadataModal,
-      isExecutable,
-    };
-  });
-
-  return data;
-};
-
-export const getStyle = (type: string, assetReview: AssetReview | null) => {
+export const getStyle = (type: string, isAssetRestricted: boolean) => {
   const style: CSSProperties = {
     backgroundColor: 'white',
     borderRadius: '3px',
@@ -68,13 +16,10 @@ export const getStyle = (type: string, assetReview: AssetReview | null) => {
 
     case 'File':
     case 'IDE':
-      style.borderColor = 'orange';
+      style.borderColor = 'lightblue';
 
-      if (!assetReview) break;
+      if (isAssetRestricted) style.borderColor = 'orange';
 
-      if (assetReview.reviewStatus === AssetReviewStatus.Restricted) style.borderColor = 'blue';
-      if (assetReview.reviewStatus === AssetReviewStatus.Approved) style.borderColor = 'green';
-      if (assetReview.reviewStatus === AssetReviewStatus.Rejected) style.borderColor = 'red';
       break;
 
     default:
@@ -89,13 +34,26 @@ export const getFormControls = () => (
   [
     {
       type: 'text',
-      key: 'reviewNotes',
-      label: 'Review Notes',
+      key: 'restrictionNotes',
+      label: 'Restriction Notes',
+      invalid: (d: any) => d.restrictionNotes.length < 1
     },
     {
       type: 'text',
       key: 'restrictionInstructions',
       label: 'Restriction Instructions',
+      invalid: (d: any) => d.restrictionInstructions.length < 1
     },
   ]
 );
+
+export const getFilteredRestrictedAssets = (assetBeingRemoved: string, restrictedAssets: any) => {
+  const filtered = Object.keys(restrictedAssets)
+    .filter(key => key !== assetBeingRemoved)
+    .reduce((obj: any, key: any) => {
+      obj[key] = restrictedAssets[key];
+      return obj;
+    }, {});
+
+  return filtered;
+}

package/src/components/Certificates/ReviewCertificate/{index.jsx → index.tsx}

@@ -1,11 +1,17 @@
 import React, { useState } from 'react';
 import CertificateGraph from '../CertificateGraph';
-import SingleNodeModal from './ReviewNodes/SingleNodeModal';
+import RestrictNodeModal from './RestrictNode/index';
 import MetadataModal from '../ReadCertificate/MetadataModal';
 import { getNodesAndEdges } from '../CertificateGraph/helpers';
-import { getReviewNodeData } from './helpers';
+import { Certificate } from '../../../@types/CertificateTypes';
 
-const ReviewCertificate = ({ certificate, loading, userEmail, handleUpdate, refresh }) => {
+const ReviewCertificate = ({ certificate, loading, userEmail, handleUpdate, refresh }: {
+  certificate: Certificate,
+  loading: boolean,
+  userEmail: string,
+  handleUpdate: Function,
+  refresh: Function,
+}) => {
   const [isReviewModalOpen, setIsReviewModalOpen] = useState(false);
   const toggleReviewModal = () => setIsReviewModalOpen(!isReviewModalOpen);
 
@@ -13,11 +19,11 @@ const ReviewCertificate = ({ certificate, loading, userEmail, handleUpdate, refr
   const toggleMetadataModal = () => setIsMetadataModalOpen(!isMetadataModalOpen);
 
   const type = 'reviewNode';
-  const data = getReviewNodeData(certificate.vertices, certificate, toggleReviewModal, toggleMetadataModal);
+  const data = { toggleReviewModal, toggleMetadataModal };
   const graph = getNodesAndEdges(
     certificate.vertices,
     certificate.edges,
-    certificate.assetReviews,
+    certificate.restrictedAssets,
     type,
     data,
   );
@@ -28,13 +34,11 @@ const ReviewCertificate = ({ certificate, loading, userEmail, handleUpdate, refr
       certificate={certificate}
       graph={graph}
     >
-      <SingleNodeModal
+      <RestrictNodeModal
         isOpen={isReviewModalOpen}
-        loading={loading}
-        toggle={toggleReviewModal}
-        userEmail={userEmail}
-        handleUpdate={handleUpdate}
+        onClose={toggleReviewModal}
         refresh={refresh}
+        handleUpdate={handleUpdate}
       />
 
       <MetadataModal isOpen={isMetadataModalOpen} toggle={toggleMetadataModal} />

package/src/components/Certificates/WorkspaceCertificate/ReplicaIDENode/index.tsx

@@ -4,8 +4,11 @@ import { useGraph } from '../../../../state/GraphContext';
 import { Description, Label } from '../../CertificateGraph/NodeAttributes';
 
 const ReplicaIDENode = (props: NodeProps) => {
-  const { label, description } = props.data;
-  const { replica } = useGraph();
+  const { replica, certificate } = useGraph();
+  const { customLabels, generatedLabels } = certificate;
+
+  const label = props.id.split('/')[0];
+  const description = customLabels[props.id] || generatedLabels[props.id];
 
   const originalIDEId = props.id.replace('-replica', '');
   const ideId = replica?.matches[originalIDEId];

package/src/components/Certificates/WorkspaceCertificate/ReplicaPipelineNode/index.tsx

@@ -58,11 +58,13 @@ const ReplicaPipelineInfo = ({ pipeline }: { pipeline: Pipeline | null }) => {
 };
 
 const ReplicaPipelineNode = (props: NodeProps) => {
-  const { label, description } = props.data;
-  const { replica } = useGraph();
+  const { replica, certificate } = useGraph();
+  const { customLabels, generatedLabels } = certificate;
 
   const [data, setData] = useState<Pipeline | null>(null);
 
+  const label = props.id.split('/')[0];
+  const description = customLabels[props.id] || generatedLabels[props.id];
   const replicaPipelineId = props.id.replace('-replica', '');
 
   const pipelineId = replica?.matches[replicaPipelineId];