Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(web): more UI adjustments #1326

Merged
merged 11 commits into from
Jun 13, 2024
Merged

fix(web): more UI adjustments #1326

Changes from 1 commit
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
6d8eb19
chore(web): adjust issues wording
imobachgs Jun 12, 2024
0028f24
Wrap loading component inside SimpleLayout
dgdavid Jun 12, 2024
b6fb5ba
Drop no longer used SVG
dgdavid Jun 12, 2024
afad85e
Force the sidebar width
dgdavid Jun 12, 2024
29198e2
Avoid reserving space for empty nodes
dgdavid Jun 12, 2024
05d8f4a
Minor changes in IpSettingsForm
dgdavid Jun 12, 2024
74f360b
Use Alert component for formatting issues in OverviewPage
dgdavid Jun 12, 2024
1f503e1
Merge branch 'change-wording' into new-ui-adjustments
dgdavid Jun 12, 2024
7e347ca
Add prop to SimpleLayout for displaying InstallerOptions
dgdavid Jun 12, 2024
47c74ae
web: Improve overview issues list
dgdavid Jun 13, 2024
745a2a2
web: use the proper heading level
dgdavid Jun 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 12 additions & 12 deletions web/src/components/overview/OverviewPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,14 +21,11 @@

import React, { useEffect, useState } from "react";
import {
Alert,
CardBody,
Grid,
GridItem,
Hint,
HintBody,
List,
ListItem,
Stack
Grid, GridItem,
Hint, HintBody,
Stack,
} from "@patternfly/react-core";
import { useProduct } from "~/context/product";
import { useInstallerClient } from "~/context/installer";
Expand All @@ -52,21 +49,24 @@ const IssuesList = ({ issues }) => {
Object.entries(scopes).forEach(([scope, issues]) => {
issues.forEach((issue, idx) => {
const link = (
<ListItem key={idx}>
<Link to={`/${scope}`}>{issue.description}</Link>
</ListItem>
<Alert
key={idx}
isInline
variant={issue.severity === "error" ? "warning" : "info"}
title={<Link to={`/${scope}`}>{issue.description}</Link>}
/>
);
list.push(link);
});
});

return (
<EmptyState
title={_("Before installing the system, you need to pay attention to the following tasks:")}
title={_("Before installing the system, you need to pay attention to the following tasks")}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This text changed here. If you want to drop the colon (:), I would replace it with a stop (.).

Having said that, I do not know if the empty state plus the alert might be too much.

Captura desde 2024-06-13 06-27-37

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Something went wrong from my side when merging the "adjust wording" commit here. Will check.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Having said that, I do not know if the empty state plus the alert might be too much.

Yes, it's too much. I was playing with a "NotificationDrawer" and also with some customs overrides, but I didn't found a convincing proposal yesterday. Let's try it again :)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed by picking up an idea I played yesterday and @joseivanlopez proposed this morning: using the PF/NotificationDrawer component. However, I've overwritten some styles to make it fit better in the overview page.

As disccussed offline, there is room for more improvements, but the current status should be enough for merging to master and continue from there.

Problems No problems
Screenshot from 2024-06-13 10-30-50 Screenshot from 2024-06-13 10-31-02

icon="error"
color="danger-color-100"
>
<List isPlain>{list}</List>
<Stack hasGutter>{list}</Stack>
</EmptyState>
);
};
Expand Down
Loading