tweaks

ConductorOne · Oct 11, 2023 · 6d29fe1 · 6d29fe1
1 parent 185d601
commit 6d29fe1
Show file tree

Hide file tree

Showing 8 changed files with 70 additions and 34 deletions.
diff --git a/frontend/src/components/explorer/explorer.tsx b/frontend/src/components/explorer/explorer.tsx
@@ -1,5 +1,11 @@
 import React, { useEffect, useState } from "react";
-import ReactFlow, { useEdgesState, useNodesState } from "reactflow";
+import ReactFlow, {
+  Controls,
+  useEdgesState,
+  useNodesInitialized,
+  useNodesState,
+  useReactFlow,
+} from "reactflow";
 import "reactflow/dist/style.css";
 import { CustomEdge } from "./components/customEdge";
 import { ChildNode, ParentNode } from "./components/customNode";
@@ -29,6 +35,8 @@ const nodeTypes = {
 
 const Explorer = ({ resourceList, closeResourceList }) => {
   const navigate = useNavigate();
+  const reactFlowInstance = useReactFlow();
+  const nodesInitialized = useNodesInitialized();
   const { id: resourceId } = useParams();
   const { type: resourceType } = useParams();
   const [nodes, setNodes] = useNodesState([]);
@@ -51,6 +59,12 @@ const Explorer = ({ resourceList, closeResourceList }) => {
     }
   }, [resourceId, resourceType]);
 
