hise-flow-graphs 1.0.21 → 1.1.0

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

@@ -0,0 +1,106 @@
+import React, { useState } from 'react';
+import { Handle, Position } from 'reactflow';
+import { NodeProps } from 'reactflow';
+import { ConfirmationModal, Button } from 'hise-components';
+import { Label, Description } from '../../CertificateGraph/NodeAttributes';
+import { useGraph } from '../../../../state/GraphContext';
+import { RestrictedAssetObject } from '../../../../@types/CertificateTypes';
+
+const NotesAndInstructionsModal = (props: {
+  restrictedAsset: RestrictedAssetObject,
+  isOpen: boolean,
+  toggle: Function,
+}) => {
+  const { isOpen, toggle, restrictedAsset } = props;
+
+  if (!restrictedAsset) return null;
+
+  const restrictedAssetEntries = Object.entries(restrictedAsset);
+
+  const NotesAndInstructions = () => {
+    const LABELS: { [key: string]: string } = {
+      restrictionInstructions: 'Instructions',
+      restrictionNotes: 'Notes',
+    };
+
+    return (
+      <>
+        {restrictedAssetEntries.map(([key, value]: [string, string]) => (
+          <>
+            <h6>{LABELS[key]}</h6>
+            <p>
+              {value}
+            </p>
+          </>
+        ))}
+      </>
+    );
+  };
+
+  return (
+    <ConfirmationModal
+      id="restricted-node-notes-modal"
+      isOpen={isOpen}
+      onClose={toggle}
+      headerContent="This asset has been restricted."
+      cancelButtonText="Close"
+      noSubmit
+      content={<NotesAndInstructions />}
+    />
+  );
+};
+
+interface RestrictedNode extends NodeProps {
+  restrictedAsset: RestrictedAssetObject,
+};
+
+const RestrictedNode = (props: RestrictedNode) => {
+  const { restrictedAsset } = props;
+  const { certificate } = useGraph();
+  const { customLabels, generatedLabels } = certificate;
+
+  const [isModalOpen, setModalOpen] = useState(false);
+  const toggle = () => setModalOpen(!isModalOpen);
+
+  const label = props.id.split('/')[0];
+  const description = customLabels[props.id] || generatedLabels[props.id];
+
+  return (
+    <React.Fragment>
+      <NotesAndInstructionsModal
+        restrictedAsset={restrictedAsset}
+        isOpen={isModalOpen}
+        toggle={toggle}
+      />
+      <Handle
+        type="target"
+        position={Position.Left}
+      />
+
+      <div
+        style={{ width: '250px' }}
+        onClick={toggle}
+      >
+        <div className="label d-flex p-1">
+          <Label label={label} description={description} />
+          <Button
+            id={`${props.id}-restricted-btn`}
+            className="btn-sm text-warning btn-link"
+            icon="fas fa-lock"
+            noText
+            onClick={toggle}
+          />
+        </div>
+
+        <Description label={label} description={description} />
+      </div>
+
+      <Handle
+        type="source"
+        position={Position.Right}
+      />
+    </React.Fragment>
+  );
+};
+
+export default RestrictedNode;

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

@@ -3,11 +3,11 @@ import { NodeProps } from 'reactflow';
 import { toast } from 'react-toastify';
 import { ConfirmationModal } from 'hise-components';
 import WorkspaceNode from '../WorkspaceNode';
