-
Notifications
You must be signed in to change notification settings - Fork 139
/
HomePage.tsx
122 lines (114 loc) · 3.12 KB
/
HomePage.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
import { Content, Header, InfoCard, Page } from '@backstage/core-components';
import {
ComponentAccordion,
HomePageStarredEntities,
HomePageToolkit,
} from '@backstage/plugin-home';
import { HomePageSearchBar } from '@backstage/plugin-search';
import { SearchContextProvider } from '@backstage/plugin-search-react';
import { css } from '@emotion/css';
import Box from '@mui/material/Box';
import CircularProgress from '@mui/material/CircularProgress';
import Grid from '@mui/material/Grid';
import React from 'react';
import { makeStyles } from 'tss-react/mui';
import { ErrorReport } from '../../common';
import { useQuickAccess } from '../../hooks/useQuickAccess';
const useStyles = makeStyles()(theme => ({
img: {
height: '40px',
width: 'auto',
},
searchBar: {
display: 'flex',
maxWidth: '60vw',
boxShadow: theme.shadows.at(1),
borderRadius: '50px',
margin: 'auto',
},
}));
const QuickAccess = () => {
const { classes } = useStyles();
const { data, error, isLoading } = useQuickAccess();
if (isLoading) {
return <CircularProgress />;
}
if (!data) {
return (
<ErrorReport title="Could not fetch data." errorText="Unknown error" />
);
}
if (!isLoading && !data && error) {
return (
<ErrorReport title="Could not fetch data." errorText={error.toString()} />
);
}
return (
<InfoCard title="Quick Access" noPadding>
{data.map(item => (
<HomePageToolkit
key={item.title}
title={item.title}
tools={item.links.map(link => ({
...link,
icon: (
<img
className={classes.img}
src={link.iconUrl}
alt={link.label}
/>
),
}))}
Renderer={
item.isExpanded
? props => <ComponentAccordion expanded {...props} />
: props => <ComponentAccordion {...props} />
}
/>
))}
</InfoCard>
);
};
export const HomePage = () => {
const { classes } = useStyles();
return (
<SearchContextProvider>
<Page themeId="home">
<Header title="Welcome back!" />
<Content>
<Box
sx={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
gap: 2,
}}
>
{/* useStyles has a lower precedence over mui styles hence why we need to use css */}
<HomePageSearchBar
classes={{
root: classes.searchBar,
}}
InputProps={{
classes: {
notchedOutline: css`
border-style: none;
`,
},
}}
placeholder="Search"
/>
<Grid container xs={12}>
<Grid item xs={12} md={7}>
<QuickAccess />
</Grid>
<Grid item xs={12} md={5}>
<HomePageStarredEntities />
</Grid>
</Grid>
</Box>
</Content>
</Page>
</SearchContextProvider>
);
};