hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Convert a class component to functional component

Browse Source 
Co-authored-by: Mikko Aspiala <mikko.aspiala@gmail.com>
Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>
This commit is contained in:
Janne Savolainen 2021-12-28 12:35:47 +02:00
parent 41aacb3db2
commit ab4a8c8a1d
No known key found for this signature in database
GPG Key ID: 5F465B5672372402
1 changed files with 90 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
src/renderer/components/+welcome/welcome.tsx
View File

@ -30,9 +30,7 @@ import { WelcomeBannerRegistry } from "../../../extensions/registries";
export const defaultWidth = 320;
@observer
export class Welcome extends React.Component {
render() {
export const Welcome: React.FC = observer(() => {
const welcomeBanner = WelcomeBannerRegistry.getInstance().getItems();
// if there is banner with specified width, use it to calculate the width of the container
@ -48,7 +46,10 @@ export class Welcome extends React.Component {
return (
<div className="flex justify-center Welcome align-center">
<div style={{ width: `${maxWidth}px` }} data-testid="welcome-banner-container">
<div
style={{ width: `${maxWidth}px` }}
data-testid="welcome-banner-container"
>
{welcomeBanner.length > 0 ? (
<Carousel
stopAutoPlayOnHover={true}
@ -67,26 +68,59 @@ export class Welcome extends React.Component {
}}
interval={8000}
>
{welcomeBanner.map((item, index) =>
<item.Banner key={index} />,
)}
{welcomeBanner.map((item, index) => (
<item.Banner key={index} />
))}
</Carousel>
) : <Icon svg="logo-lens" className="logo" />}
) : (
<Icon svg="logo-lens" className="logo" />
)}
<div className="flex justify-center">
<div style={{ width: `${defaultWidth}px` }} data-testid="welcome-text-container">
<div
style={{ width: `${defaultWidth}px` }}
data-testid="welcome-text-container"
>
<h2>Welcome to {productName} 5!</h2>
<p>
To get you started we have auto-detected your clusters in your kubeconfig file and added them to the catalog, your centralized view for managing all your cloud-native resources.
<br /><br />
If you have any questions or feedback, please join our <a href={slackUrl} target="_blank" rel="noreferrer" className="link">Lens Community slack channel</a>.
To get you started we have auto-detected your clusters in your
kubeconfig file and added them to the catalog, your centralized
view for managing all your cloud-native resources.
<br />
<br />
If you have any questions or feedback, please join our{" "}
<a
href={slackUrl}
target="_blank"
rel="noreferrer"
className="link"
>
Lens Community slack channel
</a>
.
</p>
<ul className="block" style={{ width: `${defaultWidth}px` }} data-testid="welcome-menu-container">
{WelcomeMenuRegistry.getInstance().getItems().map((item, index) => (
<li key={index} className="flex grid-12" onClick={() => item.click()}>
<Icon material={item.icon} className="box col-1" /> <a className="box col-10">{typeof item.title === "string" ? item.title : item.title()}</a> <Icon material="navigate_next" className="box col-1" />
<ul
className="block"
style={{ width: `${defaultWidth}px` }}
data-testid="welcome-menu-container"
>
{WelcomeMenuRegistry.getInstance()
.getItems()
.map((item, index) => (
<li
key={index}
className="flex grid-12"
onClick={() => item.click()}
>
<Icon material={item.icon} className="box col-1" />
<a className="box col-10">
{typeof item.title === "string"
? item.title
: item.title()}
</a>
<Icon material="navigate_next" className="box col-1" />
</li>
))}
</ul>
@ -95,5 +129,4 @@ export class Welcome extends React.Component {
</div>
</div>
);
}
}
});