Skip to content

Commit

Permalink
Merge pull request stakwork#753 from MahtabBukhari/bugs-code-graph-is…
Browse files Browse the repository at this point in the history 
…-not-beign-rendered-correctly

[BUGS] Code graph render and Show add code graph button and On edit position should be persist
  • Loading branch information
@humansinstitute
humansinstitute authored Dec 12, 2024
2 parents 29919e6 + 2e335bc commit a119975
Show file tree
Hide file tree
Showing 2 changed files with 81 additions and 58 deletions.
137 changes: 80 additions & 57 deletions src/people/widgetViews/WorkspaceMission.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -255,9 +255,13 @@ const WorkspaceMission = () => {
const [users, setUsers] = useState<Person[]>([]);
const [displayUserRepoOptions, setDisplayUserRepoOptions] = useState<Record<number, boolean>>({});
const [codeGraphModal, setCodeGraphModal] = useState(false);
const [codeGraph, setCodeGraph] = useState<CodeGraph | null>(null);
const [codeGraph, setCodeGraph] = useState<CodeGraph[] | null>(null);
const [codeGraphModalType, setCodeGraphModalType] = useState<'add' | 'edit'>('add');
const [currentCodeGraphUuid, setCurrentCodeGraphUuid] = useState('');
const [selectedCodeGraph, setSelectedCodeGraph] = useState<{
name: string;
url: string;
}>();

const fetchCodeGraph = useCallback(async () => {
try {
Expand All @@ -274,6 +278,12 @@ const WorkspaceMission = () => {

const openCodeGraphModal = (type: 'add' | 'edit', graph?: CodeGraph) => {
if (type === 'edit' && graph) {
if (graph) {
setSelectedCodeGraph({
name: graph.name,
url: graph.url
});
}
setCurrentCodeGraphUuid(graph.uuid);
} else {
setCurrentCodeGraphUuid('');
Expand All @@ -283,6 +293,11 @@ const WorkspaceMission = () => {
};

const closeCodeGraphModal = () => {
setSelectedCodeGraph({
name: '',
url: ''
});
setCurrentCodeGraphUuid('');
setCodeGraphModal(false);
};

Expand Down Expand Up @@ -811,62 +826,70 @@ const WorkspaceMission = () => {
<DataWrap2>
<RowFlex>
<Label>Code Graph</Label>
{!codeGraph && (
<Button
onClick={() => openCodeGraphModal('add')}
style={{
borderRadius: '5px',
margin: 0,
marginLeft: 'auto'
}}
dataTestId="new-codegraph-btn"
text="Add Code Graph"
/>
)}

<Button
onClick={() => openCodeGraphModal('add')}
style={{
borderRadius: '5px',
margin: 0,
marginLeft: 'auto'
}}
dataTestId="new-codegraph-btn"
text="Add Code Graph"
/>
</RowFlex>
{codeGraph && (
{codeGraph && codeGraph?.length > 0 && (
<StyledList>
<StyledListElement>
<OptionsWrap style={{ position: 'unset', display: 'contents' }}>
<MaterialIcon
icon={'more_horiz'}
onClick={() => handleUserRepoOptionClick(codeGraph.id as number)}
className="MaterialIcon"
data-testid="codegraph-option-btn"
style={{ transform: 'rotate(90deg)' }}
/>
{displayUserRepoOptions[codeGraph.id as number] && (
<EditPopover>
<EditPopoverTail bottom="-30px" left="-27px" />
<EditPopoverContent
onClick={() => {
openCodeGraphModal('edit', codeGraph);
setDisplayUserRepoOptions((prev: Record<number, boolean>) => ({
...prev,
[codeGraph.id as number]: !prev[codeGraph.id as number]
}));
}}
bottom="-60px"
transform="translateX(-90%)"
>
<MaterialIcon
icon="edit"
style={{ fontSize: '20px', marginTop: '2px' }}
/>
<EditPopoverText data-testid="codegraph-edit-btn">
Edit
</EditPopoverText>
</EditPopoverContent>
</EditPopover>
)}
</OptionsWrap>
<RepoName>{codeGraph.name} : </RepoName>
<EuiToolTip position="top" content={codeGraph.url}>
<a href={codeGraph.url} target="_blank" rel="noreferrer">
{codeGraph.url}
</a>
</EuiToolTip>
</StyledListElement>
{codeGraph
?.slice()
.sort(
(a: CodeGraph, b: CodeGraph) =>
new Date(a.created as string).getTime() -
new Date(b.created as string).getTime()
)
.map((graph: CodeGraph) => (
<StyledListElement key={graph.id}>
<OptionsWrap style={{ position: 'unset', display: 'contents' }}>
<MaterialIcon
icon={'more_horiz'}
onClick={() => handleUserRepoOptionClick(graph.id as number)}
className="MaterialIcon"
data-testid={`codegraph-option-btn-${graph.id}`}
style={{ transform: 'rotate(90deg)' }}
/>
{displayUserRepoOptions[graph.id as number] && (
<EditPopover>
<EditPopoverTail bottom="-30px" left="-27px" />
<EditPopoverContent
onClick={() => {
openCodeGraphModal('edit', graph);
setDisplayUserRepoOptions((prev: Record<number, boolean>) => ({
...prev,
[graph.id as number]: !prev[graph.id as number]
}));
}}
bottom="-60px"
transform="translateX(-90%)"
>
<MaterialIcon
icon="edit"
style={{ fontSize: '20px', marginTop: '2px' }}
/>
<EditPopoverText data-testid={`codegraph-edit-btn-${graph.id}`}>
Edit
</EditPopoverText>
</EditPopoverContent>
</EditPopover>
)}
</OptionsWrap>
<RepoName>{graph.name} :</RepoName>
<EuiToolTip position="top" content={graph.url}>
<a href={graph.url} target="_blank" rel="noreferrer">
{graph.url}
</a>
</EuiToolTip>
</StyledListElement>
))}
</StyledList>
)}
</DataWrap2>
Expand Down Expand Up @@ -1186,8 +1209,8 @@ const WorkspaceMission = () => {
modalType={codeGraphModalType}
currentUuid={currentCodeGraphUuid}
handleDelete={handleDeleteCodeGraph}
name={codeGraph?.name}
url={codeGraph?.url}
name={selectedCodeGraph?.name}
url={selectedCodeGraph?.url}
/>
</Modal>
{isOpenUserManage && (
Expand Down
2 changes: 1 addition & 1 deletion src/store/main.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3794,7 +3794,7 @@ export class MainStore {
}
}

async getWorkspaceCodeGraph(workspace_uuid: string): Promise<CodeGraph | null> {
async getWorkspaceCodeGraph(workspace_uuid: string): Promise<CodeGraph[] | null> {
try {
if (!uiStore.meInfo) return null;
const info = uiStore.meInfo;
Expand Down

0 comments on commit a119975

Please sign in to comment.