Skip to content

Commit d668eb8

Browse files
aviavissarAvi Avissar (EXT-Nokia)
aviavissar
and
Avi Avissar (EXT-Nokia)
authored
feat(ws): Workspace Kind details drawer #252 (#387)
* feat(ws):Workspace Kind details drawer #252 Signed-off-by: Avi Avissar (EXT-Nokia) <avi.avissar.ext@nokia.com> * feat(ws): feat(ws):Workspace Kind details drawer #252 Signed-off-by: Avi Avissar (EXT-Nokia) <avi.avissar.ext@nokia.com> * feat(ws): feat(ws): Workspace Kind details drawer #252 Signed-off-by: Avi Avissar (EXT-Nokia) <avi.avissar.ext@nokia.com> * feat(ws): Workspace Kind details drawer #252 Signed-off-by: Avi Avissar (EXT-Nokia) <avi.avissar.ext@nokia.com> --------- Signed-off-by: Avi Avissar (EXT-Nokia) <avi.avissar.ext@nokia.com> Co-authored-by: Avi Avissar (EXT-Nokia) <avi.avissar.ext@nokia.com>
1 parent 92b488b commit d668eb8

File tree

3 files changed

+156
-1
lines changed

3 files changed

+156
-1
lines changed

‎workspaces/frontend/src/app/pages/WorkspaceKinds/WorkspaceKinds.tsx‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ import { useWorkspaceCountPerKind } from '~/app/hooks/useWorkspaceCountPerKind';
4040
import { WorkspaceKindsColumns } from '~/app/types';
4141
import ThemeAwareSearchInput from '~/app/components/ThemeAwareSearchInput';
4242
import CustomEmptyState from '~/shared/components/CustomEmptyState';
43+
import { WorkspaceKindDetails } from './details/WorkspaceKindDetails';
4344

