@red-hat-developer-hub/backstage-plugin-dynamic-home-page 1.3.2 → 1.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +13 -0
- package/dist/components/EntitySection/EntityCard.esm.js +89 -0
- package/dist/components/EntitySection/EntityCard.esm.js.map +1 -0
- package/dist/components/EntitySection/EntitySection.esm.js +202 -0
- package/dist/components/EntitySection/EntitySection.esm.js.map +1 -0
- package/dist/components/EntitySection/TagList.esm.js +68 -0
- package/dist/components/EntitySection/TagList.esm.js.map +1 -0
- package/dist/components/EntitySection/ViewMoreLink.esm.js +10 -0
- package/dist/components/EntitySection/ViewMoreLink.esm.js.map +1 -0
- package/dist/components/EntitySection/index.esm.js +2 -0
- package/dist/components/EntitySection/index.esm.js.map +1 -0
- package/dist/components/HomePage.esm.js +1 -1
- package/dist/components/HomePage.esm.js.map +1 -1
- package/dist/components/OnboardingSection/OnboardingCard.esm.js +66 -0
- package/dist/components/OnboardingSection/OnboardingCard.esm.js.map +1 -0
- package/dist/components/OnboardingSection/OnboardingSection.esm.js +131 -0
- package/dist/components/OnboardingSection/OnboardingSection.esm.js.map +1 -0
- package/dist/components/OnboardingSection/index.esm.js +2 -0
- package/dist/components/OnboardingSection/index.esm.js.map +1 -0
- package/dist/components/TemplateSection/TemplateCard.esm.js +94 -0
- package/dist/components/TemplateSection/TemplateCard.esm.js.map +1 -0
- package/dist/components/TemplateSection/TemplateSection.esm.js +132 -0
- package/dist/components/TemplateSection/TemplateSection.esm.js.map +1 -0
- package/dist/components/TemplateSection/ViewMoreLink.esm.js +10 -0
- package/dist/components/TemplateSection/ViewMoreLink.esm.js.map +1 -0
- package/dist/components/TemplateSection/index.esm.js +2 -0
- package/dist/components/TemplateSection/index.esm.js.map +1 -0
- package/dist/hooks/useEntities.esm.js +23 -0
- package/dist/hooks/useEntities.esm.js.map +1 -0
- package/dist/hooks/useGreeting.esm.js +32 -0
- package/dist/hooks/useGreeting.esm.js.map +1 -0
- package/dist/images/homepage-entities-1.svg +186 -0
- package/dist/images/homepage-illustration-dark.svg +1 -0
- package/dist/images/homepage-illustration-light.svg +1 -0
- package/dist/index.d.ts +13 -1
- package/dist/index.esm.js +1 -1
- package/dist/plugin.esm.js +26 -2
- package/dist/plugin.esm.js.map +1 -1
- package/dist/utils/constants.esm.js +47 -0
- package/dist/utils/constants.esm.js.map +1 -0
- package/dist/utils/utils.esm.js +23 -0
- package/dist/utils/utils.esm.js.map +1 -0
- package/package.json +6 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,18 @@
|
|
|
1
1
|
# @red-hat-developer-hub/backstage-plugin-dynamic-home-page
|
|
2
2
|
|
|
3
|
+
## 1.4.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 8915566: added new homepage cards - explore, catalog and templates
|
|
8
|
+
|
|
9
|
+
## 1.3.3
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- 93e16a8: Correcting the home page title for `Recent Visits` and `Top Visits` on initial load and page reload.
|
|
14
|
+
- f691b55: Updated dependency `tss-react` to `4.9.17`.
|
|
15
|
+
|
|
3
16
|
## 1.3.2
|
|
4
17
|
|
|
5
18
|
### Patch Changes
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { EntityRefLink } from '@backstage/plugin-catalog-react';
|
|
3
|
+
import { MarkdownContent } from '@backstage/core-components';
|
|
4
|
+
import CardContent from '@mui/material/CardContent';
|
|
5
|
+
import Typography from '@mui/material/Typography';
|
|
6
|
+
import Box from '@mui/material/Box';
|
|
7
|
+
import Card from '@mui/material/Card';
|
|
8
|
+
import TagList from './TagList.esm.js';
|
|
9
|
+
|
|
10
|
+
const EntityCard = ({
|
|
11
|
+
title,
|
|
12
|
+
description,
|
|
13
|
+
tags,
|
|
14
|
+
kind,
|
|
15
|
+
entity
|
|
16
|
+
}) => {
|
|
17
|
+
return /* @__PURE__ */ React.createElement(
|
|
18
|
+
Card,
|
|
19
|
+
{
|
|
20
|
+
elevation: 0,
|
|
21
|
+
sx: {
|
|
22
|
+
border: (theme) => `1px solid ${theme.palette.grey[400]}`,
|
|
23
|
+
overflow: "auto",
|
|
24
|
+
maxHeight: "100%"
|
|
25
|
+
}
|
|
26
|
+
},
|
|
27
|
+
/* @__PURE__ */ React.createElement(
|
|
28
|
+
CardContent,
|
|
29
|
+
{
|
|
30
|
+
sx: {
|
|
31
|
+
pb: 2,
|
|
32
|
+
"&:last-child": {
|
|
33
|
+
pb: 2
|
|
34
|
+
},
|
|
35
|
+
backgroundColor: "transparent"
|
|
36
|
+
}
|
|
37
|
+
},
|
|
38
|
+
/* @__PURE__ */ React.createElement(Box, { sx: { overflow: "hidden" } }, /* @__PURE__ */ React.createElement(
|
|
39
|
+
EntityRefLink,
|
|
40
|
+
{
|
|
41
|
+
entityRef: entity,
|
|
42
|
+
style: {
|
|
43
|
+
display: "-webkit-box",
|
|
44
|
+
WebkitBoxOrient: "vertical",
|
|
45
|
+
WebkitLineClamp: 1,
|
|
46
|
+
overflow: "hidden",
|
|
47
|
+
textOverflow: "ellipsis",
|
|
48
|
+
fontSize: "0.875rem",
|
|
49
|
+
fontWeight: "500",
|
|
50
|
+
textDecoration: "underline"
|
|
51
|
+
}
|
|
52
|
+
},
|
|
53
|
+
title
|
|
54
|
+
)),
|
|
55
|
+
/* @__PURE__ */ React.createElement(
|
|
56
|
+
Box,
|
|
57
|
+
{
|
|
58
|
+
sx: {
|
|
59
|
+
pt: 2,
|
|
60
|
+
height: "175px",
|
|
61
|
+
overflow: "hidden"
|
|
62
|
+
}
|
|
63
|
+
},
|
|
64
|
+
/* @__PURE__ */ React.createElement(
|
|
65
|
+
Typography,
|
|
66
|
+
{
|
|
67
|
+
variant: "body2",
|
|
68
|
+
paragraph: true,
|
|
69
|
+
sx: {
|
|
70
|
+
display: "-webkit-box",
|
|
71
|
+
WebkitLineClamp: 8,
|
|
72
|
+
WebkitBoxOrient: "vertical",
|
|
73
|
+
overflow: "hidden",
|
|
74
|
+
textOverflow: "ellipsis",
|
|
75
|
+
"& p": {
|
|
76
|
+
margin: "auto"
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
},
|
|
80
|
+
/* @__PURE__ */ React.createElement(MarkdownContent, { content: description })
|
|
81
|
+
)
|
|
82
|
+
),
|
|
83
|
+
/* @__PURE__ */ React.createElement(TagList, { kind, tags })
|
|
84
|
+
)
|
|
85
|
+
);
|
|
86
|
+
};
|
|
87
|
+
|
|
88
|
+
export { EntityCard as default };
|
|
89
|
+
//# sourceMappingURL=EntityCard.esm.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"EntityCard.esm.js","sources":["../../../src/components/EntitySection/EntityCard.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React from 'react';\n\nimport { EntityRefLink } from '@backstage/plugin-catalog-react';\nimport { Entity } from '@backstage/catalog-model';\nimport { MarkdownContent } from '@backstage/core-components';\n\nimport CardContent from '@mui/material/CardContent';\nimport Typography from '@mui/material/Typography';\nimport Box from '@mui/material/Box';\nimport Card from '@mui/material/Card';\n\nimport TagList from './TagList';\n\ninterface EntityCardProps {\n title: string;\n version?: string;\n description: string;\n tags: string[];\n kind: string;\n entity: Entity;\n}\n\nconst EntityCard: React.FC<EntityCardProps> = ({\n title,\n description,\n tags,\n kind,\n entity,\n}) => {\n return (\n <Card\n elevation={0}\n sx={{\n border: theme => `1px solid ${theme.palette.grey[400]}`,\n overflow: 'auto',\n maxHeight: '100%',\n }}\n >\n <CardContent\n sx={{\n pb: 2,\n '&:last-child': {\n pb: 2,\n },\n backgroundColor: 'transparent',\n }}\n >\n <Box sx={{ overflow: 'hidden' }}>\n <EntityRefLink\n entityRef={entity}\n style={{\n display: '-webkit-box',\n WebkitBoxOrient: 'vertical',\n WebkitLineClamp: 1,\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n fontSize: '0.875rem',\n fontWeight: '500',\n textDecoration: 'underline',\n }}\n >\n {title}\n </EntityRefLink>\n </Box>\n <Box\n sx={{\n pt: 2,\n height: '175px',\n overflow: 'hidden',\n }}\n >\n <Typography\n variant=\"body2\"\n paragraph\n sx={{\n display: '-webkit-box',\n WebkitLineClamp: 8,\n WebkitBoxOrient: 'vertical',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n '& p': {\n margin: 'auto',\n },\n }}\n >\n <MarkdownContent content={description} />\n </Typography>\n </Box>\n <TagList kind={kind} tags={tags} />\n </CardContent>\n </Card>\n );\n};\n\nexport default EntityCard;\n"],"names":[],"mappings":";;;;;;;;;AAqCA,MAAM,aAAwC,CAAC;AAAA,EAC7C,KAAA;AAAA,EACA,WAAA;AAAA,EACA,IAAA;AAAA,EACA,IAAA;AAAA,EACA;AACF,CAAM,KAAA;AACJ,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,CAAA;AAAA,MACX,EAAI,EAAA;AAAA,QACF,QAAQ,CAAS,KAAA,KAAA,CAAA,UAAA,EAAa,MAAM,OAAQ,CAAA,IAAA,CAAK,GAAG,CAAC,CAAA,CAAA;AAAA,QACrD,QAAU,EAAA,MAAA;AAAA,QACV,SAAW,EAAA;AAAA;AACb,KAAA;AAAA,oBAEA,KAAA,CAAA,aAAA;AAAA,MAAC,WAAA;AAAA,MAAA;AAAA,QACC,EAAI,EAAA;AAAA,UACF,EAAI,EAAA,CAAA;AAAA,UACJ,cAAgB,EAAA;AAAA,YACd,EAAI,EAAA;AAAA,WACN;AAAA,UACA,eAAiB,EAAA;AAAA;AACnB,OAAA;AAAA,0CAEC,GAAI,EAAA,EAAA,EAAA,EAAI,EAAE,QAAA,EAAU,UACnB,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,QAAC,aAAA;AAAA,QAAA;AAAA,UACC,SAAW,EAAA,MAAA;AAAA,UACX,KAAO,EAAA;AAAA,YACL,OAAS,EAAA,aAAA;AAAA,YACT,eAAiB,EAAA,UAAA;AAAA,YACjB,eAAiB,EAAA,CAAA;AAAA,YACjB,QAAU,EAAA,QAAA;AAAA,YACV,YAAc,EAAA,UAAA;AAAA,YACd,QAAU,EAAA,UAAA;AAAA,YACV,UAAY,EAAA,KAAA;AAAA,YACZ,cAAgB,EAAA;AAAA;AAClB,SAAA;AAAA,QAEC;AAAA,OAEL,CAAA;AAAA,sBACA,KAAA,CAAA,aAAA;AAAA,QAAC,GAAA;AAAA,QAAA;AAAA,UACC,EAAI,EAAA;AAAA,YACF,EAAI,EAAA,CAAA;AAAA,YACJ,MAAQ,EAAA,OAAA;AAAA,YACR,QAAU,EAAA;AAAA;AACZ,SAAA;AAAA,wBAEA,KAAA,CAAA,aAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,OAAQ,EAAA,OAAA;AAAA,YACR,SAAS,EAAA,IAAA;AAAA,YACT,EAAI,EAAA;AAAA,cACF,OAAS,EAAA,aAAA;AAAA,cACT,eAAiB,EAAA,CAAA;AAAA,cACjB,eAAiB,EAAA,UAAA;AAAA,cACjB,QAAU,EAAA,QAAA;AAAA,cACV,YAAc,EAAA,UAAA;AAAA,cACd,KAAO,EAAA;AAAA,gBACL,MAAQ,EAAA;AAAA;AACV;AACF,WAAA;AAAA,0BAEA,KAAA,CAAA,aAAA,CAAC,eAAgB,EAAA,EAAA,OAAA,EAAS,WAAa,EAAA;AAAA;AACzC,OACF;AAAA,sBACA,KAAA,CAAA,aAAA,CAAC,OAAQ,EAAA,EAAA,IAAA,EAAY,IAAY,EAAA;AAAA;AACnC,GACF;AAEJ;;;;"}
|
|
@@ -0,0 +1,202 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Link, WarningPanel, CodeSnippet } from '@backstage/core-components';
|
|
3
|
+
import { useUserProfile } from '@backstage/plugin-user-settings';
|
|
4
|
+
import Grid from '@mui/material/Grid';
|
|
5
|
+
import Box from '@mui/material/Box';
|
|
6
|
+
import Card from '@mui/material/Card';
|
|
7
|
+
import IconButton from '@mui/material/IconButton';
|
|
8
|
+
import Skeleton from '@mui/material/Skeleton';
|
|
9
|
+
import Typography from '@mui/material/Typography';
|
|
10
|
+
import CloseIcon from '@mui/icons-material/Close';
|
|
11
|
+
import CircularProgress from '@mui/material/CircularProgress';
|
|
12
|
+
import CardContent from '@mui/material/CardContent';
|
|
13
|
+
import { styled, useTheme } from '@mui/material/styles';
|
|
14
|
+
import EntityCard from './EntityCard.esm.js';
|
|
15
|
+
import { ViewMoreLink } from './ViewMoreLink.esm.js';
|
|
16
|
+
import HomePageEntityIllustration from '../../images/homepage-entities-1.svg';
|
|
17
|
+
import { useEntities } from '../../hooks/useEntities.esm.js';
|
|
18
|
+
import { hasEntityIllustrationUserDismissed, addDismissedEntityIllustrationUsers } from '../../utils/utils.esm.js';
|
|
19
|
+
|
|
20
|
+
const StyledLink = styled(Link)(({ theme }) => ({
|
|
21
|
+
textDecoration: "none",
|
|
22
|
+
padding: theme.spacing(1, 1.5),
|
|
23
|
+
fontSize: "16px",
|
|
24
|
+
display: "inline-flex",
|
|
25
|
+
border: `1px solid ${theme.palette.primary.main}`,
|
|
26
|
+
borderRadius: 4
|
|
27
|
+
}));
|
|
28
|
+
const EntitySection = () => {
|
|
29
|
+
const theme = useTheme();
|
|
30
|
+
const { displayName, loading: profileLoading } = useUserProfile();
|
|
31
|
+
const [isRemoveFirstCard, setIsRemoveFirstCard] = React.useState(false);
|
|
32
|
+
const [showDiscoveryCard, setShowDiscoveryCard] = React.useState(true);
|
|
33
|
+
const [imgLoaded, setImgLoaded] = React.useState(false);
|
|
34
|
+
React.useEffect(() => {
|
|
35
|
+
const isUserDismissedEntityIllustration = hasEntityIllustrationUserDismissed(displayName);
|
|
36
|
+
setIsRemoveFirstCard(isUserDismissedEntityIllustration);
|
|
37
|
+
}, [displayName]);
|
|
38
|
+
const handleClose = () => {
|
|
39
|
+
setShowDiscoveryCard(false);
|
|
40
|
+
setTimeout(() => {
|
|
41
|
+
addDismissedEntityIllustrationUsers(displayName);
|
|
42
|
+
setIsRemoveFirstCard(true);
|
|
43
|
+
}, 500);
|
|
44
|
+
};
|
|
45
|
+
const { data, error, isLoading } = useEntities({
|
|
46
|
+
kind: ["Component", "API", "Resource", "System"]
|
|
47
|
+
});
|
|
48
|
+
const entities = data?.items ?? [];
|
|
49
|
+
let content;
|
|
50
|
+
if (isLoading) {
|
|
51
|
+
content = /* @__PURE__ */ React.createElement(
|
|
52
|
+
Box,
|
|
53
|
+
{
|
|
54
|
+
sx: {
|
|
55
|
+
height: "100%",
|
|
56
|
+
display: "flex",
|
|
57
|
+
alignItems: "center",
|
|
58
|
+
justifyContent: "center"
|
|
59
|
+
}
|
|
60
|
+
},
|
|
61
|
+
/* @__PURE__ */ React.createElement(CircularProgress, null)
|
|
62
|
+
);
|
|
63
|
+
} else if (!data) {
|
|
64
|
+
content = /* @__PURE__ */ React.createElement(WarningPanel, { severity: "error", title: "Could not fetch data." }, /* @__PURE__ */ React.createElement(
|
|
65
|
+
CodeSnippet,
|
|
66
|
+
{
|
|
67
|
+
language: "text",
|
|
68
|
+
text: error?.toString() ?? "Unknown error"
|
|
69
|
+
}
|
|
70
|
+
));
|
|
71
|
+
} else {
|
|
72
|
+
content = /* @__PURE__ */ React.createElement(Box, { sx: { padding: "8px 8px 8px 0" } }, /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Grid, { container: true, spacing: 1, alignItems: "stretch" }, !isRemoveFirstCard && !profileLoading && /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12, md: 5, key: "entities illustration" }, /* @__PURE__ */ React.createElement(
|
|
73
|
+
Card,
|
|
74
|
+
{
|
|
75
|
+
elevation: 0,
|
|
76
|
+
sx: {
|
|
77
|
+
border: `1px solid ${theme.palette.grey[400]}`,
|
|
78
|
+
display: "flex",
|
|
79
|
+
flexDirection: "row",
|
|
80
|
+
alignItems: "center",
|
|
81
|
+
position: "relative",
|
|
82
|
+
transition: "opacity 0.5s ease-out, transform 0.5s ease-in-out",
|
|
83
|
+
opacity: showDiscoveryCard ? 1 : 0,
|
|
84
|
+
transform: showDiscoveryCard ? "translateX(0)" : "translateX(-50px)"
|
|
85
|
+
}
|
|
86
|
+
},
|
|
87
|
+
!imgLoaded && /* @__PURE__ */ React.createElement(
|
|
88
|
+
Skeleton,
|
|
89
|
+
{
|
|
90
|
+
variant: "rectangular",
|
|
91
|
+
height: 300,
|
|
92
|
+
sx: {
|
|
93
|
+
borderRadius: 3,
|
|
94
|
+
width: "clamp(140px, 14vw, 266px)"
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
),
|
|
98
|
+
/* @__PURE__ */ React.createElement(
|
|
99
|
+
Box,
|
|
100
|
+
{
|
|
101
|
+
component: "img",
|
|
102
|
+
src: HomePageEntityIllustration,
|
|
103
|
+
onLoad: () => setImgLoaded(true),
|
|
104
|
+
alt: "",
|
|
105
|
+
height: 300,
|
|
106
|
+
sx: {
|
|
107
|
+
width: "clamp(140px, 14vw, 266px)"
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
),
|
|
111
|
+
/* @__PURE__ */ React.createElement(Box, { sx: { p: 2 } }, /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Typography, { variant: "body2", paragraph: true }, "Browse the Systems, Components, Resources, and APIs that are available in your organization.")), entities?.length > 0 && /* @__PURE__ */ React.createElement(
|
|
112
|
+
IconButton,
|
|
113
|
+
{
|
|
114
|
+
onClick: handleClose,
|
|
115
|
+
"aria-label": "close",
|
|
116
|
+
style: {
|
|
117
|
+
position: "absolute",
|
|
118
|
+
top: "8px",
|
|
119
|
+
right: "8px"
|
|
120
|
+
}
|
|
121
|
+
},
|
|
122
|
+
/* @__PURE__ */ React.createElement(CloseIcon, { style: { width: "16px", height: "16px" } })
|
|
123
|
+
))
|
|
124
|
+
)), entities?.slice(0, isRemoveFirstCard ? 4 : 2).map((item) => /* @__PURE__ */ React.createElement(
|
|
125
|
+
Grid,
|
|
126
|
+
{
|
|
127
|
+
item: true,
|
|
128
|
+
xs: 12,
|
|
129
|
+
md: isRemoveFirstCard ? 3 : 3.5,
|
|
130
|
+
key: item.metadata.name
|
|
131
|
+
},
|
|
132
|
+
/* @__PURE__ */ React.createElement(
|
|
133
|
+
EntityCard,
|
|
134
|
+
{
|
|
135
|
+
entity: item,
|
|
136
|
+
title: item.spec?.profile?.displayName ?? item.metadata.name,
|
|
137
|
+
version: "latest",
|
|
138
|
+
description: item.metadata.description ?? "",
|
|
139
|
+
tags: item.metadata?.tags ?? [],
|
|
140
|
+
kind: item.kind
|
|
141
|
+
}
|
|
142
|
+
)
|
|
143
|
+
)), entities?.length === 0 && /* @__PURE__ */ React.createElement(Grid, { item: true, md: isRemoveFirstCard ? 12 : 7 }, /* @__PURE__ */ React.createElement(
|
|
144
|
+
Box,
|
|
145
|
+
{
|
|
146
|
+
sx: {
|
|
147
|
+
display: "flex",
|
|
148
|
+
alignItems: "center",
|
|
149
|
+
justifyContent: "center",
|
|
150
|
+
minHeight: 300,
|
|
151
|
+
border: (muiTheme) => `1px solid ${muiTheme.palette.grey[400]}`,
|
|
152
|
+
borderRadius: 3,
|
|
153
|
+
overflow: "hidden"
|
|
154
|
+
}
|
|
155
|
+
},
|
|
156
|
+
/* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement(Typography, { sx: { fontSize: "1.125rem", fontWeight: 500 } }, "No software catalog added yet"), /* @__PURE__ */ React.createElement(
|
|
157
|
+
Typography,
|
|
158
|
+
{
|
|
159
|
+
sx: {
|
|
160
|
+
fontSize: "0.875rem",
|
|
161
|
+
fontWeight: 400,
|
|
162
|
+
mt: "20px",
|
|
163
|
+
mb: "16px"
|
|
164
|
+
}
|
|
165
|
+
},
|
|
166
|
+
"Once software catalogs are added, this space will showcase relevant content tailored to your experience."
|
|
167
|
+
), /* @__PURE__ */ React.createElement(StyledLink, { to: "/catalog-import", underline: "none" }, "Register a component"))
|
|
168
|
+
))), /* @__PURE__ */ React.createElement(Box, { sx: { pt: 2 } }, entities?.length > 0 && /* @__PURE__ */ React.createElement(ViewMoreLink, { to: "/catalog" }, "View all ", data?.totalItems ? data?.totalItems : "", " catalog entities"))));
|
|
169
|
+
}
|
|
170
|
+
return /* @__PURE__ */ React.createElement(
|
|
171
|
+
Card,
|
|
172
|
+
{
|
|
173
|
+
elevation: 0,
|
|
174
|
+
sx: {
|
|
175
|
+
padding: "24px",
|
|
176
|
+
border: (muitheme) => `1px solid ${muitheme.palette.grey[300]}`,
|
|
177
|
+
overflow: "auto",
|
|
178
|
+
"$::-webkit-scrollbar": {
|
|
179
|
+
display: "none"
|
|
180
|
+
},
|
|
181
|
+
scrollbarWidth: "none"
|
|
182
|
+
}
|
|
183
|
+
},
|
|
184
|
+
/* @__PURE__ */ React.createElement(
|
|
185
|
+
Typography,
|
|
186
|
+
{
|
|
187
|
+
variant: "h3",
|
|
188
|
+
sx: {
|
|
189
|
+
display: "flex",
|
|
190
|
+
alignItems: "center",
|
|
191
|
+
fontWeight: "500",
|
|
192
|
+
fontSize: "1.5rem"
|
|
193
|
+
}
|
|
194
|
+
},
|
|
195
|
+
"Explore Your Software Catalog"
|
|
196
|
+
),
|
|
197
|
+
content
|
|
198
|
+
);
|
|
199
|
+
};
|
|
200
|
+
|
|
201
|
+
export { EntitySection };
|
|
202
|
+
//# sourceMappingURL=EntitySection.esm.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"EntitySection.esm.js","sources":["../../../src/components/EntitySection/EntitySection.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React from 'react';\n\nimport {\n CodeSnippet,\n WarningPanel,\n Link as BackstageLink,\n} from '@backstage/core-components';\nimport { useUserProfile } from '@backstage/plugin-user-settings';\n\nimport Grid from '@mui/material/Grid';\nimport Box from '@mui/material/Box';\nimport Card from '@mui/material/Card';\nimport IconButton from '@mui/material/IconButton';\nimport Skeleton from '@mui/material/Skeleton';\nimport Typography from '@mui/material/Typography';\nimport CloseIcon from '@mui/icons-material/Close';\nimport CircularProgress from '@mui/material/CircularProgress';\nimport CardContent from '@mui/material/CardContent';\nimport { useTheme, styled } from '@mui/material/styles';\n\nimport EntityCard from './EntityCard';\nimport { ViewMoreLink } from './ViewMoreLink';\nimport HomePageEntityIllustration from '../../images/homepage-entities-1.svg';\nimport { useEntities } from '../../hooks/useEntities';\nimport {\n addDismissedEntityIllustrationUsers,\n hasEntityIllustrationUserDismissed,\n} from '../../utils/utils';\n\nconst StyledLink = styled(BackstageLink)(({ theme }) => ({\n textDecoration: 'none',\n padding: theme.spacing(1, 1.5),\n fontSize: '16px',\n display: 'inline-flex',\n border: `1px solid ${theme.palette.primary.main}`,\n borderRadius: 4,\n}));\n\nexport const EntitySection = () => {\n const theme = useTheme();\n const { displayName, loading: profileLoading } = useUserProfile();\n const [isRemoveFirstCard, setIsRemoveFirstCard] = React.useState(false);\n const [showDiscoveryCard, setShowDiscoveryCard] = React.useState(true);\n const [imgLoaded, setImgLoaded] = React.useState(false);\n\n React.useEffect(() => {\n const isUserDismissedEntityIllustration =\n hasEntityIllustrationUserDismissed(displayName);\n setIsRemoveFirstCard(isUserDismissedEntityIllustration);\n }, [displayName]);\n\n const handleClose = () => {\n setShowDiscoveryCard(false);\n setTimeout(() => {\n addDismissedEntityIllustrationUsers(displayName);\n setIsRemoveFirstCard(true);\n }, 500);\n };\n\n const { data, error, isLoading } = useEntities({\n kind: ['Component', 'API', 'Resource', 'System'],\n });\n\n const entities = data?.items ?? [];\n\n let content: React.ReactNode;\n\n if (isLoading) {\n content = (\n <Box\n sx={{\n height: '100%',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n }}\n >\n <CircularProgress />\n </Box>\n );\n } else if (!data) {\n content = (\n <WarningPanel severity=\"error\" title=\"Could not fetch data.\">\n <CodeSnippet\n language=\"text\"\n text={error?.toString() ?? 'Unknown error'}\n />\n </WarningPanel>\n );\n } else {\n content = (\n <Box sx={{ padding: '8px 8px 8px 0' }}>\n <React.Fragment>\n <Grid container spacing={1} alignItems=\"stretch\">\n {!isRemoveFirstCard && !profileLoading && (\n <Grid item xs={12} md={5} key=\"entities illustration\">\n <Card\n elevation={0}\n sx={{\n border: `1px solid ${theme.palette.grey[400]}`,\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n position: 'relative',\n transition:\n 'opacity 0.5s ease-out, transform 0.5s ease-in-out',\n opacity: showDiscoveryCard ? 1 : 0,\n transform: showDiscoveryCard\n ? 'translateX(0)'\n : 'translateX(-50px)',\n }}\n >\n {!imgLoaded && (\n <Skeleton\n variant=\"rectangular\"\n height={300}\n sx={{\n borderRadius: 3,\n width: 'clamp(140px, 14vw, 266px)',\n }}\n />\n )}\n <Box\n component=\"img\"\n src={HomePageEntityIllustration}\n onLoad={() => setImgLoaded(true)}\n alt=\"\"\n height={300}\n sx={{\n width: 'clamp(140px, 14vw, 266px)',\n }}\n />\n <Box sx={{ p: 2 }}>\n <Box>\n <Typography variant=\"body2\" paragraph>\n Browse the Systems, Components, Resources, and APIs that\n are available in your organization.\n </Typography>\n </Box>\n {entities?.length > 0 && (\n <IconButton\n onClick={handleClose}\n aria-label=\"close\"\n style={{\n position: 'absolute',\n top: '8px',\n right: '8px',\n }}\n >\n <CloseIcon style={{ width: '16px', height: '16px' }} />\n </IconButton>\n )}\n </Box>\n </Card>\n </Grid>\n )}\n {entities?.slice(0, isRemoveFirstCard ? 4 : 2).map((item: any) => (\n <Grid\n item\n xs={12}\n md={isRemoveFirstCard ? 3 : 3.5}\n key={item.metadata.name}\n >\n <EntityCard\n entity={item}\n title={item.spec?.profile?.displayName ?? item.metadata.name}\n version=\"latest\"\n description={item.metadata.description ?? ''}\n tags={item.metadata?.tags ?? []}\n kind={item.kind}\n />\n </Grid>\n ))}\n {entities?.length === 0 && (\n <Grid item md={isRemoveFirstCard ? 12 : 7}>\n <Box\n sx={{\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n minHeight: 300,\n border: muiTheme =>\n `1px solid ${muiTheme.palette.grey[400]}`,\n borderRadius: 3,\n overflow: 'hidden',\n }}\n >\n <CardContent>\n <Typography sx={{ fontSize: '1.125rem', fontWeight: 500 }}>\n No software catalog added yet\n </Typography>\n <Typography\n sx={{\n fontSize: '0.875rem',\n fontWeight: 400,\n mt: '20px',\n mb: '16px',\n }}\n >\n Once software catalogs are added, this space will showcase\n relevant content tailored to your experience.\n </Typography>\n <StyledLink to=\"/catalog-import\" underline=\"none\">\n Register a component\n </StyledLink>\n </CardContent>\n </Box>\n </Grid>\n )}\n </Grid>\n <Box sx={{ pt: 2 }}>\n {entities?.length > 0 && (\n <ViewMoreLink to=\"/catalog\">\n View all {data?.totalItems ? data?.totalItems : ''} catalog\n entities\n </ViewMoreLink>\n )}\n </Box>\n </React.Fragment>\n </Box>\n );\n }\n\n return (\n <Card\n elevation={0}\n sx={{\n padding: '24px',\n border: muitheme => `1px solid ${muitheme.palette.grey[300]}`,\n overflow: 'auto',\n '$::-webkit-scrollbar': {\n display: 'none',\n },\n scrollbarWidth: 'none',\n }}\n >\n <Typography\n variant=\"h3\"\n sx={{\n display: 'flex',\n alignItems: 'center',\n fontWeight: '500',\n fontSize: '1.5rem',\n }}\n >\n Explore Your Software Catalog\n </Typography>\n {content}\n </Card>\n );\n};\n"],"names":["BackstageLink"],"mappings":"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"}
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import Box from '@mui/material/Box';
|
|
3
|
+
import Chip from '@mui/material/Chip';
|
|
4
|
+
import Typography from '@mui/material/Typography';
|
|
5
|
+
import { KINDS } from '../../utils/constants.esm.js';
|
|
6
|
+
|
|
7
|
+
const TagList = ({ tags, kind }) => {
|
|
8
|
+
const hiddenCount = tags.length - 3;
|
|
9
|
+
return /* @__PURE__ */ React.createElement(
|
|
10
|
+
Box,
|
|
11
|
+
{
|
|
12
|
+
sx: {
|
|
13
|
+
height: "72px",
|
|
14
|
+
overflow: "hidden",
|
|
15
|
+
display: "flex",
|
|
16
|
+
flexWrap: "wrap",
|
|
17
|
+
alignItems: "flex-end",
|
|
18
|
+
gap: 0.5
|
|
19
|
+
}
|
|
20
|
+
},
|
|
21
|
+
/* @__PURE__ */ React.createElement(
|
|
22
|
+
Chip,
|
|
23
|
+
{
|
|
24
|
+
key: kind,
|
|
25
|
+
label: /* @__PURE__ */ React.createElement(Typography, { sx: { fontSize: "0.8rem", fontWeight: 400 } }, kind),
|
|
26
|
+
sx: {
|
|
27
|
+
backgroundColor: KINDS[kind.toLocaleUpperCase()]?.fill,
|
|
28
|
+
color: "black"
|
|
29
|
+
},
|
|
30
|
+
variant: "filled",
|
|
31
|
+
size: "small"
|
|
32
|
+
}
|
|
33
|
+
),
|
|
34
|
+
tags.slice(0, 2).map((tag) => /* @__PURE__ */ React.createElement(
|
|
35
|
+
Chip,
|
|
36
|
+
{
|
|
37
|
+
key: tag,
|
|
38
|
+
label: /* @__PURE__ */ React.createElement(Typography, { sx: { fontSize: "0.8rem", fontWeight: 400 } }, tag),
|
|
39
|
+
variant: "outlined",
|
|
40
|
+
size: "small"
|
|
41
|
+
}
|
|
42
|
+
)),
|
|
43
|
+
hiddenCount > 0 && /* @__PURE__ */ React.createElement(
|
|
44
|
+
Chip,
|
|
45
|
+
{
|
|
46
|
+
label: /* @__PURE__ */ React.createElement(
|
|
47
|
+
Typography,
|
|
48
|
+
{
|
|
49
|
+
sx: {
|
|
50
|
+
fontSize: "0.8rem",
|
|
51
|
+
fontWeight: 400,
|
|
52
|
+
color: (theme) => `${theme.palette.mode === "light" ? "#0066CC" : "#1FA7F8"}`
|
|
53
|
+
}
|
|
54
|
+
},
|
|
55
|
+
`${hiddenCount} more`
|
|
56
|
+
),
|
|
57
|
+
variant: "outlined",
|
|
58
|
+
size: "small",
|
|
59
|
+
sx: {
|
|
60
|
+
border: "none"
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
)
|
|
64
|
+
);
|
|
65
|
+
};
|
|
66
|
+
|
|
67
|
+
export { TagList as default };
|
|
68
|
+
//# sourceMappingURL=TagList.esm.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TagList.esm.js","sources":["../../../src/components/EntitySection/TagList.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React from 'react';\n\nimport Box from '@mui/material/Box';\nimport Chip from '@mui/material/Chip';\nimport Typography from '@mui/material/Typography';\nimport { KINDS } from '../../utils/constants';\n\ntype KindKeys = keyof typeof KINDS;\n\ninterface TagListProps {\n tags: string[];\n kind: string;\n}\n\nconst TagList: React.FC<TagListProps> = ({ tags, kind }) => {\n const hiddenCount = tags.length - 3;\n return (\n <Box\n sx={{\n height: '72px',\n overflow: 'hidden',\n display: 'flex',\n flexWrap: 'wrap',\n alignItems: 'flex-end',\n gap: 0.5,\n }}\n >\n <Chip\n key={kind}\n label={\n <Typography sx={{ fontSize: '0.8rem', fontWeight: 400 }}>\n {kind}\n </Typography>\n }\n sx={{\n backgroundColor: KINDS[kind.toLocaleUpperCase() as KindKeys]?.fill,\n color: 'black',\n }}\n variant=\"filled\"\n size=\"small\"\n />\n {tags.slice(0, 2).map(tag => (\n <Chip\n key={tag}\n label={\n <Typography sx={{ fontSize: '0.8rem', fontWeight: 400 }}>\n {tag}\n </Typography>\n }\n variant=\"outlined\"\n size=\"small\"\n />\n ))}\n\n {hiddenCount > 0 && (\n <Chip\n label={\n <Typography\n sx={{\n fontSize: '0.8rem',\n fontWeight: 400,\n color: theme =>\n `${theme.palette.mode === 'light' ? '#0066CC' : '#1FA7F8'}`,\n }}\n >\n {`${hiddenCount} more`}\n </Typography>\n }\n variant=\"outlined\"\n size=\"small\"\n sx={{\n border: 'none',\n }}\n />\n )}\n </Box>\n );\n};\n\nexport default TagList;\n"],"names":[],"mappings":";;;;;;AA6BA,MAAM,OAAkC,GAAA,CAAC,EAAE,IAAA,EAAM,MAAW,KAAA;AAC1D,EAAM,MAAA,WAAA,GAAc,KAAK,MAAS,GAAA,CAAA;AAClC,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,EAAI,EAAA;AAAA,QACF,MAAQ,EAAA,MAAA;AAAA,QACR,QAAU,EAAA,QAAA;AAAA,QACV,OAAS,EAAA,MAAA;AAAA,QACT,QAAU,EAAA,MAAA;AAAA,QACV,UAAY,EAAA,UAAA;AAAA,QACZ,GAAK,EAAA;AAAA;AACP,KAAA;AAAA,oBAEA,KAAA,CAAA,aAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,GAAK,EAAA,IAAA;AAAA,QACL,KAAA,kBACG,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,EAAI,EAAA,EAAE,UAAU,QAAU,EAAA,UAAA,EAAY,GAAI,EAAA,EAAA,EACnD,IACH,CAAA;AAAA,QAEF,EAAI,EAAA;AAAA,UACF,eAAiB,EAAA,KAAA,CAAM,IAAK,CAAA,iBAAA,EAA+B,CAAG,EAAA,IAAA;AAAA,UAC9D,KAAO,EAAA;AAAA,SACT;AAAA,QACA,OAAQ,EAAA,QAAA;AAAA,QACR,IAAK,EAAA;AAAA;AAAA,KACP;AAAA,IACC,KAAK,KAAM,CAAA,CAAA,EAAG,CAAC,CAAA,CAAE,IAAI,CACpB,GAAA,qBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,GAAK,EAAA,GAAA;AAAA,QACL,KAAA,kBACG,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,EAAI,EAAA,EAAE,UAAU,QAAU,EAAA,UAAA,EAAY,GAAI,EAAA,EAAA,EACnD,GACH,CAAA;AAAA,QAEF,OAAQ,EAAA,UAAA;AAAA,QACR,IAAK,EAAA;AAAA;AAAA,KAER,CAAA;AAAA,IAEA,cAAc,CACb,oBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,KACE,kBAAA,KAAA,CAAA,aAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,EAAI,EAAA;AAAA,cACF,QAAU,EAAA,QAAA;AAAA,cACV,UAAY,EAAA,GAAA;AAAA,cACZ,KAAA,EAAO,WACL,CAAG,EAAA,KAAA,CAAM,QAAQ,IAAS,KAAA,OAAA,GAAU,YAAY,SAAS,CAAA;AAAA;AAC7D,WAAA;AAAA,UAEC,GAAG,WAAW,CAAA,KAAA;AAAA,SACjB;AAAA,QAEF,OAAQ,EAAA,UAAA;AAAA,QACR,IAAK,EAAA,OAAA;AAAA,QACL,EAAI,EAAA;AAAA,UACF,MAAQ,EAAA;AAAA;AACV;AAAA;AACF,GAEJ;AAEJ;;;;"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Link } from '@backstage/core-components';
|
|
3
|
+
import Typography from '@mui/material/Typography';
|
|
4
|
+
|
|
5
|
+
const ViewMoreLink = ({ to, children }) => {
|
|
6
|
+
return /* @__PURE__ */ React.createElement(Link, { to, underline: "always", style: { textUnderlineOffset: "4px" } }, /* @__PURE__ */ React.createElement(Typography, { variant: "body2", sx: { fontWeight: 500 } }, children));
|
|
7
|
+
};
|
|
8
|
+
|
|
9
|
+
export { ViewMoreLink };
|
|
10
|
+
//# sourceMappingURL=ViewMoreLink.esm.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ViewMoreLink.esm.js","sources":["../../../src/components/EntitySection/ViewMoreLink.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React from 'react';\nimport { Link, LinkProps } from '@backstage/core-components';\nimport Typography from '@mui/material/Typography';\n\ninterface ViewMoreLinkProps extends LinkProps {\n to: string;\n children: string | React.ReactNode;\n}\n\nexport const ViewMoreLink: React.FC<ViewMoreLinkProps> = ({ to, children }) => {\n return (\n <Link to={to} underline=\"always\" style={{ textUnderlineOffset: '4px' }}>\n <Typography variant=\"body2\" sx={{ fontWeight: 500 }}>\n {children}\n </Typography>\n </Link>\n );\n};\n"],"names":[],"mappings":";;;;AAwBO,MAAM,YAA4C,GAAA,CAAC,EAAE,EAAA,EAAI,UAAe,KAAA;AAC7E,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,QAAK,EAAQ,EAAA,SAAA,EAAU,UAAS,KAAO,EAAA,EAAE,qBAAqB,KAAM,EAAA,EAAA,sCAClE,UAAW,EAAA,EAAA,OAAA,EAAQ,SAAQ,EAAI,EAAA,EAAE,YAAY,GAAI,EAAA,EAAA,EAC/C,QACH,CACF,CAAA;AAEJ;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -16,7 +16,7 @@ const HomePage = (props) => {
|
|
|
16
16
|
);
|
|
17
17
|
return filteredAndSorted;
|
|
18
18
|
}, [props.cards]);
|
|
19
|
-
return /* @__PURE__ */ React.createElement(Page, { themeId: "home" }, /* @__PURE__ */ React.createElement(Header, { ...props }), /* @__PURE__ */ React.createElement(Content, null, filteredAndSortedHomePageCards.length === 0 ? /* @__PURE__ */ React.createElement(
|
|
19
|
+
return /* @__PURE__ */ React.createElement(Page, { themeId: "home" }, /* @__PURE__ */ React.createElement(Header, { ...props, title: "Welcome back!" }), /* @__PURE__ */ React.createElement(Content, null, filteredAndSortedHomePageCards.length === 0 ? /* @__PURE__ */ React.createElement(
|
|
20
20
|
EmptyState,
|
|
21
21
|
{
|
|
22
22
|
title: "No home page cards (mount points) configured or found.",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HomePage.esm.js","sources":["../../src/components/HomePage.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { useMemo } from 'react';\n\nimport { Content, EmptyState, Page } from '@backstage/core-components';\n\nimport { HomePageCardMountPoint } from '../types';\n\nimport { Header, HeaderProps } from './Header';\nimport { ReadOnlyGrid } from './ReadOnlyGrid';\n\nexport interface HomePageProps extends HeaderProps {\n cards?: HomePageCardMountPoint[];\n}\n\nexport const HomePage = (props: HomePageProps) => {\n const filteredAndSortedHomePageCards = useMemo(() => {\n if (!props.cards) {\n return [];\n }\n\n const filteredAndSorted = props.cards.filter(\n card =>\n card.enabled !== false &&\n (!card.config?.priority || card.config.priority >= 0),\n );\n\n filteredAndSorted.sort(\n (a, b) => (b.config?.priority ?? 0) - (a.config?.priority ?? 0),\n );\n\n return filteredAndSorted;\n }, [props.cards]);\n\n return (\n <Page themeId=\"home\">\n <Header {...props} />\n <Content>\n {filteredAndSortedHomePageCards.length === 0 ? (\n <EmptyState\n title=\"No home page cards (mount points) configured or found.\"\n missing=\"content\"\n />\n ) : (\n <ReadOnlyGrid mountPoints={filteredAndSortedHomePageCards} />\n )}\n </Content>\n </Page>\n );\n};\n"],"names":[],"mappings":";;;;;AA6Ba,MAAA,QAAA,GAAW,CAAC,KAAyB,KAAA;AAChD,EAAM,MAAA,8BAAA,GAAiC,QAAQ,MAAM;AACnD,IAAI,IAAA,CAAC,MAAM,KAAO,EAAA;AAChB,MAAA,OAAO,EAAC;AAAA;AAGV,IAAM,MAAA,iBAAA,GAAoB,MAAM,KAAM,CAAA,MAAA;AAAA,MACpC,CAAA,IAAA,KACE,IAAK,CAAA,OAAA,KAAY,KAChB,KAAA,CAAC,KAAK,MAAQ,EAAA,QAAA,IAAY,IAAK,CAAA,MAAA,CAAO,QAAY,IAAA,CAAA;AAAA,KACvD;AAEA,IAAkB,iBAAA,CAAA,IAAA;AAAA,MAChB,CAAC,GAAG,CAAO,KAAA,CAAA,CAAA,CAAE,QAAQ,QAAY,IAAA,CAAA,KAAM,CAAE,CAAA,MAAA,EAAQ,QAAY,IAAA,CAAA;AAAA,KAC/D;AAEA,IAAO,OAAA,iBAAA;AAAA,GACN,EAAA,CAAC,KAAM,CAAA,KAAK,CAAC,CAAA;AAEhB,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,OAAQ,EAAA,MAAA,EAAA,
|
|
1
|
+
{"version":3,"file":"HomePage.esm.js","sources":["../../src/components/HomePage.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { useMemo } from 'react';\n\nimport { Content, EmptyState, Page } from '@backstage/core-components';\n\nimport { HomePageCardMountPoint } from '../types';\n\nimport { Header, HeaderProps } from './Header';\nimport { ReadOnlyGrid } from './ReadOnlyGrid';\n\nexport interface HomePageProps extends HeaderProps {\n cards?: HomePageCardMountPoint[];\n}\n\nexport const HomePage = (props: HomePageProps) => {\n const filteredAndSortedHomePageCards = useMemo(() => {\n if (!props.cards) {\n return [];\n }\n\n const filteredAndSorted = props.cards.filter(\n card =>\n card.enabled !== false &&\n (!card.config?.priority || card.config.priority >= 0),\n );\n\n filteredAndSorted.sort(\n (a, b) => (b.config?.priority ?? 0) - (a.config?.priority ?? 0),\n );\n\n return filteredAndSorted;\n }, [props.cards]);\n\n return (\n <Page themeId=\"home\">\n <Header {...props} title=\"Welcome back!\" />\n <Content>\n {filteredAndSortedHomePageCards.length === 0 ? (\n <EmptyState\n title=\"No home page cards (mount points) configured or found.\"\n missing=\"content\"\n />\n ) : (\n <ReadOnlyGrid mountPoints={filteredAndSortedHomePageCards} />\n )}\n </Content>\n </Page>\n );\n};\n"],"names":[],"mappings":";;;;;AA6Ba,MAAA,QAAA,GAAW,CAAC,KAAyB,KAAA;AAChD,EAAM,MAAA,8BAAA,GAAiC,QAAQ,MAAM;AACnD,IAAI,IAAA,CAAC,MAAM,KAAO,EAAA;AAChB,MAAA,OAAO,EAAC;AAAA;AAGV,IAAM,MAAA,iBAAA,GAAoB,MAAM,KAAM,CAAA,MAAA;AAAA,MACpC,CAAA,IAAA,KACE,IAAK,CAAA,OAAA,KAAY,KAChB,KAAA,CAAC,KAAK,MAAQ,EAAA,QAAA,IAAY,IAAK,CAAA,MAAA,CAAO,QAAY,IAAA,CAAA;AAAA,KACvD;AAEA,IAAkB,iBAAA,CAAA,IAAA;AAAA,MAChB,CAAC,GAAG,CAAO,KAAA,CAAA,CAAA,CAAE,QAAQ,QAAY,IAAA,CAAA,KAAM,CAAE,CAAA,MAAA,EAAQ,QAAY,IAAA,CAAA;AAAA,KAC/D;AAEA,IAAO,OAAA,iBAAA;AAAA,GACN,EAAA,CAAC,KAAM,CAAA,KAAK,CAAC,CAAA;AAEhB,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,OAAQ,EAAA,MAAA,EAAA,sCACX,MAAQ,EAAA,EAAA,GAAG,KAAO,EAAA,KAAA,EAAM,iBAAgB,CACzC,kBAAA,KAAA,CAAA,aAAA,CAAC,OACE,EAAA,IAAA,EAAA,8BAAA,CAA+B,WAAW,CACzC,mBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,KAAM,EAAA,wDAAA;AAAA,MACN,OAAQ,EAAA;AAAA;AAAA,sBAGT,KAAA,CAAA,aAAA,CAAA,YAAA,EAAA,EAAa,WAAa,EAAA,8BAAA,EAAgC,CAE/D,CACF,CAAA;AAEJ;;;;"}
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Link } from 'react-router-dom';
|
|
3
|
+
import Box from '@mui/material/Box';
|
|
4
|
+
import CardContent from '@mui/material/CardContent';
|
|
5
|
+
import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
|
|
6
|
+
import Button from '@mui/material/Button';
|
|
7
|
+
import Typography from '@mui/material/Typography';
|
|
8
|
+
|
|
9
|
+
const OnboardingCard = ({
|
|
10
|
+
title,
|
|
11
|
+
description,
|
|
12
|
+
buttonText,
|
|
13
|
+
buttonLink,
|
|
14
|
+
target,
|
|
15
|
+
ariaLabel
|
|
16
|
+
}) => {
|
|
17
|
+
return /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(CardContent, { sx: { backgroundColor: "transparent" } }, /* @__PURE__ */ React.createElement(
|
|
18
|
+
Typography,
|
|
19
|
+
{
|
|
20
|
+
sx: {
|
|
21
|
+
fontSize: "1.75rem",
|
|
22
|
+
fontWeight: 500,
|
|
23
|
+
m: 0
|
|
24
|
+
}
|
|
25
|
+
},
|
|
26
|
+
title
|
|
27
|
+
), /* @__PURE__ */ React.createElement(
|
|
28
|
+
Typography,
|
|
29
|
+
{
|
|
30
|
+
sx: {
|
|
31
|
+
fontSize: "1rem",
|
|
32
|
+
fontWeight: 500,
|
|
33
|
+
p: "16px",
|
|
34
|
+
pt: "8px",
|
|
35
|
+
pl: "0px",
|
|
36
|
+
display: "-webkit-box",
|
|
37
|
+
webkitBoxOrient: "vertical",
|
|
38
|
+
width: "240px",
|
|
39
|
+
webkitLineClamp: 2,
|
|
40
|
+
overflow: "hidden",
|
|
41
|
+
textOverflow: "ellipsis"
|
|
42
|
+
}
|
|
43
|
+
},
|
|
44
|
+
description
|
|
45
|
+
), /* @__PURE__ */ React.createElement(
|
|
46
|
+
Button,
|
|
47
|
+
{
|
|
48
|
+
component: Link,
|
|
49
|
+
variant: "outlined",
|
|
50
|
+
color: "primary",
|
|
51
|
+
to: buttonLink,
|
|
52
|
+
target,
|
|
53
|
+
"aria-label": ariaLabel,
|
|
54
|
+
sx: {
|
|
55
|
+
padding: (theme) => theme.spacing(1, 1.5),
|
|
56
|
+
fontSize: "16px"
|
|
57
|
+
}
|
|
58
|
+
},
|
|
59
|
+
buttonText,
|
|
60
|
+
" ",
|
|
61
|
+
/* @__PURE__ */ React.createElement(ArrowForwardIcon, { style: { paddingLeft: "0.5rem" } })
|
|
62
|
+
)));
|
|
63
|
+
};
|
|
64
|
+
|
|
65
|
+
export { OnboardingCard as default };
|
|
66
|
+
//# sourceMappingURL=OnboardingCard.esm.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"OnboardingCard.esm.js","sources":["../../../src/components/OnboardingSection/OnboardingCard.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React from 'react';\nimport { Link as RouterLink } from 'react-router-dom';\n\nimport Box from '@mui/material/Box';\nimport CardContent from '@mui/material/CardContent';\nimport ArrowForwardIcon from '@mui/icons-material/ArrowForward';\nimport Button from '@mui/material/Button';\nimport Typography from '@mui/material/Typography';\n\ninterface OnboardingCardProps {\n title: string;\n description: string;\n buttonText: string;\n buttonLink: string;\n target?: string;\n ariaLabel?: string;\n}\n\nconst OnboardingCard: React.FC<OnboardingCardProps> = ({\n title,\n description,\n buttonText,\n buttonLink,\n target,\n ariaLabel,\n}) => {\n return (\n <Box>\n <CardContent sx={{ backgroundColor: 'transparent' }}>\n <Typography\n sx={{\n fontSize: '1.75rem',\n fontWeight: 500,\n m: 0,\n }}\n >\n {title}\n </Typography>\n <Typography\n sx={{\n fontSize: '1rem',\n fontWeight: 500,\n p: '16px',\n pt: '8px',\n pl: '0px',\n display: '-webkit-box',\n webkitBoxOrient: 'vertical',\n width: '240px',\n webkitLineClamp: 2,\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n }}\n >\n {description}\n </Typography>\n <Button\n component={RouterLink}\n variant=\"outlined\"\n color=\"primary\"\n to={buttonLink}\n target={target}\n aria-label={ariaLabel}\n sx={{\n padding: theme => theme.spacing(1, 1.5),\n fontSize: '16px',\n }}\n >\n {buttonText} <ArrowForwardIcon style={{ paddingLeft: '0.5rem' }} />\n </Button>\n </CardContent>\n </Box>\n );\n};\n\nexport default OnboardingCard;\n"],"names":["RouterLink"],"mappings":";;;;;;;;AAiCA,MAAM,iBAAgD,CAAC;AAAA,EACrD,KAAA;AAAA,EACA,WAAA;AAAA,EACA,UAAA;AAAA,EACA,UAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF,CAAM,KAAA;AACJ,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,2BACE,KAAA,CAAA,aAAA,CAAA,WAAA,EAAA,EAAY,IAAI,EAAE,eAAA,EAAiB,eAClC,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,EAAI,EAAA;AAAA,QACF,QAAU,EAAA,SAAA;AAAA,QACV,UAAY,EAAA,GAAA;AAAA,QACZ,CAAG,EAAA;AAAA;AACL,KAAA;AAAA,IAEC;AAAA,GAEH,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,EAAI,EAAA;AAAA,QACF,QAAU,EAAA,MAAA;AAAA,QACV,UAAY,EAAA,GAAA;AAAA,QACZ,CAAG,EAAA,MAAA;AAAA,QACH,EAAI,EAAA,KAAA;AAAA,QACJ,EAAI,EAAA,KAAA;AAAA,QACJ,OAAS,EAAA,aAAA;AAAA,QACT,eAAiB,EAAA,UAAA;AAAA,QACjB,KAAO,EAAA,OAAA;AAAA,QACP,eAAiB,EAAA,CAAA;AAAA,QACjB,QAAU,EAAA,QAAA;AAAA,QACV,YAAc,EAAA;AAAA;AAChB,KAAA;AAAA,IAEC;AAAA,GAEH,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAAA,IAAA;AAAA,MACX,OAAQ,EAAA,UAAA;AAAA,MACR,KAAM,EAAA,SAAA;AAAA,MACN,EAAI,EAAA,UAAA;AAAA,MACJ,MAAA;AAAA,MACA,YAAY,EAAA,SAAA;AAAA,MACZ,EAAI,EAAA;AAAA,QACF,OAAS,EAAA,CAAA,KAAA,KAAS,KAAM,CAAA,OAAA,CAAQ,GAAG,GAAG,CAAA;AAAA,QACtC,QAAU,EAAA;AAAA;AACZ,KAAA;AAAA,IAEC,UAAA;AAAA,IAAW,GAAA;AAAA,wCAAE,gBAAiB,EAAA,EAAA,KAAA,EAAO,EAAE,WAAA,EAAa,UAAY,EAAA;AAAA,GAErE,CACF,CAAA;AAEJ;;;;"}
|