+import RestrictedNode from '../RestrictedNode';
 import { useGraph } from '../../../../state/GraphContext';
 import { copyFile } from './helpers';
 
 const WorkspaceFileNode = (props: NodeProps) => {
-  const { refresh } = props.data;
   const { certificate } = useGraph();
 
   const [loading, setLoading] = useState<boolean>(false);
@@ -15,6 +15,10 @@ const WorkspaceFileNode = (props: NodeProps) => {
   const [isFileModalOpen, setIsFileModalOpen] = useState(false);
   const toggleFileModal = () => setIsFileModalOpen(!isFileModalOpen);
 
+  const restrictedAsset = certificate.restrictedAssets[props.id];
+
+  if (restrictedAsset) return <RestrictedNode {...props} restrictedAsset={restrictedAsset} />;
+
   const onCopyFile = async () => {
     setLoading(true);
 
@@ -22,7 +26,7 @@ const WorkspaceFileNode = (props: NodeProps) => {
       await copyFile(props.id, certificate.id)
         .then(async (resp) => {
           if (resp.ok) {
-            refresh();
+            props.data.refresh();
             toast.success('Copied file into exploration.')
           } else {
             const error: any = await resp.json();

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

@@ -3,14 +3,11 @@ import { NodeProps } from 'reactflow';
 import { ConfirmationModal } from 'hise-components';
 import WorkspaceNode from '../WorkspaceNode';
 import ReplicaIDENode from '../ReplicaIDENode';
+import RestrictedNode from '../RestrictedNode';
 import { useGraph } from '../../../../state/GraphContext';
 import { startIDE } from './helpers';
 
 const WorkspaceIDENode = (props: NodeProps) => {
-  const { refresh, isReplicated } = props.data;
-
-  if (isReplicated) return <ReplicaIDENode {...props} />
-
   const { certificate, replica } = useGraph();
 
   const [loading, setLoading] = useState<boolean>(false);
@@ -18,6 +15,14 @@ const WorkspaceIDENode = (props: NodeProps) => {
   const [isIDEModalOpen, setIsIDEModalOpen] = useState(false);
   const toggleIDEModal = () => setIsIDEModalOpen(!isIDEModalOpen);
 
+  const restrictedAsset = certificate.restrictedAssets[props.id];
+
+  if (restrictedAsset) return <RestrictedNode {...props} restrictedAsset={restrictedAsset} />;
+
+  const isReplicated = replica.matches[props.id];
+
+  if (isReplicated) return <ReplicaIDENode {...props} />;
+
   const onStartIDE = async () => {
     setLoading(true);
 
@@ -27,7 +32,7 @@ const WorkspaceIDENode = (props: NodeProps) => {
         certificate.id,
         certificate.edges,
         replica.matches,
-        refresh,
+        props.data.refresh,
         toggleIDEModal,
       );
     } catch (error: any) {

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

@@ -1,17 +1,23 @@
 import React, { useState } from 'react';
-import { Handle, Position, NodeProps } from 'reactflow';
+import { Handle, Position, Node } from 'reactflow';
 import { Label, Description } from '../../CertificateGraph/NodeAttributes';
+import { useGraph } from '../../../../state/GraphContext';
 
 const WorkspaceNode = (props: {
   id: string,
-  data: NodeProps['data'],
+  data: Node['data'],
   modal: React.ReactNode,
   toggle: Function,
 }) => {
-  const { label, description, isReplicated } = props.data;
+  const { certificate, replica } = useGraph();
+  const { customLabels, generatedLabels } = certificate;
 
   const [isHover, setIsHover] = useState(false);
 
+  const label = props.id.split('/')[0];
+  const description = customLabels[props.id] || generatedLabels[props.id];
+  const isReplicated = replica.matches[props.id];
+
   return (
     <React.Fragment>
       {props.modal}

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

@@ -7,10 +7,6 @@ import PipelineModal from './PipelineModal';
 import { startPipeline } from './helpers';
 
 const WorkspacePipelineNode = (props: NodeProps) => {
-  const { refresh, isReplicated } = props.data;
-
-  if (isReplicated) return <ReplicaPipelineNode {...props} />
-
   const { certificate, replica } = useGraph();
 
   const [loading, setLoading] = useState<boolean>(false);
@@ -18,6 +14,10 @@ const WorkspacePipelineNode = (props: NodeProps) => {
   const [isPipelineModalOpen, setIsPipelineModalOpen] = useState(false);
   const togglePipelineModal = () => setIsPipelineModalOpen(!isPipelineModalOpen);
 
+  const isReplicated = replica.matches[props.id];
+
+  if (isReplicated) return <ReplicaPipelineNode {...props} />;
+
   const onStartPipeline = async () => {
     setLoading(true);
 
@@ -27,7 +27,7 @@ const WorkspacePipelineNode = (props: NodeProps) => {
         certificate.id,
         certificate.edges,
         replica.matches,
-        refresh,
+        props.data.refresh,
         togglePipelineModal,
       );
     } catch (error: any) {

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

@@ -1,6 +1,6 @@
 import * as R from 'ramda';
 import { Edge, Node } from 'reactflow';
-import { getStyle, getSchemes } from '../CertificateGraph/helpers';
+import { getStyle } from '../CertificateGraph/helpers';
 import { getLayoutedElements } from '../CertificateGraph/helpers';
 import { Certificate, Replica } from '../../../@types/CertificateTypes';
 
@@ -38,45 +38,9 @@ const getWorkspaceStyle = (label: string, isReplicated: string | undefined) => {
   return getStyle(label);
 };
 
-export const getWorkspaceData = (
-  vertices: Certificate['vertices'],
-  certificate: Certificate,
-  replica: Replica,
-  refresh: Function,
-) => {
-  const data: { [key: string]: Node['data'] } = {};
-
-  const {
-    generatedLabels,
-    customLabels,
-    serviceLabels,
-    schemes,
-    metadata,
-  } = 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 isReplicated = replica.matches[vertex];
-
-    data[vertex] = {
-      label,
-      description,
-      customLabels,
-      metadata: metadata ? metadata[vertex] : null,
-      schemes: getSchemes(vertex, serviceLabels, schemes),
-      isReplicated,
-      refresh,
-    };
-  });
-
-  return data;
-};
-
 const getNodes = (
   vertices: Certificate['vertices'],
+  replica: Replica,
   data: { [key: string]: Node['data'] },
 ) => {
   const position = { x: 0, y: 0 };
@@ -87,13 +51,14 @@ const getNodes = (
 
   vertices.forEach((vertex: string) => {
     const label = vertex.split('/')[0];
+    const isReplicated = replica.matches[vertex];
 
     nodes.push({
       id: vertex,
       position,
       type: getNodeType(label),
-      data: data[vertex],
-      style: getWorkspaceStyle(label, data[vertex].isReplicated),
+      data,
+      style: getWorkspaceStyle(label, isReplicated),
     });
   });
 
@@ -132,9 +97,10 @@ const getCertificateAndReplicaEdges = (edges: Certificate['edges']) => {
 export const getWorkspaceNodesAndEdges = (
   vertices: Certificate['vertices'],
   edges: Certificate['edges'],
+  replica: Replica,
   data: { [key: string]: Node['data'] },
 ) => {
-  const initialNodes = getNodes(vertices, data);
+  const initialNodes = getNodes(vertices, replica, data);
   const initialEdges = getCertificateAndReplicaEdges(edges);
 
   const {

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

@@ -1,8 +1,7 @@
 import React from 'react';
 import * as R from 'ramda';
-import NodeProvider from '../../../state/GraphContext';
 import CertificateGraph from '../CertificateGraph';
-import { getWorkspaceData, getWorkspaceNodesAndEdges } from './helpers';
+import { getWorkspaceNodesAndEdges } from './helpers';
 import { Certificate, Replica } from '../../../@types/CertificateTypes';
 import './style.css';
 
@@ -14,22 +13,22 @@ const WorkspaceCertificate = ({ certificate, replica, refresh }: {
   if (R.isNil(certificate) || R.isEmpty(certificate)) return;
   if (R.isNil(replica) || R.isEmpty(replica)) return;
 
-  const data = getWorkspaceData(certificate.vertices, certificate, replica, refresh);
+  const type = "fileLayerNode";
+  const data = { refresh };
   const graph = getWorkspaceNodesAndEdges(
     certificate.vertices,
     certificate.edges,
+    replica,
     data,
   );
 
   return (
-    <NodeProvider>
-      <CertificateGraph
-        type="fileLayerNode"
-        certificate={certificate}
-        replica={replica}
-        graph={graph}
-      />
-    </NodeProvider>
+    <CertificateGraph
+      type={type}
+      certificate={certificate}
+      replica={replica}
+      graph={graph}
+    />
   );
 };
 

package/src/components/Certificates/WorkspaceCertificate/style.css

@@ -1,13 +1,3 @@
-/* .workspace-certificate {
-
-  .react-flow__node-pipelineNode:hover,
-  .react-flow__node-IDENode:hover,
-  .react-flow__node-visualizationNode:hover,
-  .react-flow__node-fileNode:hover {
-    box-shadow: 0 0 0 8px yellow !important;
-  }
-} */
-
 .action-hover {
   box-shadow: 0 0 2px 8px yellow !important;
 }

package/src/index.ts

@@ -1,13 +1,13 @@
 import ReadCertificate from './components/Certificates/ReadCertificate/index';
 import EditCertificate from './components/Certificates/EditCertificate/index';
 import ReviewCertificate from './components/Certificates/ReviewCertificate/index';
-import AllNodesModal from './components/Certificates/ReviewCertificate/ReviewNodes/AllNodesModal';
 import WorkspaceCertificate from './components/Certificates/WorkspaceCertificate/index';
+import getCertificateBody from './utils/getCertificateBody';
 
 export {
   ReadCertificate,
   EditCertificate,
   ReviewCertificate,
-  AllNodesModal,
   WorkspaceCertificate,
+  getCertificateBody,
 };

package/src/state/GraphContext.tsx

@@ -2,19 +2,17 @@ import React, {
   useState,
   useContext,
   createContext,
+  useMemo,
 } from 'react';
 import { useNodesState, useEdgesState, Node } from 'reactflow';
 import { Certificate, Replica, NodeLayers } from '../@types/CertificateTypes';
 
 type GraphContextType = {
   certificate: Certificate | any,
-  setCertificate: (p: Certificate) => void,
   node: Node | any,
   setNode: (p: Node | object) => void,
   type: string,
-  setType: (p: string) => void,
   replica: Replica | any,
-  setReplica: (p: Replica | object) => void,
   nodesState: any,
   edgesState: any,
   nodeLayers: NodeLayers,
@@ -23,13 +21,10 @@ type GraphContextType = {
 
 const GraphContext = createContext<GraphContextType>({
   certificate: {},
-  setCertificate: () => { },
   node: {},
   setNode: () => { },
   type: 'readNode',
-  setType: () => { },
   replica: {},
-  setReplica: () => { },
   nodesState: [],
   edgesState: [],
   nodeLayers: {
@@ -45,14 +40,13 @@ const GraphContext = createContext<GraphContextType>({
   setNodeLayers: () => { },
 });
 
-const GraphProvider = ({ children }: any) => {
+const GraphProvider = (props: {
+  type: string,
+  certificate: Certificate,
+  replica?: Replica,
+  children: React.ReactNode,
+}) => {
   const [node, setNode] = useState({});
-
-  const [type, setType] = useState('readNode');
-
-  const [certificate, setCertificate] = useState({});
-  const [replica, setReplica] = useState({});
-
   const [nodeLayers, setNodeLayers] = useState<NodeLayers>({
     previous: {
       nodes: [],
@@ -67,24 +61,31 @@ const GraphProvider = ({ children }: any) => {
   const nodesState = useNodesState([]); // [nodes, setNodes, onNodesChange]
   const edgesState = useEdgesState([]); // [edges, setEdges, onEdgesChange]
 
-  const contextValue = {
+  const contextValue = useMemo(() => ({
+    node,
+    setNode,
+    type: props.type,
+    certificate: props.certificate,
+    replica: props.replica,
+    nodeLayers,
+    setNodeLayers,
+    nodesState,
+    edgesState,
+  }), [
     node,
     setNode,
-    type,
-    setType,
-    certificate,
-    setCertificate,
-    replica,
-    setReplica,
+    props.type,
+    props.certificate,
+    props.replica,
     nodeLayers,
     setNodeLayers,
     nodesState,
     edgesState,
-  };
+  ]);
 
   return (
     <GraphContext.Provider value={contextValue}>
-      {children}
+      {props.children}
     </GraphContext.Provider>
   );
 };

package/src/utils/getCertificateBody.ts

@@ -0,0 +1,89 @@
+import process from 'process';
+
+const hasValidId = (id: string) => {
+  if (!id) return true;
+  return (id !== 'ffffffff-ffff-ffff-ffff-ffffffffffff');
+};
+
+const certificateEndpoint = (certId: string, isPublic: boolean) => (
+  `${process.env.REACT_APP_HISE_BASE_URL}`
+  + `/${isPublic ? 'public' : 'publishing'}/certificate/${certId}`
+);
+
+const certificateLabelsEndpoint = (labelsId: string, isPublic: boolean) => (
+  `${process.env.REACT_APP_HISE_BASE_URL}`
+  + `/${isPublic ? 'public' : 'publishing'}/certificate/labels/${labelsId}`
+);
+
+const certificateMetadataEndpoint = (metadataId: string, isPublic: boolean) => (
+  `${process.env.REACT_APP_HISE_BASE_URL}`
+  + `/${isPublic ? 'public' : 'publishing'}/certificate/metadata/${metadataId}`
+);
+
+export const certificateSchemesEndpoint = (schemesId: string, isPublic: boolean) => (
+  `${process.env.REACT_APP_HISE_BASE_URL}`
+  + `/${isPublic ? 'public' : 'publishing'}/certificate/schemes/${schemesId}`
+);
+
+const getCertificateBody = async (certificateId: string, isPublic: boolean = true, setResponse?: Function) => {
+  const certificateResponse = await fetch(
+    certificateEndpoint(certificateId, isPublic),
+    { credentials: 'include' },
+  );
+
+  if (setResponse) setResponse(certificateResponse);
+
+  const certificateData = await certificateResponse.json();
+
+  let mergedCertificate = { ...certificateData };
+
+  const { labelsId, metadataId, schemesId } = certificateData;
+
+  if (hasValidId(labelsId)) {
+    const labelsResponse = await fetch(
+      certificateLabelsEndpoint(labelsId, isPublic),
+      { credentials: 'include' },
+    );
+
+    const labelsData = await labelsResponse.json();
+
+    mergedCertificate = {
+      ...mergedCertificate,
+      customLabels: labelsData.customLabels,
+      generatedLabels: labelsData.generatedLabels,
+      serviceLabels: labelsData.serviceLabels,
+    };
+  }
+
+  if (hasValidId(metadataId)) {
+    const metadataResponse = await fetch(
+      certificateMetadataEndpoint(metadataId, isPublic),
+      { credentials: 'include' },
+    );
+
+    const metadataData = await metadataResponse.json();
+
+    mergedCertificate = {
+      ...mergedCertificate,
+      metadata: metadataData.metadata,
+    };
+  }
+
+  if (hasValidId(schemesId)) {
+    const schemesResponse = await fetch(
+      certificateSchemesEndpoint(schemesId, isPublic),
+      { credentials: 'include' },
+    );
+
+    const schemesData = await schemesResponse.json();
+
+    mergedCertificate = {
+      ...mergedCertificate,
+      schemes: schemesData.schemes,
+    };
+  }
+
+  return mergedCertificate;
+};
+
+export default getCertificateBody;