particle-os/debian-image-builder-frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Blueprints: Make Blueprints! alert dismissible

Browse source 
Fixes #1804

This adds a close button to the Blueprints! alert, making it dismissible.
This commit is contained in:
regexowl 2024-03-15 13:36:52 +01:00 • committed by Lucas Garfield
parent 465527bda0
commit ea7f7168ab
1 changed files with 28 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

39
src/Components/LandingPage/NewAlert.tsx
View file

@ -1,16 +1,33 @@
import React from 'react';
import React, { useState } from 'react';
import { Alert, Text } from '@patternfly/react-core';
import { Alert, AlertActionCloseButton, Text } from '@patternfly/react-core';
export const NewAlert = () => {
return (
<Alert title="New in Images: Blueprints!">
<Text>
Blueprints make it easier for you to manage your images. Images expire
after two weeks, but blueprints last forever. Create a blueprint for
your “golden image”, modify it over time as your needs change, and use
it to build and deploy images on demand.
</Text>
</Alert>
const isAlertDismissed = window.localStorage.getItem(
'imageBuilder.alertDismissed'
);
const [displayAlert, setDisplayAlert] = useState(!isAlertDismissed);
const dismissAlert = () => {
setDisplayAlert(false);
window.localStorage.setItem('imageBuilder.alertDismissed', 'true');
};
if (displayAlert) {
return (
<Alert
title="New in Images: Blueprints!"
actionClose={<AlertActionCloseButton onClose={dismissAlert} />}
>
<Text>
Blueprints make it easier for you to manage your images. Images expire
after two weeks, but blueprints last forever. Create a blueprint for
your “golden image”, modify it over time as your needs change, and use
it to build and deploy images on demand.
</Text>
</Alert>
);
} else {
return;
}
};