@red-hat-developer-hub/backstage-plugin-global-header 1.7.0 → 1.7.2
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
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# @red-hat-developer-hub/backstage-plugin-global-header
|
|
2
2
|
|
|
3
|
+
## 1.7.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- e1914ce: Updated dependency `@scalprum/react-core` to `0.9.5`.
|
|
8
|
+
|
|
9
|
+
## 1.7.1
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- d2711c4: fix global-header to prioritize 'spec.profile.displayname' or 'metadata.title' over profilename
|
|
14
|
+
|
|
3
15
|
## 1.7.0
|
|
4
16
|
|
|
5
17
|
### Minor Changes
|
|
@@ -1,5 +1,7 @@
|
|
|
1
|
-
import React, {
|
|
1
|
+
import React, { useState, useRef, useEffect, useMemo } from 'react';
|
|
2
2
|
import { useUserProfile } from '@backstage/plugin-user-settings';
|
|
3
|
+
import { useApi } from '@backstage/core-plugin-api';
|
|
4
|
+
import { catalogApiRef } from '@backstage/plugin-catalog-react';
|
|
3
5
|
import AccountCircleOutlinedIcon from '@mui/icons-material/AccountCircleOutlined';
|
|
4
6
|
import KeyboardArrowDownOutlinedIcon from '@mui/icons-material/KeyboardArrowDownOutlined';
|
|
5
7
|
import Avatar from '@mui/material/Avatar';
|
|
@@ -13,7 +15,14 @@ import { useDropdownManager } from '../../hooks/useDropdownManager.esm.js';
|
|
|
13
15
|
|
|
14
16
|
const ProfileDropdown = ({ layout }) => {
|
|
15
17
|
const { anchorEl, handleOpen, handleClose } = useDropdownManager();
|
|
16
|
-
const
|
|
18
|
+
const [user, setUser] = useState();
|
|
19
|
+
const {
|
|
20
|
+
displayName,
|
|
21
|
+
backstageIdentity,
|
|
22
|
+
profile,
|
|
23
|
+
loading: profileLoading
|
|
24
|
+
} = useUserProfile();
|
|
25
|
+
const catalogApi = useApi(catalogApiRef);
|
|
17
26
|
const profileDropdownMountPoints = useProfileDropdownMountPoints();
|
|
18
27
|
const headerRef = useRef(null);
|
|
19
28
|
const [bgColor, setBgColor] = useState("#3C3F42");
|
|
@@ -32,6 +41,24 @@ const ProfileDropdown = ({ layout }) => {
|
|
|
32
41
|
setBgColor(lighten(baseColor, 0.2));
|
|
33
42
|
}
|
|
34
43
|
}, []);
|
|
44
|
+
useEffect(() => {
|
|
45
|
+
const fetchUserEntity = async () => {
|
|
46
|
+
let userProfile;
|
|
47
|
+
try {
|
|
48
|
+
if (backstageIdentity?.userEntityRef) {
|
|
49
|
+
userProfile = await catalogApi.getEntityByRef(
|
|
50
|
+
backstageIdentity.userEntityRef
|
|
51
|
+
);
|
|
52
|
+
}
|
|
53
|
+
setUser(
|
|
54
|
+
userProfile?.spec?.profile?.displayName ?? userProfile?.metadata?.title
|
|
55
|
+
);
|
|
56
|
+
} catch (_err) {
|
|
57
|
+
setUser(null);
|
|
58
|
+
}
|
|
59
|
+
};
|
|
60
|
+
fetchUserEntity();
|
|
61
|
+
}, [backstageIdentity, catalogApi]);
|
|
35
62
|
const menuItems = useMemo(() => {
|
|
36
63
|
return (profileDropdownMountPoints ?? []).map((mp) => ({
|
|
37
64
|
Component: mp.Component,
|
|
@@ -44,10 +71,18 @@ const ProfileDropdown = ({ layout }) => {
|
|
|
44
71
|
if (menuItems.length === 0) {
|
|
45
72
|
return null;
|
|
46
73
|
}
|
|
74
|
+
const profileDisplayName = () => {
|
|
75
|
+
const name = user ?? displayName;
|
|
76
|
+
const regex = /^[^:/]+:[^/]+\/[^/]+$/;
|
|
77
|
+
if (regex.test(name)) {
|
|
78
|
+
return name.charAt(name.indexOf("/") + 1).toLocaleUpperCase("en-US").concat(name.substring(name.indexOf("/") + 2));
|
|
79
|
+
}
|
|
80
|
+
return name;
|
|
81
|
+
};
|
|
47
82
|
return /* @__PURE__ */ React.createElement(
|
|
48
83
|
HeaderDropdownComponent,
|
|
49
84
|
{
|
|
50
|
-
buttonContent: /* @__PURE__ */ React.createElement(Box, { sx: { display: "flex", alignItems: "center", ...layout } },
|
|
85
|
+
buttonContent: /* @__PURE__ */ React.createElement(Box, { sx: { display: "flex", alignItems: "center", ...layout } }, !profileLoading && /* @__PURE__ */ React.createElement(React.Fragment, null, profile.picture ? /* @__PURE__ */ React.createElement(
|
|
51
86
|
Avatar,
|
|
52
87
|
{
|
|
53
88
|
src: profile.picture,
|
|
@@ -64,7 +99,7 @@ const ProfileDropdown = ({ layout }) => {
|
|
|
64
99
|
mr: "1rem"
|
|
65
100
|
}
|
|
66
101
|
},
|
|
67
|
-
|
|
102
|
+
profileDisplayName()
|
|
68
103
|
)), /* @__PURE__ */ React.createElement(
|
|
69
104
|
KeyboardArrowDownOutlinedIcon,
|
|
70
105
|
{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProfileDropdown.esm.js","sources":["../../../src/components/HeaderDropdownComponent/ProfileDropdown.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, { useEffect, useMemo, useRef, useState } from 'react';\nimport { useUserProfile } from '@backstage/plugin-user-settings';\nimport AccountCircleOutlinedIcon from '@mui/icons-material/AccountCircleOutlined';\nimport KeyboardArrowDownOutlinedIcon from '@mui/icons-material/KeyboardArrowDownOutlined';\nimport Avatar from '@mui/material/Avatar';\nimport Typography from '@mui/material/Typography';\nimport { lighten } from '@mui/material/styles';\nimport Box from '@mui/material/Box';\nimport { MenuSection } from './MenuSection';\nimport { HeaderDropdownComponent } from './HeaderDropdownComponent';\nimport { useProfileDropdownMountPoints } from '../../hooks/useProfileDropdownMountPoints';\nimport { useDropdownManager } from '../../hooks';\n\n/**\n * @public\n * Props for Profile Dropdown\n */\nexport interface ProfileDropdownProps {\n layout?: React.CSSProperties;\n}\n\nexport const ProfileDropdown = ({ layout }: ProfileDropdownProps) => {\n const { anchorEl, handleOpen, handleClose } = useDropdownManager();\n const {
|
|
1
|
+
{"version":3,"file":"ProfileDropdown.esm.js","sources":["../../../src/components/HeaderDropdownComponent/ProfileDropdown.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, { useEffect, useMemo, useRef, useState } from 'react';\nimport { useUserProfile } from '@backstage/plugin-user-settings';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { catalogApiRef } from '@backstage/plugin-catalog-react';\nimport { UserEntity } from '@backstage/catalog-model';\nimport AccountCircleOutlinedIcon from '@mui/icons-material/AccountCircleOutlined';\nimport KeyboardArrowDownOutlinedIcon from '@mui/icons-material/KeyboardArrowDownOutlined';\nimport Avatar from '@mui/material/Avatar';\nimport Typography from '@mui/material/Typography';\nimport { lighten } from '@mui/material/styles';\nimport Box from '@mui/material/Box';\n\nimport { MenuSection } from './MenuSection';\nimport { HeaderDropdownComponent } from './HeaderDropdownComponent';\nimport { useProfileDropdownMountPoints } from '../../hooks/useProfileDropdownMountPoints';\nimport { useDropdownManager } from '../../hooks';\n\n/**\n * @public\n * Props for Profile Dropdown\n */\nexport interface ProfileDropdownProps {\n layout?: React.CSSProperties;\n}\n\nexport const ProfileDropdown = ({ layout }: ProfileDropdownProps) => {\n const { anchorEl, handleOpen, handleClose } = useDropdownManager();\n const [user, setUser] = useState<string | null>();\n const {\n displayName,\n backstageIdentity,\n profile,\n loading: profileLoading,\n } = useUserProfile();\n const catalogApi = useApi(catalogApiRef);\n\n const profileDropdownMountPoints = useProfileDropdownMountPoints();\n\n const headerRef = useRef<HTMLElement | null>(null);\n const [bgColor, setBgColor] = useState('#3C3F42');\n\n useEffect(() => {\n if (headerRef.current) {\n const computedStyle = window.getComputedStyle(headerRef.current);\n const baseColor = computedStyle.backgroundColor;\n setBgColor(lighten(baseColor, 0.2));\n }\n }, []);\n\n useEffect(() => {\n const container = document.getElementById('global-header');\n if (container) {\n const computedStyle = window.getComputedStyle(container);\n const baseColor = computedStyle.backgroundColor;\n setBgColor(lighten(baseColor, 0.2));\n }\n }, []);\n\n useEffect(() => {\n const fetchUserEntity = async () => {\n let userProfile;\n try {\n if (backstageIdentity?.userEntityRef) {\n userProfile = (await catalogApi.getEntityByRef(\n backstageIdentity.userEntityRef,\n )) as unknown as UserEntity;\n }\n setUser(\n userProfile?.spec?.profile?.displayName ??\n userProfile?.metadata?.title,\n );\n } catch (_err) {\n setUser(null);\n }\n };\n\n fetchUserEntity();\n }, [backstageIdentity, catalogApi]);\n\n const menuItems = useMemo(() => {\n return (profileDropdownMountPoints ?? [])\n .map(mp => ({\n Component: mp.Component,\n icon: mp.config?.props?.icon ?? '',\n label: mp.config?.props?.title ?? '',\n link: mp.config?.props?.link ?? '',\n priority: mp.config?.priority ?? 0,\n }))\n .sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));\n }, [profileDropdownMountPoints]);\n\n if (menuItems.length === 0) {\n return null;\n }\n\n const profileDisplayName = () => {\n const name = user ?? displayName;\n const regex = /^[^:/]+:[^/]+\\/[^/]+$/;\n if (regex.test(name)) {\n return name\n .charAt(name.indexOf('/') + 1)\n .toLocaleUpperCase('en-US')\n .concat(name.substring(name.indexOf('/') + 2));\n }\n return name;\n };\n\n return (\n <HeaderDropdownComponent\n buttonContent={\n <Box sx={{ display: 'flex', alignItems: 'center', ...layout }}>\n {!profileLoading && (\n <>\n {profile.picture ? (\n <Avatar\n src={profile.picture}\n sx={{ mr: 2, height: '32px', width: '32px' }}\n alt=\"Profile picture\"\n />\n ) : (\n <AccountCircleOutlinedIcon fontSize=\"small\" sx={{ mr: 1 }} />\n )}\n <Typography\n variant=\"body2\"\n sx={{\n display: { xs: 'none', md: 'block' },\n fontWeight: 500,\n mr: '1rem',\n }}\n >\n {profileDisplayName()}\n </Typography>\n </>\n )}\n <KeyboardArrowDownOutlinedIcon\n sx={{\n bgcolor: bgColor,\n borderRadius: '25%',\n }}\n />\n </Box>\n }\n buttonProps={{\n color: 'inherit',\n sx: {\n display: 'flex',\n alignItems: 'center',\n },\n }}\n onOpen={handleOpen}\n onClose={handleClose}\n anchorEl={anchorEl}\n >\n <MenuSection hideDivider items={menuItems} handleClose={handleClose} />\n </HeaderDropdownComponent>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAyCO,MAAM,eAAkB,GAAA,CAAC,EAAE,MAAA,EAAmC,KAAA;AACnE,EAAA,MAAM,EAAE,QAAA,EAAU,UAAY,EAAA,WAAA,KAAgB,kBAAmB,EAAA;AACjE,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,QAAwB,EAAA;AAChD,EAAM,MAAA;AAAA,IACJ,WAAA;AAAA,IACA,iBAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAS,EAAA;AAAA,MACP,cAAe,EAAA;AACnB,EAAM,MAAA,UAAA,GAAa,OAAO,aAAa,CAAA;AAEvC,EAAA,MAAM,6BAA6B,6BAA8B,EAAA;AAEjE,EAAM,MAAA,SAAA,GAAY,OAA2B,IAAI,CAAA;AACjD,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAS,SAAS,CAAA;AAEhD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,UAAU,OAAS,EAAA;AACrB,MAAA,MAAM,aAAgB,GAAA,MAAA,CAAO,gBAAiB,CAAA,SAAA,CAAU,OAAO,CAAA;AAC/D,MAAA,MAAM,YAAY,aAAc,CAAA,eAAA;AAChC,MAAW,UAAA,CAAA,OAAA,CAAQ,SAAW,EAAA,GAAG,CAAC,CAAA;AAAA;AACpC,GACF,EAAG,EAAE,CAAA;AAEL,EAAA,SAAA,CAAU,MAAM;AACd,IAAM,MAAA,SAAA,GAAY,QAAS,CAAA,cAAA,CAAe,eAAe,CAAA;AACzD,IAAA,IAAI,SAAW,EAAA;AACb,MAAM,MAAA,aAAA,GAAgB,MAAO,CAAA,gBAAA,CAAiB,SAAS,CAAA;AACvD,MAAA,MAAM,YAAY,aAAc,CAAA,eAAA;AAChC,MAAW,UAAA,CAAA,OAAA,CAAQ,SAAW,EAAA,GAAG,CAAC,CAAA;AAAA;AACpC,GACF,EAAG,EAAE,CAAA;AAEL,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,kBAAkB,YAAY;AAClC,MAAI,IAAA,WAAA;AACJ,MAAI,IAAA;AACF,QAAA,IAAI,mBAAmB,aAAe,EAAA;AACpC,UAAA,WAAA,GAAe,MAAM,UAAW,CAAA,cAAA;AAAA,YAC9B,iBAAkB,CAAA;AAAA,WACpB;AAAA;AAEF,QAAA,OAAA;AAAA,UACE,WAAa,EAAA,IAAA,EAAM,OAAS,EAAA,WAAA,IAC1B,aAAa,QAAU,EAAA;AAAA,SAC3B;AAAA,eACO,IAAM,EAAA;AACb,QAAA,OAAA,CAAQ,IAAI,CAAA;AAAA;AACd,KACF;AAEA,IAAgB,eAAA,EAAA;AAAA,GACf,EAAA,CAAC,iBAAmB,EAAA,UAAU,CAAC,CAAA;AAElC,EAAM,MAAA,SAAA,GAAY,QAAQ,MAAM;AAC9B,IAAA,OAAA,CAAQ,0BAA8B,IAAA,EACnC,EAAA,GAAA,CAAI,CAAO,EAAA,MAAA;AAAA,MACV,WAAW,EAAG,CAAA,SAAA;AAAA,MACd,IAAM,EAAA,EAAA,CAAG,MAAQ,EAAA,KAAA,EAAO,IAAQ,IAAA,EAAA;AAAA,MAChC,KAAO,EAAA,EAAA,CAAG,MAAQ,EAAA,KAAA,EAAO,KAAS,IAAA,EAAA;AAAA,MAClC,IAAM,EAAA,EAAA,CAAG,MAAQ,EAAA,KAAA,EAAO,IAAQ,IAAA,EAAA;AAAA,MAChC,QAAA,EAAU,EAAG,CAAA,MAAA,EAAQ,QAAY,IAAA;AAAA,KACnC,CAAE,CACD,CAAA,IAAA,CAAK,CAAC,CAAA,EAAG,CAAO,KAAA,CAAA,CAAA,CAAE,QAAY,IAAA,CAAA,KAAM,CAAE,CAAA,QAAA,IAAY,CAAE,CAAA,CAAA;AAAA,GACzD,EAAG,CAAC,0BAA0B,CAAC,CAAA;AAE/B,EAAI,IAAA,SAAA,CAAU,WAAW,CAAG,EAAA;AAC1B,IAAO,OAAA,IAAA;AAAA;AAGT,EAAA,MAAM,qBAAqB,MAAM;AAC/B,IAAA,MAAM,OAAO,IAAQ,IAAA,WAAA;AACrB,IAAA,MAAM,KAAQ,GAAA,uBAAA;AACd,IAAI,IAAA,KAAA,CAAM,IAAK,CAAA,IAAI,CAAG,EAAA;AACpB,MAAA,OAAO,KACJ,MAAO,CAAA,IAAA,CAAK,QAAQ,GAAG,CAAA,GAAI,CAAC,CAC5B,CAAA,iBAAA,CAAkB,OAAO,CACzB,CAAA,MAAA,CAAO,KAAK,SAAU,CAAA,IAAA,CAAK,QAAQ,GAAG,CAAA,GAAI,CAAC,CAAC,CAAA;AAAA;AAEjD,IAAO,OAAA,IAAA;AAAA,GACT;AAEA,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,uBAAA;AAAA,IAAA;AAAA,MACC,+BACG,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAI,EAAI,EAAA,EAAE,SAAS,MAAQ,EAAA,UAAA,EAAY,QAAU,EAAA,GAAG,QAClD,EAAA,EAAA,CAAC,cACA,oBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EACG,QAAQ,OACP,mBAAA,KAAA,CAAA,aAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,KAAK,OAAQ,CAAA,OAAA;AAAA,UACb,IAAI,EAAE,EAAA,EAAI,GAAG,MAAQ,EAAA,MAAA,EAAQ,OAAO,MAAO,EAAA;AAAA,UAC3C,GAAI,EAAA;AAAA;AAAA,OACN,mBAEC,KAAA,CAAA,aAAA,CAAA,yBAAA,EAAA,EAA0B,QAAS,EAAA,OAAA,EAAQ,IAAI,EAAE,EAAA,EAAI,CAAE,EAAA,EAAG,CAE7D,kBAAA,KAAA,CAAA,aAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,OAAQ,EAAA,OAAA;AAAA,UACR,EAAI,EAAA;AAAA,YACF,OAAS,EAAA,EAAE,EAAI,EAAA,MAAA,EAAQ,IAAI,OAAQ,EAAA;AAAA,YACnC,UAAY,EAAA,GAAA;AAAA,YACZ,EAAI,EAAA;AAAA;AACN,SAAA;AAAA,QAEC,kBAAmB;AAAA,OAExB,CAEF,kBAAA,KAAA,CAAA,aAAA;AAAA,QAAC,6BAAA;AAAA,QAAA;AAAA,UACC,EAAI,EAAA;AAAA,YACF,OAAS,EAAA,OAAA;AAAA,YACT,YAAc,EAAA;AAAA;AAChB;AAAA,OAEJ,CAAA;AAAA,MAEF,WAAa,EAAA;AAAA,QACX,KAAO,EAAA,SAAA;AAAA,QACP,EAAI,EAAA;AAAA,UACF,OAAS,EAAA,MAAA;AAAA,UACT,UAAY,EAAA;AAAA;AACd,OACF;AAAA,MACA,MAAQ,EAAA,UAAA;AAAA,MACR,OAAS,EAAA,WAAA;AAAA,MACT;AAAA,KAAA;AAAA,wCAEC,WAAY,EAAA,EAAA,WAAA,EAAW,IAAC,EAAA,KAAA,EAAO,WAAW,WAA0B,EAAA;AAAA,GACvE;AAEJ;;;;"}
|
package/dist/plugin.esm.js
CHANGED
|
@@ -13,13 +13,13 @@ import '@mui/material/Button';
|
|
|
13
13
|
import '@mui/material/IconButton';
|
|
14
14
|
import '@mui/material/Tooltip';
|
|
15
15
|
import '@backstage/plugin-user-settings';
|
|
16
|
+
import '@backstage/plugin-catalog-react';
|
|
16
17
|
import '@mui/icons-material/AccountCircleOutlined';
|
|
17
18
|
import '@mui/icons-material/KeyboardArrowDownOutlined';
|
|
18
19
|
import '@mui/material/Avatar';
|
|
19
20
|
import '@mui/material/Divider';
|
|
20
21
|
import '@backstage/core-components';
|
|
21
22
|
import '@mui/material/ListSubheader';
|
|
22
|
-
import '@backstage/plugin-catalog-react';
|
|
23
23
|
import '@backstage/plugin-search-react';
|
|
24
24
|
import '@mui/material/Autocomplete';
|
|
25
25
|
import 'react-router-dom';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@red-hat-developer-hub/backstage-plugin-global-header",
|
|
3
|
-
"version": "1.7.
|
|
3
|
+
"version": "1.7.2",
|
|
4
4
|
"main": "dist/index.esm.js",
|
|
5
5
|
"types": "dist/index.d.ts",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -52,7 +52,7 @@
|
|
|
52
52
|
"@mui/icons-material": "5.16.14",
|
|
53
53
|
"@mui/material": "5.16.14",
|
|
54
54
|
"@mui/styled-engine": "5.16.14",
|
|
55
|
-
"@scalprum/react-core": "0.9.
|
|
55
|
+
"@scalprum/react-core": "0.9.5",
|
|
56
56
|
"react-use": "^17.5.0"
|
|
57
57
|
},
|
|
58
58
|
"peerDependencies": {
|