Skip to content

Commit dfc984b

Browse files
its-mitesh-kumarits-mitesh-kumar
authored
feat(global-header): adding company logo component (#789)
* feat(global-header): adding company logo component * aliging image at center Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com> * addressing the comment Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com> * adding changeset file Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com> * updating api-report Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com> * updating app-config.dynamic Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com> * prettier fix Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com> * adding different logo Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com> * changing color of default icon Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com> * updating default logo for dark and light theme Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com> * removing unused code Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com> --------- Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com>
1 parent 593ed08 commit dfc984b

11 files changed

Lines changed: 456 additions & 3 deletions

File tree

‎workspaces/global-header/.changeset/green-pugs-refuse.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@red-hat-developer-hub/backstage-plugin-global-header': minor
3+
---
4+
5+
Added Company Logo component

‎workspaces/global-header/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
"lint": "backstage-cli repo lint --since origin/main",
2525
"lint:all": "backstage-cli repo lint",
2626
"prettier:check": "prettier --check .",
27+
"prettier:fix": "prettier --write .",
2728
"new": "backstage-cli new --scope @red-hat-developer-hub",
2829
"postinstall": "cd ../../ && yarn install"
2930
},

‎workspaces/global-header/plugins/global-header/app-config.dynamic.yaml‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,14 @@ dynamicPlugins:
66
- mountPoint: application/header
77
importName: GlobalHeader
88
config:
9-
position: above-main-content # above-main-content | below-main-content
9+
position: above-sidebar # above-main-content | above-sidebar
10+
11+
- mountPoint: global.header/component
12+
importName: CompanyLogo
13+
config:
14+
priority: 200
15+
props:
16+
to: '/'
1017

1118
- mountPoint: global.header/component
1219
importName: SearchComponent

‎workspaces/global-header/plugins/global-header/config.d.ts‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
/*
2+
* Copyright Red Hat, Inc.
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
import '@backstage/config';
18+
19+
declare module '@backstage/config' {
20+
interface Config {
21+
app?: {
22+
branding?: {
23+
/**
24+
* Base64 URI for the full logo
25+
* @visibility frontend
26+
*/
27+
fullLogo?: string;
28+
};
29+
};
30+
}
31+
}

‎workspaces/global-header/plugins/global-header/package.json‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@
6161
},
6262
"devDependencies": {
6363
"@backstage/cli": "^0.30.0",
64+
"@backstage/config": "^1.3.2",
6465
"@backstage/core-app-api": "^1.15.5",
6566
"@backstage/dev-utils": "^1.1.7",
6667
"@backstage/frontend-test-utils": "^0.2.6",
@@ -83,6 +84,8 @@
8384
],
8485
"files": [
8586
"app-config.dynamic.yaml",
86-
"dist"
87-
]
87+
"dist",
88+
"config.d.ts"
89+
],
90+
"configSchema": "config.d.ts"
8891
}

‎workspaces/global-header/plugins/global-header/report.api.md‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,22 @@ import { default as React_2 } from 'react';
1111
// @public
1212
export const ApplicationLauncherDropdown: () => React_2.JSX.Element;
1313

14+
// @public
15+
export const CompanyLogo: ({
16+
logo,
17+
to,
18+
}: CompanyLogoProps) => React_2.JSX.Element;
19+
20+
// @public (undocumented)
21+
export interface CompanyLogoProps {
22+
// (undocumented)
23+
layout?: React_2.CSSProperties;
24+
// (undocumented)
25+
logo?: string;
26+
// (undocumented)
27+
to?: string;
28+
}
29+
1430
// @public
1531
export const CreateDropdown: React_2.ComponentType<CreateDropdownProps>;
1632

‎workspaces/global-header/plugins/global-header/src/components/CompanyLogo/CompanyLogo.tsx‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
/*
2+
* Copyright Red Hat, Inc.
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
import React from 'react';
17+
import { Link } from '@backstage/core-components';
18+
import { configApiRef, useApi } from '@backstage/core-plugin-api';
19+
import DefaultLogo from './DefaultLogo';
20+
import Box from '@mui/material/Box';
21+
22+
const LogoRender = ({
23+
base64Logo,
24+
defaultLogo,
25+
}: {
26+
base64Logo: string | undefined;
27+
defaultLogo: React.JSX.Element;
28+
}) => {
29+
return base64Logo ? (
30+
<img
31+
data-testid="home-logo"
32+
src={base64Logo}
33+
alt="Home logo"
34+
style={{
35+
display: 'block',
36+
maxHeight: '40px',
37+
maxWidth: '150px',
38+
}}
39+
/>
40+
) : (
41+
defaultLogo
42+
);
43+
};
44+
45+
/**
46+
* @public
47+
*/
48+
export interface CompanyLogoProps {
49+
logo?: string;
50+
to?: string;
51+
layout?: React.CSSProperties;
52+
}
53+
54+
export const CompanyLogo = ({ logo, to = '/' }: CompanyLogoProps) => {
55+
const configApi = useApi(configApiRef);
56+
const logoFullBase64URI = configApi.getOptionalString(
57+
'app.branding.fullLogo',
58+
);
59+
return (
60+
<Box
61+
sx={{
62+
width: '224px',
63+
display: 'flex',
64+
justifyContent: 'flex-start',
65+
alignItems: 'center',
66+
}}
67+
>
68+
<Link
69+
to={to}
70+
underline="none"
71+
aria-label="Home"
72+
style={{
73+
display: 'flex',
74+
justifyContent: 'flex-start',
75+
alignItems: 'center',
76+
}}
77+
>
78+
<LogoRender
79+
base64Logo={logo ?? logoFullBase64URI}
80+
defaultLogo={<DefaultLogo />}
81+
/>
82+
</Link>
83+
</Box>
84+
);
85+
};

0 commit comments

Comments
 (0)