Skip to content

Commit 5369617

Browse files
johnnyhuyjohnnyhuy
authored
Merge pull request #11 from echohello-dev/feature/sidebar
feat: Collapsible sidebar
2 parents 29d25fe + 1b7b6cf commit 5369617

File tree

6 files changed

+149
-65
lines changed

6 files changed

+149
-65
lines changed

‎.vscode/launch.json‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
{
2+
// Use IntelliSense to learn about possible attributes.
3+
// Hover to view descriptions of existing attributes.
4+
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
5+
"version": "0.2.0",
6+
"configurations": [
7+
{
8+
"name": "Start",
9+
"type": "node",
10+
"request": "launch",
11+
"cwd": "${workspaceFolder}",
12+
"program": "${workspaceFolder}/node_modules/.bin/concurrently",
13+
"args": [
14+
"yarn workspace app start",
15+
"yarn workspace backend start"
16+
],
17+
"skipFiles": [
18+
"<node_internals>/**"
19+
],
20+
"console": "integratedTerminal"
21+
},
22+
{
23+
"name": "Start Backend",
24+
"type": "node",
25+
"request": "launch",
26+
"args": [
27+
"package",
28+
"start"
29+
],
30+
"cwd": "${workspaceFolder}/packages/backend",
31+
"program": "${workspaceFolder}/node_modules/.bin/backstage-cli",
32+
"skipFiles": [
33+
"<node_internals>/**"
34+
],
35+
"console": "integratedTerminal"
36+
},
37+
{
38+
"name": "Start App",
39+
"type": "node",
40+
"request": "launch",
41+
"args": [
42+
"package",
43+
"start"
44+
],
45+
"cwd": "${workspaceFolder}/packages/app",
46+
"program": "${workspaceFolder}/node_modules/.bin/backstage-cli",
47+
"skipFiles": [
48+
"<node_internals>/**"
49+
],
50+
"console": "integratedTerminal"
51+
},
52+
{
53+
"type": "chrome",
54+
"request": "launch",
55+
"name": "Launch Chrome",
56+
"url": "http://localhost:3000",
57+
"webRoot": "${workspaceFolder}/src",
58+
"sourceMapPathOverrides": {
59+
"webpack:///src/*": "${webRoot}/*"
60+
}
61+
}
62+
]
63+
}

‎.vscode/settings.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"jest.jestCommandLine": "node_modules/.bin/jest --config node_modules/@backstage/cli/config/jest.js",
3+
}

