djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Handle order extension mount points (#2055)

Browse source 
* Handle order extension mount points

* Add missing onClick to ButtonWithSelect component

* Update snapshots

* Fix ButtonWithSelect styles
This commit is contained in:
Jakub Majorek 2022-05-23 11:24:20 +02:00 committed by GitHub
parent 707c6b94a7
commit 0d4fecf8cd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 3574 additions and 186 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2339
introspection.json
View file

File diff suppressed because it is too large Load diff

733
schema.graphql
View file

File diff suppressed because it is too large Load diff

5
src/apps/useExtensions.ts
View file

@ -25,6 +25,11 @@ export const extensionMountPoints = {
AppExtensionMountEnum.PRODUCT_OVERVIEW_CREATE, AppExtensionMountEnum.PRODUCT_OVERVIEW_CREATE,
AppExtensionMountEnum.PRODUCT_OVERVIEW_MORE_ACTIONS AppExtensionMountEnum.PRODUCT_OVERVIEW_MORE_ACTIONS
], ],
ORDER_LIST: [
AppExtensionMountEnum.ORDER_OVERVIEW_CREATE,
AppExtensionMountEnum.ORDER_OVERVIEW_MORE_ACTIONS
],
ORDER_DETAILS: [AppExtensionMountEnum.ORDER_DETAILS_MORE_ACTIONS],
PRODUCT_DETAILS: [AppExtensionMountEnum.PRODUCT_DETAILS_MORE_ACTIONS], PRODUCT_DETAILS: [AppExtensionMountEnum.PRODUCT_DETAILS_MORE_ACTIONS],
NAVIGATION_SIDEBAR: [ NAVIGATION_SIDEBAR: [
AppExtensionMountEnum.NAVIGATION_CATALOG, AppExtensionMountEnum.NAVIGATION_CATALOG,

21
src/components/ButtonWithSelect/ButtonWithSelect.tsx
View file

@ -1,6 +1,7 @@
import { import {
ButtonGroup, ButtonGroup,
ButtonGroupProps, ButtonGroupProps,
ButtonProps,
ClickAwayListener, ClickAwayListener,
Grow, Grow,
MenuItem, MenuItem,
@ -21,15 +22,17 @@ interface Option {
} }
export interface ButtonWithSelectProps export interface ButtonWithSelectProps
extends Omit<ButtonGroupProps, "onClick"> { extends Omit<ButtonGroupProps, "onClick">,
Pick<ButtonProps, "onClick"> {
options: Option[]; options: Option[];
href: string; href?: string;
} }
export const ButtonWithSelect: React.FC<ButtonWithSelectProps> = ({ export const ButtonWithSelect: React.FC<ButtonWithSelectProps> = ({
options, options,
children, children,
href, href,
onClick,
...props ...props
}) => { }) => {
const [open, setOpen] = React.useState(false); const [open, setOpen] = React.useState(false);
@ -61,20 +64,20 @@ export const ButtonWithSelect: React.FC<ButtonWithSelectProps> = ({
return ( return (
<> <>
<ButtonGroup <ButtonGroup ref={anchorRef} aria-label="button with select" {...props}>
variant="contained" <Button
variant="primary"
color="primary" color="primary"
ref={anchorRef} onClick={onClick}
aria-label="button with select" href={href}
{...props} style={{ width: "100%" }}
> >
<Button variant="primary" href={href} style={{ width: "100%" }}>
{children} {children}
</Button> </Button>
{options.length > 0 && ( {options.length > 0 && (
<Button <Button
variant="primary"
color="primary" color="primary"
size="small"
aria-controls={open ? "button-with-select-menu" : undefined} aria-controls={open ? "button-with-select-menu" : undefined}
aria-expanded={open ? "true" : undefined} aria-expanded={open ? "true" : undefined}
aria-label="select different option" aria-label="select different option"

15
src/graphql/fragmentTypes.generated.ts
View file

@ -23,6 +23,12 @@
"GiftCardUpdated", "GiftCardUpdated",
"GiftCardDeleted", "GiftCardDeleted",
"GiftCardStatusChanged", "GiftCardStatusChanged",
"MenuCreated",
"MenuUpdated",
"MenuDeleted",
"MenuItemCreated",
"MenuItemUpdated",
"MenuItemDeleted",
"OrderCreated", "OrderCreated",
"OrderUpdated", "OrderUpdated",
"OrderConfirmed", "OrderConfirmed",
@ -64,8 +70,12 @@
"ShippingZoneCreated", "ShippingZoneCreated",
"ShippingZoneUpdated", "ShippingZoneUpdated",
"ShippingZoneDeleted", "ShippingZoneDeleted",
"TransactionActionRequest",
"TranslationCreated", "TranslationCreated",
"TranslationUpdated" "TranslationUpdated",
"VoucherCreated",
"VoucherUpdated",
"VoucherDeleted"
], ],
"Job": [ "Job": [
"AppInstallation", "AppInstallation",
@ -147,6 +157,8 @@
"StaffNotificationRecipient", "StaffNotificationRecipient",
"Stock", "Stock",
"Transaction", "Transaction",
"TransactionEvent",
"TransactionItem",
"User", "User",
"Voucher", "Voucher",
"VoucherChannelListing", "VoucherChannelListing",
@ -178,6 +190,7 @@
"ShippingMethod", "ShippingMethod",
"ShippingMethodType", "ShippingMethodType",
"ShippingZone", "ShippingZone",
"TransactionItem",
"User", "User",
"Voucher", "Voucher",
"Warehouse" "Warehouse"

203
src/graphql/typePolicies.generated.ts
View file

File diff suppressed because one or more lines are too long

239
src/graphql/types.generated.ts
View file

File diff suppressed because one or more lines are too long

18
src/orders/components/OrderDetailsPage/OrderDetailsPage.tsx
View file

@ -1,4 +1,9 @@
import { Typography } from "@material-ui/core"; import { Typography } from "@material-ui/core";
import {
extensionMountPoints,
mapToMenuItems,
useExtensions
} from "@saleor/apps/useExtensions";
import { Backlink } from "@saleor/components/Backlink"; import { Backlink } from "@saleor/components/Backlink";
import CardMenu from "@saleor/components/CardMenu"; import CardMenu from "@saleor/components/CardMenu";
import { CardSpacer } from "@saleor/components/CardSpacer"; import { CardSpacer } from "@saleor/components/CardSpacer";
@ -216,6 +221,12 @@ const OrderDetailsPage: React.FC<OrderDetailsPageProps> = props => {
} }
]); ]);
const { ORDER_DETAILS_MORE_ACTIONS } = useExtensions(
extensionMountPoints.ORDER_DETAILS
);
const extensionMenuItems = mapToMenuItems(ORDER_DETAILS_MORE_ACTIONS);
return ( return (
<Form confirmLeave initial={initial} onSubmit={handleSubmit}> <Form confirmLeave initial={initial} onSubmit={handleSubmit}>
{({ change, data, submit }) => { {({ change, data, submit }) => {
@ -230,7 +241,12 @@ const OrderDetailsPage: React.FC<OrderDetailsPageProps> = props => {
className={classes.header} className={classes.header}
inline inline
title={<Title order={order} />} title={<Title order={order} />}
cardMenu={<CardMenu outlined menuItems={selectCardMenuItems} />} cardMenu={
<CardMenu
outlined
menuItems={[...selectCardMenuItems, ...extensionMenuItems]}
/>
}
/> />
<div className={classes.date}> <div className={classes.date}>
{order && order.created ? ( {order && order.created ? (

24
src/orders/components/OrderListPage/OrderListPage.tsx
View file

@ -1,5 +1,10 @@
import { Card } from "@material-ui/core"; import { Card } from "@material-ui/core";
import { Button } from "@saleor/components/Button"; import {
extensionMountPoints,
mapToMenuItems,
useExtensions
} from "@saleor/apps/useExtensions";
import { ButtonWithSelect } from "@saleor/components/ButtonWithSelect";
import CardMenu from "@saleor/components/CardMenu"; import CardMenu from "@saleor/components/CardMenu";
import Container from "@saleor/components/Container"; import Container from "@saleor/components/Container";
import FilterBar from "@saleor/components/FilterBar"; import FilterBar from "@saleor/components/FilterBar";
@ -66,6 +71,12 @@ const OrderListPage: React.FC<OrderListPageProps> = ({
const filterStructure = createFilterStructure(intl, filterOpts); const filterStructure = createFilterStructure(intl, filterOpts);
const limitsReached = isLimitReached(limits, "orders"); const limitsReached = isLimitReached(limits, "orders");
const { ORDER_OVERVIEW_CREATE, ORDER_OVERVIEW_MORE_ACTIONS } = useExtensions(
extensionMountPoints.ORDER_LIST
);
const extensionMenuItems = mapToMenuItems(ORDER_OVERVIEW_MORE_ACTIONS);
const extensionCreateButtonItems = mapToMenuItems(ORDER_OVERVIEW_CREATE);
return ( return (
<Container> <Container>
<PageHeader <PageHeader
@ -96,24 +107,25 @@ const OrderListPage: React.FC<OrderListPageProps> = ({
description: "button" description: "button"
}), }),
onSelect: onSettingsOpen onSelect: onSettingsOpen
} },
...extensionMenuItems
]} ]}
/> />
) )
} }
> >
<Button <ButtonWithSelect
disabled={limitsReached} disabled={limitsReached}
variant="primary" options={extensionCreateButtonItems}
onClick={onAdd}
data-test-id="create-order-button" data-test-id="create-order-button"
onClick={onAdd}
> >
<FormattedMessage <FormattedMessage
id="LshEVn" id="LshEVn"
defaultMessage="Create order" defaultMessage="Create order"
description="button" description="button"
/> />
</Button> </ButtonWithSelect>
</PageHeader> </PageHeader>
{limitsReached && <OrderLimitReached />} {limitsReached && <OrderLimitReached />}
<Card> <Card>

83
src/storybook/__snapshots__/Stories.test.ts.snap
View file

@ -141228,9 +141228,15 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
> >
230/500 orders 230/500 orders
</div> </div>
<button <div
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id" aria-label="button with select"
class="MuiButtonGroup-root-id"
data-test-id="create-order-button" data-test-id="create-order-button"
role="group"
>
<button
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButtonGroup-grouped-id MuiButtonGroup-groupedHorizontal-id MuiButtonGroup-groupedOutlined-id MuiButtonGroup-groupedOutlinedHorizontal-id MuiButtonGroup-groupedOutlined-id MuiButton-containedPrimary-id"
style="width:100%"
tabindex="0" tabindex="0"
type="button" type="button"
> >
@ -141243,6 +141249,7 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
</div> </div>
</div> </div>
</div> </div>
</div>
<div <div
class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id" class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
> >
@ -142909,10 +142916,16 @@ exports[`Storyshots Views / Orders / Order list limits reached 1`] = `
> >
500/500 orders 500/500 orders
</div> </div>
<button <div
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id" aria-label="button with select"
class="MuiButtonGroup-root-id"
data-test-id="create-order-button" data-test-id="create-order-button"
role="group"
>
<button
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButtonGroup-grouped-id MuiButtonGroup-groupedHorizontal-id MuiButtonGroup-groupedOutlined-id MuiButtonGroup-groupedOutlinedHorizontal-id MuiButtonGroup-groupedOutlined-id MuiButtonGroup-disabled-id MuiButton-containedPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
disabled="" disabled=""
style="width:100%"
tabindex="-1" tabindex="-1"
type="button" type="button"
> >
@ -142925,6 +142938,7 @@ exports[`Storyshots Views / Orders / Order list limits reached 1`] = `
</div> </div>
</div> </div>
</div> </div>
</div>
<div <div
class="MuiPaper-root-id MuiCard-root-id LimitReachedAlert-root-id Alert-root-id Alert-warning-id MuiPaper-elevation0-id MuiPaper-rounded-id" class="MuiPaper-root-id MuiCard-root-id LimitReachedAlert-root-id Alert-root-id Alert-warning-id MuiPaper-elevation0-id MuiPaper-rounded-id"
data-test="alert" data-test="alert"
@ -144670,9 +144684,15 @@ exports[`Storyshots Views / Orders / Order list loading 1`] = `
> >
230/500 orders 230/500 orders
</div> </div>
<button <div
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id" aria-label="button with select"
class="MuiButtonGroup-root-id"
data-test-id="create-order-button" data-test-id="create-order-button"
role="group"
>
<button
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButtonGroup-grouped-id MuiButtonGroup-groupedHorizontal-id MuiButtonGroup-groupedOutlined-id MuiButtonGroup-groupedOutlinedHorizontal-id MuiButtonGroup-groupedOutlined-id MuiButton-containedPrimary-id"
style="width:100%"
tabindex="0" tabindex="0"
type="button" type="button"
> >
@ -144685,6 +144705,7 @@ exports[`Storyshots Views / Orders / Order list loading 1`] = `
</div> </div>
</div> </div>
</div> </div>
</div>
<div <div
class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id" class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
> >
@ -145103,9 +145124,15 @@ exports[`Storyshots Views / Orders / Order list no limits 1`] = `
<div <div
class="PageHeader-root-id" class="PageHeader-root-id"
> >
<button <div
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id" aria-label="button with select"
class="MuiButtonGroup-root-id"
data-test-id="create-order-button" data-test-id="create-order-button"
role="group"
>
<button
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButtonGroup-grouped-id MuiButtonGroup-groupedHorizontal-id MuiButtonGroup-groupedOutlined-id MuiButtonGroup-groupedOutlinedHorizontal-id MuiButtonGroup-groupedOutlined-id MuiButton-containedPrimary-id"
style="width:100%"
tabindex="0" tabindex="0"
type="button" type="button"
> >
@ -145118,6 +145145,7 @@ exports[`Storyshots Views / Orders / Order list no limits 1`] = `
</div> </div>
</div> </div>
</div> </div>
</div>
<div <div
class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id" class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
> >
@ -146784,9 +146812,15 @@ exports[`Storyshots Views / Orders / Order list when no data 1`] = `
> >
230/500 orders 230/500 orders
</div> </div>
<button <div
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id" aria-label="button with select"
class="MuiButtonGroup-root-id"
data-test-id="create-order-button" data-test-id="create-order-button"
role="group"
>
<button
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButtonGroup-grouped-id MuiButtonGroup-groupedHorizontal-id MuiButtonGroup-groupedOutlined-id MuiButtonGroup-groupedOutlinedHorizontal-id MuiButtonGroup-groupedOutlined-id MuiButton-containedPrimary-id"
style="width:100%"
tabindex="0" tabindex="0"
type="button" type="button"
> >
@ -146799,6 +146833,7 @@ exports[`Storyshots Views / Orders / Order list when no data 1`] = `
</div> </div>
</div> </div>
</div> </div>
</div>
<div <div
class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id" class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
> >
@ -209853,13 +209888,13 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
</div> </div>
<div <div
aria-label="button with select" aria-label="button with select"
class="MuiButtonGroup-root-id MuiButtonGroup-contained-id" class="MuiButtonGroup-root-id"
data-test-id="add-product" data-test-id="add-product"
role="group" role="group"
> >
<a <a
aria-disabled="false" aria-disabled="false"
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButtonGroup-grouped-id MuiButtonGroup-groupedHorizontal-id MuiButtonGroup-groupedContained-id MuiButtonGroup-groupedContainedHorizontal-id MuiButtonGroup-groupedContainedPrimary-id MuiButton-containedPrimary-id" class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButtonGroup-grouped-id MuiButtonGroup-groupedHorizontal-id MuiButtonGroup-groupedOutlined-id MuiButtonGroup-groupedOutlinedHorizontal-id MuiButtonGroup-groupedOutlined-id MuiButton-containedPrimary-id"
href="/products/add" href="/products/add"
role="button" role="button"
style="width:100%" style="width:100%"
@ -212468,13 +212503,13 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
</div> </div>
<div <div
aria-label="button with select" aria-label="button with select"
class="MuiButtonGroup-root-id MuiButtonGroup-contained-id" class="MuiButtonGroup-root-id"
data-test-id="add-product" data-test-id="add-product"
role="group" role="group"
> >
<a <a
aria-disabled="true" aria-disabled="true"
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButtonGroup-grouped-id MuiButtonGroup-groupedHorizontal-id MuiButtonGroup-groupedContained-id MuiButtonGroup-groupedContainedHorizontal-id MuiButtonGroup-groupedContainedPrimary-id MuiButtonGroup-disabled-id MuiButton-containedPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id" class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButtonGroup-grouped-id MuiButtonGroup-groupedHorizontal-id MuiButtonGroup-groupedOutlined-id MuiButtonGroup-groupedOutlinedHorizontal-id MuiButtonGroup-groupedOutlined-id MuiButtonGroup-disabled-id MuiButton-containedPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
href="/products/add" href="/products/add"
role="button" role="button"
style="width:100%" style="width:100%"
@ -215162,13 +215197,13 @@ exports[`Storyshots Views / Products / Product list loading 1`] = `
</div> </div>
<div <div
aria-label="button with select" aria-label="button with select"
class="MuiButtonGroup-root-id MuiButtonGroup-contained-id" class="MuiButtonGroup-root-id"
data-test-id="add-product" data-test-id="add-product"
role="group" role="group"
> >
<a <a
aria-disabled="false" aria-disabled="false"
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButtonGroup-grouped-id MuiButtonGroup-groupedHorizontal-id MuiButtonGroup-groupedContained-id MuiButtonGroup-groupedContainedHorizontal-id MuiButtonGroup-groupedContainedPrimary-id MuiButton-containedPrimary-id" class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButtonGroup-grouped-id MuiButtonGroup-groupedHorizontal-id MuiButtonGroup-groupedOutlined-id MuiButtonGroup-groupedOutlinedHorizontal-id MuiButtonGroup-groupedOutlined-id MuiButton-containedPrimary-id"
href="/products/add" href="/products/add"
role="button" role="button"
style="width:100%" style="width:100%"
@ -215725,13 +215760,13 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
</div> </div>
<div <div
aria-label="button with select" aria-label="button with select"
class="MuiButtonGroup-root-id MuiButtonGroup-contained-id" class="MuiButtonGroup-root-id"
data-test-id="add-product" data-test-id="add-product"
role="group" role="group"
> >
<a <a
aria-disabled="false" aria-disabled="false"
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButtonGroup-grouped-id MuiButtonGroup-groupedHorizontal-id MuiButtonGroup-groupedContained-id MuiButtonGroup-groupedContainedHorizontal-id MuiButtonGroup-groupedContainedPrimary-id MuiButton-containedPrimary-id" class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButtonGroup-grouped-id MuiButtonGroup-groupedHorizontal-id MuiButtonGroup-groupedOutlined-id MuiButtonGroup-groupedOutlinedHorizontal-id MuiButtonGroup-groupedOutlined-id MuiButton-containedPrimary-id"
href="/products/add" href="/products/add"
role="button" role="button"
style="width:100%" style="width:100%"
@ -218340,13 +218375,13 @@ exports[`Storyshots Views / Products / Product list no data 1`] = `
</div> </div>
<div <div
aria-label="button with select" aria-label="button with select"
class="MuiButtonGroup-root-id MuiButtonGroup-contained-id" class="MuiButtonGroup-root-id"
data-test-id="add-product" data-test-id="add-product"
role="group" role="group"
> >
<a <a
aria-disabled="false" aria-disabled="false"
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButtonGroup-grouped-id MuiButtonGroup-groupedHorizontal-id MuiButtonGroup-groupedContained-id MuiButtonGroup-groupedContainedHorizontal-id MuiButtonGroup-groupedContainedPrimary-id MuiButton-containedPrimary-id" class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButtonGroup-grouped-id MuiButtonGroup-groupedHorizontal-id MuiButtonGroup-groupedOutlined-id MuiButtonGroup-groupedOutlinedHorizontal-id MuiButtonGroup-groupedOutlined-id MuiButton-containedPrimary-id"
href="/products/add" href="/products/add"
role="button" role="button"
style="width:100%" style="width:100%"
@ -218741,13 +218776,13 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
</div> </div>
<div <div
aria-label="button with select" aria-label="button with select"
class="MuiButtonGroup-root-id MuiButtonGroup-contained-id" class="MuiButtonGroup-root-id"
data-test-id="add-product" data-test-id="add-product"
role="group" role="group"
> >
<a <a
aria-disabled="false" aria-disabled="false"
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButtonGroup-grouped-id MuiButtonGroup-groupedHorizontal-id MuiButtonGroup-groupedContained-id MuiButtonGroup-groupedContainedHorizontal-id MuiButtonGroup-groupedContainedPrimary-id MuiButton-containedPrimary-id" class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButtonGroup-grouped-id MuiButtonGroup-groupedHorizontal-id MuiButtonGroup-groupedOutlined-id MuiButtonGroup-groupedOutlinedHorizontal-id MuiButtonGroup-groupedOutlined-id MuiButton-containedPrimary-id"
href="/products/add" href="/products/add"
role="button" role="button"
style="width:100%" style="width:100%"
@ -221356,13 +221391,13 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
</div> </div>
<div <div
aria-label="button with select" aria-label="button with select"
class="MuiButtonGroup-root-id MuiButtonGroup-contained-id" class="MuiButtonGroup-root-id"
data-test-id="add-product" data-test-id="add-product"
role="group" role="group"
> >
<a <a
aria-disabled="false" aria-disabled="false"
class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButtonGroup-grouped-id MuiButtonGroup-groupedHorizontal-id MuiButtonGroup-groupedContained-id MuiButtonGroup-groupedContainedHorizontal-id MuiButtonGroup-groupedContainedPrimary-id MuiButton-containedPrimary-id" class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButtonGroup-grouped-id MuiButtonGroup-groupedHorizontal-id MuiButtonGroup-groupedOutlined-id MuiButtonGroup-groupedOutlinedHorizontal-id MuiButtonGroup-groupedOutlined-id MuiButton-containedPrimary-id"
href="/products/add" href="/products/add"
role="button" role="button"
style="width:100%" style="width:100%"