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