‎CONTRIBUTING.md‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,6 @@ This is similar to other open source projects. Here are the steps to get started
1111
```
1212
git clone
1313
```
14-
- Install dependencies
15-
```
16-
make install
17-
```
1814
- Start the app
1915
```
2016
make dev

‎docs/development.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,3 +38,8 @@ export default function CustomizedButtons() {
3838
## Theme Providers
3939

4040
https://mui.com/material-ui/customization/theming/#accessing-the-theme-in-a-component
41+
42+
## Guides
43+
44+
- [Debugging Jest Tests](https://backstage.io/docs/tooling/cli/build-system/#debugging-jest-tests)
45+
- [Testing with Jest](https://backstage.io/docs/plugins/testing)

‎packages/app/src/components/Root/Root.tsx‎

Lines changed: 73 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { PropsWithChildren } from 'react';
1+
import React, { PropsWithChildren, useState } from 'react';
22
import { styled } from '@mui/material/styles';
33
import Home from '@mui/icons-material/Home';
44
import CreateComponent from '@mui/icons-material/AddCircleOutline';
@@ -19,6 +19,7 @@ import {
1919
SidebarSpace,
2020
useSidebarOpenState,
2121
Link,
22+
SidebarExpandButton,
2223
} from '@backstage/core-components';
2324
import MenuIcon from '@mui/icons-material/Menu';
2425
import SearchIcon from '@mui/icons-material/Search';
@@ -31,6 +32,10 @@ import MonitorHeartRoundedIcon from '@mui/icons-material/MonitorHeartRounded';
3132
import ScoreRoundedIcon from '@mui/icons-material/ScoreRounded';
3233
import { IconComponent } from '@backstage/core-plugin-api';
3334

35+
export enum LocalStorageKeys {
36+
SIDEBAR_PIN_STATE = 'sidebarPinState',
37+
}
38+
3439
const SidebarLogoRoot = styled('div')(() => ({
3540
width: sidebarConfig.drawerWidthClosed,
3641
height: 3 * sidebarConfig.logoHeight,
@@ -57,64 +62,76 @@ const SidebarLogo = () => {
5762
);
5863
};
5964

60-
export const Root = ({ children }: PropsWithChildren<{}>) => (
61-
<SidebarPage>
62-
<Sidebar>
63-
<SidebarLogo />
64-
<SidebarGroup label="Search" icon={<SearchIcon />} to="/search">
65-
<SidebarSearchModal />
66-
</SidebarGroup>
67-
<SidebarDivider />
68-
<SidebarGroup label="Menu" icon={<MenuIcon />}>
69-
{/* Global nav, not org-specific */}
70-
<SidebarItem icon={Home as IconComponent} to="/" text="Home" />
71-
<SidebarItem
72-
icon={MenuBookRoundedIcon as IconComponent}
73-
to="catalog"
74-
text="Catalog"
75-
/>
65+
export const Root = ({ children }: PropsWithChildren<{}>) => {
66+
if (
67+
window.localStorage.getItem(LocalStorageKeys.SIDEBAR_PIN_STATE) === null
68+
) {
69+
window.localStorage.setItem(
70+
LocalStorageKeys.SIDEBAR_PIN_STATE,
71+
JSON.stringify(false),
72+
);
73+
}
74+
75+
return (
76+
<SidebarPage>
77+
<Sidebar disableExpandOnHover={false}>
78+
<SidebarLogo />
79+
<SidebarGroup label="Search" icon={<SearchIcon />} to="/search">
80+
<SidebarSearchModal />
81+
</SidebarGroup>
82+
<SidebarDivider />
83+
<SidebarGroup label="Menu" icon={<MenuIcon />}>
84+
{/* Global nav, not org-specific */}
85+
<SidebarItem icon={Home as IconComponent} to="/" text="Home" />
86+
<SidebarItem
87+
icon={MenuBookRoundedIcon as IconComponent}
88+
to="catalog"
89+
text="Catalog"
90+
/>
91+
<SidebarItem
92+
icon={ExtensionRoundedIcon as IconComponent}
93+
to="api-docs"
94+
text="APIs"
95+
/>
96+
<SidebarItem
97+
icon={LocalLibraryRoundedIcon as IconComponent}
98+
to="docs"
99+
text="Docs"
100+
/>
101+
<SidebarItem
102+
icon={TouchAppRoundedIcon as IconComponent}
103+
to="self-service"
104+
text="Self-Service"
105+
/>
106+
</SidebarGroup>
107+
<SidebarDivider />
76108
<SidebarItem
77-
icon={ExtensionRoundedIcon as IconComponent}
78-
to="api-docs"
79-
text="APIs"
109+
icon={ScoreRoundedIcon as IconComponent}
110+
to="scorecard"
111+
text="Scorecard"
80112
/>
81113
<SidebarItem
82-
icon={LocalLibraryRoundedIcon as IconComponent}
83-
to="docs"
84-
text="Docs"
114+
icon={MonitorHeartRoundedIcon as IconComponent}
115+
to="pulse-check"
116+
text="Pulse Check"
85117
/>
86118
<SidebarItem
87-
icon={TouchAppRoundedIcon as IconComponent}
88-
to="self-service"
89-
text="Self-Service"
119+
icon={AutoAwesomeRoundedIcon as IconComponent}
120+
to="explore"
121+
text="Explore"
90122
/>
91-
</SidebarGroup>
92-
<SidebarDivider />
93-
<SidebarItem
94-
icon={ScoreRoundedIcon as IconComponent}
95-
to="scorecard"
96-
text="Scorecard"
97-
/>
98-
<SidebarItem
99-
icon={MonitorHeartRoundedIcon as IconComponent}
100-
to="pulse-check"
101-
text="Pulse Check"
102-
/>
103-
<SidebarItem
104-
icon={AutoAwesomeRoundedIcon as IconComponent}
105-
to="explore"
106-
text="Explore"
107-
/>
108-
<SidebarSpace />
109-
<SidebarDivider />
110-
<SidebarGroup
111-
label="Settings"
112-
icon={<UserSettingsSignInAvatar />}
113-
to="/settings"
114-
>
115-
<SidebarSettings />
116-
</SidebarGroup>
117-
</Sidebar>
118-
{children}
119-
</SidebarPage>
120-
);
123+
<SidebarSpace />
124+
<SidebarDivider />
125+
<SidebarGroup
126+
label="Settings"
127+
icon={<UserSettingsSignInAvatar />}
128+
to="/settings"
129+
>
130+
<SidebarSettings />
131+
</SidebarGroup>
132+
<SidebarExpandButton />
133+
</Sidebar>
134+
{children}
135+
</SidebarPage>
136+
);
137+
};

‎packages/app/src/components/catalog/EntityPage.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -123,7 +123,7 @@ const entityWarningContent = (
123123
);
124124

125125
const overviewContent = (
126-
<Grid container spacing={0} alignItems="stretch">
126+
<Grid container alignItems="stretch">
127127
{entityWarningContent}
128128
<Grid item md={6} marginBottom={-1}>
129129
<EntityAboutCard variant="gridItem" />
@@ -190,7 +190,7 @@ const websiteEntityPage = (
190190
</EntityLayout.Route>
191191

192192
<EntityLayout.Route path="/dependencies" title="Dependencies">
193-
<Grid container spacing={2} alignItems="stretch">
193+
<Grid container alignItems="stretch">
194194
<Grid item md={6}>
195195
<EntityDependsOnComponentsCard variant="gridItem" />
196196
</Grid>
@@ -242,15 +242,15 @@ const componentPage = (
242242
const apiPage = (
243243
<EntityLayout>
244244
<EntityLayout.Route path="/" title="Overview">
245-
<Grid container spacing={2}>
245+
<Grid container>
246246
{entityWarningContent}
247247
<Grid item md={6} marginBottom={-1}>
248248
<EntityAboutCard variant="gridItem" />
249249
</Grid>
250250
<Grid item md={6} marginBottom={-1}>
251251
<EntityCatalogGraphCard variant="gridItem" height={400} />
252252
</Grid>
253-
<Grid container spacing={2} item md={8}>
253+
<Grid md={8}>
254254
<Grid item md={12}>
255255
<EntityProvidingComponentsCard variant="gridItem" />
256256
</Grid>
@@ -265,7 +265,7 @@ const apiPage = (
265265
</EntityLayout.Route>
266266

267267
<EntityLayout.Route path="/definition" title="Definition">
268-
<Grid container spacing={2}>
268+
<Grid container>
269269
<Grid item xs>
270270
<EntityApiDefinitionCard />
271271
</Grid>

0 commit comments

Comments
 (0)