4445
export enum ActionType {
4546
ViewDetails,
@@ -427,7 +428,16 @@ export const WorkspaceKinds: React.FunctionComponent = () => {
427428
[viewDetailsClick],
428429
);
429430

430-
const workspaceDetailsContent = null; // Todo: Detail need to be implemented.
431+
const workspaceDetailsContent = (
432+
<>
433+
{selectedWorkspaceKind && (
434+
<WorkspaceKindDetails
435+
workspaceKind={selectedWorkspaceKind}
436+
onCloseClick={() => setSelectedWorkspaceKind(null)}
437+
/>
438+
)}
439+
</>
440+
);
431441

432442
const DESCRIPTION_CHAR_LIMIT = 50;
433443

‎workspaces/frontend/src/app/pages/WorkspaceKinds/details/WorkspaceDetailsOverview.tsx‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import React from 'react';
2+
import {
3+
DescriptionList,
4+
DescriptionListTerm,
5+
DescriptionListGroup,
6+
DescriptionListDescription,
7+
Divider,
8+
Brand,
9+
} from '@patternfly/react-core';
10+
import { WorkspaceKind } from '~/shared/api/backendApiTypes';
11+
12+
type WorkspaceDetailsOverviewProps = {
13+
workspaceKind: WorkspaceKind;
14+
};
15+
16+
export const WorkspaceDetailsOverview: React.FunctionComponent<WorkspaceDetailsOverviewProps> = ({
17+
workspaceKind,
18+
}) => (
19+
<DescriptionList isHorizontal>
20+
<DescriptionListGroup>
21+
<DescriptionListTerm>Name</DescriptionListTerm>
22+
<DescriptionListDescription>{workspaceKind.name}</DescriptionListDescription>
23+
</DescriptionListGroup>
24+
<Divider />
25+
<DescriptionListGroup>
26+
<DescriptionListTerm>Description</DescriptionListTerm>
27+
<DescriptionListDescription>{workspaceKind.description}</DescriptionListDescription>
28+
</DescriptionListGroup>
29+
<Divider />
30+
31+
<DescriptionListGroup>
32+
<DescriptionListTerm>Hidden</DescriptionListTerm>
33+
<DescriptionListDescription>{workspaceKind.hidden ? 'Yes' : 'No'}</DescriptionListDescription>
34+
</DescriptionListGroup>
35+
<Divider />
36+
<DescriptionListGroup>
37+
<DescriptionListTerm>Status</DescriptionListTerm>
38+
<DescriptionListDescription>
39+
{workspaceKind.deprecated ? 'Deprecated' : 'Active'}
40+
</DescriptionListDescription>
41+
</DescriptionListGroup>
42+
<Divider />
43+
<DescriptionListGroup>
44+
<DescriptionListTerm>Deprecation Message</DescriptionListTerm>
45+
<DescriptionListDescription>{workspaceKind.deprecationMessage}</DescriptionListDescription>
46+
</DescriptionListGroup>
47+
<Divider />
48+
<DescriptionListGroup>
49+
<DescriptionListTerm style={{ alignSelf: 'center' }}>Icon</DescriptionListTerm>
50+
<DescriptionListDescription>
51+
<Brand src={workspaceKind.icon.url} alt={workspaceKind.name} style={{ width: '40px' }} />
52+
</DescriptionListDescription>
53+
<DescriptionListTerm style={{ alignSelf: 'center' }}>Icon URL</DescriptionListTerm>
54+
<DescriptionListDescription>
55+
<a href={workspaceKind.icon.url} target="_blank" rel="noreferrer">
56+
{workspaceKind.icon.url}
57+
</a>
58+
</DescriptionListDescription>
59+
</DescriptionListGroup>
60+
<Divider />
61+
<DescriptionListGroup>
62+
<DescriptionListTerm style={{ alignSelf: 'center' }}>Logo</DescriptionListTerm>
63+
<DescriptionListDescription>
64+
<Brand src={workspaceKind.logo.url} alt={workspaceKind.name} style={{ width: '40px' }} />
65+
</DescriptionListDescription>
66+
<DescriptionListTerm style={{ alignSelf: 'center' }}>Logo URL</DescriptionListTerm>
67+
<DescriptionListDescription>
68+
<a href={workspaceKind.icon.url} target="_blank" rel="noreferrer">
69+
{workspaceKind.logo.url}
70+
</a>
71+
</DescriptionListDescription>
72+
</DescriptionListGroup>
73+
</DescriptionList>
74+
);

‎workspaces/frontend/src/app/pages/WorkspaceKinds/details/WorkspaceKindDetails.tsx‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import React from 'react';
2+
import {
3+
DrawerActions,
4+
DrawerCloseButton,
5+
DrawerHead,
6+
DrawerPanelBody,
7+
DrawerPanelContent,
8+
Tabs,
9+
Tab,
10+
TabTitleText,
11+
Title,
12+
TabContentBody,
13+
TabContent,
14+
} from '@patternfly/react-core';
15+
import { WorkspaceKind } from '~/shared/api/backendApiTypes';
16+
import { WorkspaceDetailsOverview } from './WorkspaceDetailsOverview';
17+
18+
type WorkspaceKindDetailsProps = {
19+
workspaceKind: WorkspaceKind;
20+
onCloseClick: React.MouseEventHandler;
21+
};
22+
23+
export const WorkspaceKindDetails: React.FunctionComponent<WorkspaceKindDetailsProps> = ({
24+
workspaceKind,
25+
onCloseClick,
26+
}) => {
27+
const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
28+
29+
const handleTabClick = (
30+
event: React.MouseEvent | React.KeyboardEvent | MouseEvent,
31+
tabIndex: string | number,
32+
) => {
33+
setActiveTabKey(tabIndex);
34+
};
35+
36+
return (
37+
<DrawerPanelContent data-testid="workspaceDetails">
38+
<DrawerHead>
39+
<Title headingLevel="h6">{workspaceKind.name}</Title>
40+
<DrawerActions>
41+
<DrawerCloseButton onClick={onCloseClick} />
42+
</DrawerActions>
43+
</DrawerHead>
44+
45+
<DrawerPanelBody>
46+
<Tabs activeKey={activeTabKey} onSelect={handleTabClick}>
47+
<Tab
48+
eventKey={0}
49+
title={<TabTitleText>Overview</TabTitleText>}
50+
tabContentId="overviewTabContent"
51+
aria-label="Overview"
52+
/>
53+
</Tabs>
54+
</DrawerPanelBody>
55+
56+
<DrawerPanelBody>
57+
<TabContent
58+
key={0}
59+
eventKey={0}
60+
id="overviewTabContent"
61+
activeKey={activeTabKey}
62+
hidden={activeTabKey !== 0}
63+
>
64+
<TabContentBody hasPadding>
65+
<WorkspaceDetailsOverview workspaceKind={workspaceKind} />
66+
</TabContentBody>
67+
</TabContent>
68+
</DrawerPanelBody>
69+
</DrawerPanelContent>
70+
);
71+
};

0 commit comments

Comments
 (0)