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

chore(web): improve product selection #1328

Merged
merged 6 commits into from
Jun 13, 2024
Merged

chore(web): improve product selection #1328

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
4980bcd
web: do not preselect a product
joseivanlopez Jun 13, 2024
14ba857
web: add layout to product progress
joseivanlopez Jun 13, 2024
750eeb0
web: fix product routes
joseivanlopez Jun 13, 2024
55fa988
web: fix scope
joseivanlopez Jun 13, 2024
7af5751
web: show installer options
joseivanlopez Jun 13, 2024
127bb7a
web: fix software overview
joseivanlopez 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
2 changes: 1 addition & 1 deletion web/src/components/overview/OverviewPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ import SoftwareSection from "./SoftwareSection";
import { _ } from "~/i18n";

const SCOPE_HEADERS = {
user: _("Users"),
users: _("Users"),
joseivanlopez marked this conversation as resolved.
Show resolved Hide resolved
storage: _("Storage"),
software: _("Software")
};
Expand Down
84 changes: 39 additions & 45 deletions web/src/components/product/ProductSelectionPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
import {
Card, CardBody,
Flex, FlexItem,
Flex,
Form,
Grid, GridItem,
Radio
Expand All @@ -46,7 +46,7 @@ function ProductSelectionPage() {
const navigate = useNavigate();
const { manager, product } = useInstallerClient();
const { products, selectedProduct } = useProduct();
const [nextProduct, setNextProduct] = useState(selectedProduct || products[0]);
const [nextProduct, setNextProduct] = useState(selectedProduct);

const onSubmit = async (e) => {
e.preventDefault();
Expand All @@ -72,50 +72,44 @@ function ProductSelectionPage() {
);
};

const isSelectionDisabled = !nextProduct || (nextProduct === selectedProduct);

return (
<>
<Page.MainContent>
<Center>
<Form id="productSelectionForm" onSubmit={onSubmit}>
<Grid hasGutter>
{products.map((product, index) => (
<Item key={index}>
<Card key={index} isRounded>
<CardBody>
<Radio
key={index}
name="product"
id={product.name}
label={<Label>{product.name}</Label>}
body={product.description}
isChecked={nextProduct === product}
onChange={() => setNextProduct(product)}
/>
</CardBody>
</Card>
</Item>
))}
<Item>
<Flex>
<FlexItem align={{ default: 'alignRight' }}>
{selectedProduct && <Page.CancelAction navigateTo={-1} />}
</FlexItem>
<FlexItem>
<Page.Action
type="submit"
form="productSelectionForm"
isDisabled={selectedProduct === nextProduct}
>
{_("Select")}
</Page.Action>
</FlexItem>
</Flex>
</Item>
</Grid>
</Form>
</Center>
</Page.MainContent>
</>
<Center>
<Form id="productSelectionForm" onSubmit={onSubmit}>
<Grid hasGutter>
{products.map((product, index) => (
<Item key={index}>
<Card key={index} isRounded>
<CardBody>
<Radio
key={index}
name="product"
id={product.name}
label={<Label>{product.name}</Label>}
body={product.description}
isChecked={nextProduct === product}
onChange={() => setNextProduct(product)}
/>
</CardBody>
</Card>
</Item>
))}
<Item>
<Flex justifyContent={{ default: "justifyContentFlexEnd" }}>
{selectedProduct && <Page.CancelAction navigateTo={-1} />}
<Page.Action
type="submit"
form="productSelectionForm"
isDisabled={isSelectionDisabled}
>
{_("Select")}
</Page.Action>
</Flex>
</Item>
</Grid>
</Form>
</Center>
);
}

Expand Down
43 changes: 23 additions & 20 deletions web/src/components/product/ProductSelectionProgress.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ import {

import { _ } from "~/i18n";
import { Center } from "~/components/layout";
import SimpleLayout from "~/SimpleLayout";
import { useCancellablePromise } from "~/utils";
import { useInstallerClient } from "~/context/installer";
import { useProduct } from "~/context/product";
Expand Down Expand Up @@ -136,26 +137,28 @@ function ProductSelectionProgress() {
}, [cancellablePromise, setSoftwareProgress, software]);

return (
<Center style={{ blockSize: "100vh" }}>
<Grid hasGutter>
<GridItem sm={8} smOffset={2}>
<Card isPlain>
<CardBody>
<Stack hasGutter>
<h1 style={{ textAlign: "center" }}>
{_("Configuring the product, please wait ...")}
</h1>
<Progress
selectedProduct={selectedProduct}
storageProgress={storageProgress}
softwareProgress={softwareProgress}
/>
</Stack>
</CardBody>
</Card>
</GridItem>
</Grid>
</Center>
<SimpleLayout showOutlet={false} showInstallerOptions={false}>
joseivanlopez marked this conversation as resolved.
Show resolved Hide resolved
<Center>
<Grid hasGutter>
<GridItem sm={8} smOffset={2}>
<Card isPlain>
<CardBody>
<Stack hasGutter>
<h1 style={{ textAlign: "center" }}>
{_("Configuring the product, please wait ...")}
</h1>
<Progress
selectedProduct={selectedProduct}
storageProgress={storageProgress}
softwareProgress={softwareProgress}
/>
</Stack>
</CardBody>
</Card>
</GridItem>
</Grid>
</Center>
</SimpleLayout>
);
}

Expand Down
32 changes: 4 additions & 28 deletions web/src/components/product/routes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,37 +20,13 @@
*/

import React from "react";
import { Page } from "~/components/core";
import ProductSelectionPage from "./ProductSelectionPage";
import ProductRegistrationPage from "./ProductRegistrationPage";
import { _ } from "~/i18n";

const registerRoute = {
path: "/product/register",
element: <Page />,
handle: {
name: _("Product registration"),
icon: "inventory_2",
hidden: true
},
children: [
{
index: true,
element: <ProductRegistrationPage />
}
]
};

const selectionRoute = {
path: "/product/select",
element: <ProductSelectionPage />,
handle: {
name: _("Product selection"),
icon: "inventory_2"
}
const productsRoute = {
path: "/products",
element: <ProductSelectionPage />
};

export {
registerRoute,
selectionRoute,
productsRoute
};
19 changes: 4 additions & 15 deletions web/src/router.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,29 +25,24 @@ import App from "~/App";
import Protected from "~/Protected";
import MainLayout from "~/MainLayout";
import SimpleLayout from "./SimpleLayout";
import { Page, LoginPage } from "~/components/core";
import { LoginPage } from "~/components/core";
import { OverviewPage } from "~/components/overview";
import { ProductRegistrationPage, ProductSelectionPage } from "~/components/product";
import { _ } from "~/i18n";
import overviewRoutes from "~/components/overview/routes";
import l10nRoutes from "~/components/l10n/routes";
import networkRoutes from "~/components/network/routes";
import { productsRoute } from "~/components/product/routes";
import storageRoutes from "~/components/storage/routes";
import softwareRoutes from "~/components/software/routes";
import usersRoutes from "~/components/users/routes";
import {
registerRoute as productRegistrationRoute,
selectionRoute as productSelectionRoute
} from "~/components/product/routes";

const rootRoutes = [
overviewRoutes,
l10nRoutes,
networkRoutes,
storageRoutes,
softwareRoutes,
usersRoutes,
productRegistrationRoute
usersRoutes
];

const protectedRoutes = [
Expand All @@ -67,13 +62,7 @@ const protectedRoutes = [
},
{
element: <SimpleLayout />,
children: [
{
path: "products",
element: <ProductSelectionPage />
},
productSelectionRoute
]
children: [productsRoute]
}
]
}
Expand Down
Loading