Merge pull request #1522 from stakwork/feature/create-code-graph-page-1751453105

Create Code Graph workspace page

Author: tomsmith8

src/components/common/SidebarComponent.tsx

@@ -621,6 +621,10 @@ export default function SidebarComponent({
     history.push(`/workspace/${uuid}/planner`);
   };
 
+  const handleCodeGraphClick = () => {
+    history.push(`/workspace/${uuid}/codegraph`);
+  };
+
   const hasNextPage = chatOffset + CHATS_PER_PAGE < totalChats;
   const hasPreviousPage = chatOffset > 0;
 
@@ -813,6 +817,23 @@ export default function SidebarComponent({
         )}
       </NavItem>
 
+      <NavItem
+        active={window.location.pathname.includes('/codegraph')}
+        onClick={handleCodeGraphClick}
+        collapsed={collapsed}
+        onMouseEnter={(e) => handleMouseEnter(e, 'codegraph')}
+        onMouseLeave={() => setHoveredItem(null)}
+        aria-label="Code Graph"
+      >
+        <MaterialIcon icon="code" />
+        <span>Code Graph</span>
+        {(collapsed || hoveredItem === 'codegraph') && (
+          <Tooltip visible={hoveredItem === 'codegraph'} top={tooltipTop} collapsed={collapsed}>
+            Code Graph
+          </Tooltip>
+        )}
+      </NavItem>
+
       <NavItem
         active={activeItem === 'settings'}
         onClick={() => handleItemClick('settings')}

src/pages/index.tsx

@@ -13,6 +13,7 @@ import PhasePlannerView from '../people/widgetViews/PhasePlannerView';
 import Activities from '../people/widgetViews/workspace/Activities/Activities';
 import WorkspaceTicketView from '../people/widgetViews/workspace/WorkspaceTicketView';
 import WorkspaceTicketCreateView from '../people/widgetViews/workspace/WorkspaceTicketCreateView.tsx';
+import CodeGraphView from '../people/widgetViews/workspace/CodeGraphView.tsx';
 import { HiveChatView } from '../people/hiveChat/index';
 import WorkSpacePlanner from '../people/WorkSpacePlanner/index';
 import HiveFeaturesView from '../people/widgetViews/workspace/HiveFeaturesView/HiveFeaturesView.tsx';
@@ -103,6 +104,9 @@ export const Pages = observer(({ mode }: { mode: AppMode }) => {
               <Route path="/workspace/:workspaceId/ticket">
                 <WorkspaceTicketCreateView />
               </Route>
+              <Route path="/workspace/:workspaceId/codegraph">
+                <CodeGraphView />
+              </Route>
               <Route path="/workspace/:uuid/planner">
                 <WorkSpacePlanner />
               </Route>

src/people/hiveChat/ActionArtifactRenderer.tsx

@@ -116,7 +116,7 @@ export const ActionArtifactRenderer: React.FC<ActionArtifactRendererProps> = obs
       return null;
     }
 
-    console.log("actionArtifact", actionArtifact)
+    console.log('actionArtifact', actionArtifact);
     const content = actionArtifact.content as ActionContent;
 
     const hasButtonOptions =

src/people/widgetViews/workspace/CodeGraphView.tsx

@@ -0,0 +1,130 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { observer } from 'mobx-react-lite';
+import { useParams } from 'react-router-dom';
+import styled from 'styled-components';
+import { useStores } from 'store';
+import SidebarComponent from 'components/common/SidebarComponent';
+import ActivitiesHeader from './Activities/header';
+import { useBrowserTabTitle } from 'hooks';
+import { EuiLoadingSpinner } from '@elastic/eui';
+import { Body } from 'pages/tickets/style';
+import { FullNoBudgetWrap, FullNoBudgetText } from './style';
+import MaterialIcon from '@material/react-material-icon';
+import { userHasRole } from 'helpers';
+
+const MainContainer = styled.div<{ collapsed: boolean }>`
+  flex-grow: 1;
+  transition:
+    margin-left 0.3s ease-in-out,
+    width 0.3s ease-in-out;
+  margin-left: ${({ collapsed }) => (collapsed ? '50px' : '250px')};
+  overflow: hidden;
+`;
+
+const ContentContainer = styled.div`
+  padding: 2rem;
+  background-color: #f8f9fa;
+  height: calc(100vh - 120px);
+  overflow-y: auto;
+`;
+
+const Title = styled.h1`
+  font-size: 1.5rem;
+  font-weight: 500;
+  margin-bottom: 1rem;
+`;
+
+interface WorkspaceParams {
+  workspaceId: string;
+}
+
+const CodeGraphView: React.FC = observer(() => {
+  const { workspaceId } = useParams<WorkspaceParams>();
+  const { ui, main } = useStores();
+  const [collapsed, setCollapsed] = useState(false);
+  const [workspaceData, setWorkspaceData] = useState<any>(null);
+  const [userRoles, setUserRoles] = useState<any[]>([]);
+  const [permissionsChecked, setPermissionsChecked] = useState<boolean>(false);
+  const [loading, setLoading] = useState(true);
+  useBrowserTabTitle('Code Graph');
+
+  useEffect(() => {
+    const handleCollapseChange = (e: Event) => {
+      const customEvent = e as CustomEvent<{ collapsed: boolean }>;
+      setCollapsed(customEvent.detail.collapsed);
+    };
+    window.addEventListener('sidebarCollapse', handleCollapseChange as EventListener);
+    return () => {
+      window.removeEventListener('sidebarCollapse', handleCollapseChange as EventListener);
+    };
+  }, []);
+
+  const checkPermissions = useCallback(async () => {
+    if (!workspaceId) return;
+    setLoading(true);
+    try {
+      const data = await main.getUserWorkspaceByUuid(workspaceId);
+      setWorkspaceData(data);
+      if (ui.meInfo?.owner_pubkey) {
+        const roles = await main.getUserRoles(workspaceId, ui.meInfo.owner_pubkey);
+        setUserRoles(roles);
+      }
+    } catch (error) {
+      console.error('Error fetching workspace data:', error);
+    } finally {
+      setPermissionsChecked(true);
+      setLoading(false);
+    }
+  }, [workspaceId, main, ui.meInfo]);
+
+  useEffect(() => {
+    checkPermissions();
+  }, [checkPermissions]);
+
+  const editWorkspaceDisabled = React.useMemo(() => {
+    if (!ui.meInfo) return true;
+    if (!workspaceData?.owner_pubkey) return false;
+    const isWorkspaceAdmin = workspaceData.owner_pubkey === ui.meInfo.owner_pubkey;
+    return (
+      !isWorkspaceAdmin &&
+      !userHasRole(main.bountyRoles, userRoles, 'EDIT ORGANIZATION') &&
+      !userHasRole(main.bountyRoles, userRoles, 'ADD USER') &&
+      !userHasRole(main.bountyRoles, userRoles, 'VIEW REPORT')
+    );
+  }, [workspaceData, ui.meInfo, userRoles, main.bountyRoles]);
+
+  if (loading || !permissionsChecked) {
+    return (
+      <Body style={{ justifyContent: 'center', alignItems: 'center' }}>
+        <EuiLoadingSpinner size="xl" />
+      </Body>
+    );
+  }
+
+  if (editWorkspaceDisabled) {
+    return (
+      <FullNoBudgetWrap>
+        <MaterialIcon icon={'lock'} style={{ fontSize: 30, cursor: 'pointer', color: '#ccc' }} />
+        <FullNoBudgetText>
+          You have restricted permissions and you are unable to view this page. Reach out to the
+          workspace admin to get them updated.
+        </FullNoBudgetText>
+      </FullNoBudgetWrap>
+    );
+  }
+
+  return (
+    <>
+      <SidebarComponent uuid={workspaceId} />
+      <MainContainer collapsed={collapsed}>
+        <ActivitiesHeader uuid={workspaceId} />
+        <ContentContainer>
+          <Title>Code Graph</Title>
+          <p>This is the Code Graph page. Content will be added here.</p>
+        </ContentContainer>
+      </MainContainer>
+    </>
+  );
+});
+
+export default CodeGraphView;