+  useEffect(() => {
+    if (nodesInitialized) {
+      reactFlowInstance.fitView();
+    }
+  }, [nodesInitialized]);
+
   const openEntitlementsDetails = (entitlement) => {
     setResourceDetailsOpen({
       entitlementOpened: true,
@@ -60,7 +74,6 @@ const Explorer = ({ resourceList, closeResourceList }) => {
 
   const openResourceDetails = async (resourceType: string, nodeId: string) => {
     const resourceDetails = await fetchResourceDetails(resourceType, nodeId);
-    console.log("resource details", resourceDetails)
     setResourceDetailsOpen({
       resourceOpened: true,
       resource: resourceDetails,
@@ -136,7 +149,9 @@ const Explorer = ({ resourceList, closeResourceList }) => {
             }
             fitView
             attributionPosition="bottom-left"
-          />
+          >
+            <Controls position="bottom-right" showInteractive={false} />
+          </ReactFlow>
         </TreeWrapper>
       )}
       {resourceDetails.resource && (

diff --git a/frontend/src/components/icons/icons.tsx b/frontend/src/components/icons/icons.tsx
@@ -155,7 +155,7 @@ export const ExplorerLogo = ({ color }) => {
   );
 };
 
-export const Link = ({ color }) => {
+export const LinkIcon = ({ color }) => {
   return (
     <SvgIcon color={color}>
       <svg

diff --git a/frontend/src/components/navigation/navigation.tsx b/frontend/src/components/navigation/navigation.tsx
@@ -5,23 +5,17 @@ import { Tooltip, useTheme } from "@mui/material";
 import pluralize from "pluralize";
 import { Logo, StyledDrawer, CloseButton } from "./styles";
 
-interface ResourceTypesData {
-  resource_types: {
-    resource_type: {
-      id: string;
-      display_name: string;
-      traits?: number[];
-    };
-  }[];
-}
-
 export const Navigation = ({ openResourceList }) => {
   const theme = useTheme();
-  const [data, setData] = useState<ResourceTypesData>();
+  const [data, setData] = useState([]);
   useEffect(() => {
     const fetchData = async () => {
       const res = await (await fetch("/api/resourceTypes")).json();
-      setData(res.data);
+      const resourceTypes = res.data.resource_types
+      const sorted = resourceTypes.sort((a, b) =>
+        a.resource_type.display_name.localeCompare(b.resource_type.display_name)
+      );
+      setData(sorted);
     };
     fetchData();
   }, []);
@@ -33,7 +27,7 @@ export const Navigation = ({ openResourceList }) => {
       </Logo>
       <List>
         {data &&
-          data.resource_types.map((type) => (
+          data.map((type) => (
             <Tooltip
               key={type.resource_type.display_name}
               title={pluralize(type.resource_type.display_name)}

diff --git a/frontend/src/components/resourceDetails/components/entitlements.tsx b/frontend/src/components/resourceDetails/components/entitlements.tsx
@@ -3,9 +3,9 @@ import { ListItem } from "..";
 import { Label, Value } from "../styles";
 
 const purposeMap = {
-  0: "PURPOSE_VALUE_UNSPECIFIED",
-  1: "PURPOSE_VALUE_ASSIGNMENT",
-  2: "PURPOSE_VALUE_PERMISSION",
+  0: "Unspecified",
+  1: "Assignment",
+  2: "Permission",
 };
 
 export const EntitlementDetails = ({

diff --git a/frontend/src/components/resourceDetails/index.tsx b/frontend/src/components/resourceDetails/index.tsx
@@ -1,5 +1,5 @@
 import React, { Fragment } from "react";
-import { Close, Link } from "../icons/icons";
+import { Close, LinkIcon } from "../icons/icons";
 import { useTheme } from "@mui/material/styles";
 import { Button, Typography } from "@mui/material";
 import {
@@ -11,6 +11,7 @@ import {
   Value,
   CloseButton,
   ModalHeader,
+  StyledLink,
 } from "./styles";
 import { normalizeString } from "../../common/helpers";
 import { EntitlementDetails } from "./components/entitlements";
@@ -29,14 +30,27 @@ export const ListItem = ({ label, value }) => {
   );
 };
 
-export const ResourceDetailsModal = ({ resource, resourceDetails, closeDetails }) => {
+export const ResourceDetailsModal = ({
+  resource,
+  resourceDetails,
+  closeDetails,
+}) => {
   const theme = useTheme();
-  const copyToClipboard = () => {
-    navigator.clipboard.writeText(`http://localhost:3000/${resource.resource_type.id}/${resource.resource.id.resource}`)
-  }
+
+  const handleClose = (event, reason) => {
+    if (reason && reason === "backdropClick") {
+      closeDetails();
+    }
+  };
 
   return (
-    <ResourceDetailsDrawer theme={theme} variant="permanent" anchor="right">
+    <ResourceDetailsDrawer
+      theme={theme}
+      variant="temporary"
+      open={resourceDetails.resourceOpened || resourceDetails.entitlementOpened}
+      anchor="right"
+      ModalProps={{ onClose: handleClose }}
+    >
       <ModalHeader>
         <StyledDiv>
           <Typography variant="h5">
@@ -50,19 +64,22 @@ export const ResourceDetailsModal = ({ resource, resourceDetails, closeDetails }
           <Button
             variant="text"
             color="secondary"
-            startIcon={<Link color="secondary" />}
+            startIcon={<LinkIcon color="secondary" />}
             disableElevation
-            onClick={copyToClipboard}
           >
-            Copy Link
+            <StyledLink
+              to={`http://localhost:3000/${resource.resource_type.id}/${resource.resource.id.resource}`}
+            >
+              focus
+            </StyledLink>
           </Button>
         )}
       </ModalHeader>
       <Details>
         {resourceDetails.entitlementOpened && (
           <EntitlementDetails entitlement={resource} />
         )}
-        { resourceDetails.resourceOpened && (
+        {resourceDetails.resourceOpened && (
           <ResourceDetails resource={resource.resource} />
         )}
       </Details>

diff --git a/frontend/src/components/resourceDetails/styles.tsx b/frontend/src/components/resourceDetails/styles.tsx
@@ -1,6 +1,7 @@
 import { styled } from "@mui/material/styles";
 import MuiDrawer from "@mui/material/Drawer";
 import { IconButton, Typography } from "@mui/material";
+import { Link } from "react-router-dom";
 
 export const ResourceDetailsDrawer = styled(MuiDrawer)(({ theme }) => ({
   "& .MuiDrawer-paper": {
@@ -55,3 +56,8 @@ export const CloseButton = styled(IconButton)(() => ({
    border: "1px solid #D0D5DD", 
    borderRadius: "8px"
 }));
+
+export const StyledLink = styled(Link)(() => ({
+  textDecoration: 'none',
+  color: 'inherit'
+}));
diff --git a/frontend/src/context/resources.tsx b/frontend/src/context/resources.tsx
@@ -24,6 +24,7 @@ export const ResourcesContextProvider = ({ children }) => {
         }
 
         map[type].push(resource);
+        map[type].sort((a, b) => a.resource.display_name.localeCompare(b.resource.display_name))
       });
 
       setResources({

diff --git a/frontend/src/pages/homepage.tsx b/frontend/src/pages/homepage.tsx
@@ -3,6 +3,7 @@ import Footer from "../components/footer/footer";
 import "../components/explorer/index.css";
 import { Navigation } from "../components/navigation/navigation";
 import Explorer from "../components/explorer/explorer";
+import { ReactFlowProvider } from "reactflow";
 
 type ResourcesListState = {
   opened: boolean;
@@ -30,10 +31,12 @@ const Homepage = () => {
   return (
     <>
       <Navigation openResourceList={openResourceList} />
-      <Explorer
-        resourceList={resourceList}
-        closeResourceList={closeResourceList}
-      />
+      <ReactFlowProvider>
+        <Explorer
+          resourceList={resourceList}
+          closeResourceList={closeResourceList}
+        />
+      </ReactFlowProvider>
       <Footer />
     </>
   );