From 68477fd230c33fda32c806bf6dc097bb13c80433 Mon Sep 17 00:00:00 2001
From: Johanna Szepanski <johanna.szepanski@softhouse.se>
Date: Wed, 26 Feb 2025 15:15:39 +0100
Subject: [PATCH 1/5] migrated Dialog components
---
.../common/Dialog/{Dialog.jsx => Dialog.tsx} | 178 ++++++++++--------
src/components/common/Dialog/index.js | 7 -
src/components/common/Dialog/index.ts | 17 ++
3 files changed, 121 insertions(+), 81 deletions(-)
rename src/components/common/Dialog/{Dialog.jsx => Dialog.tsx} (73%)
delete mode 100644 src/components/common/Dialog/index.js
create mode 100644 src/components/common/Dialog/index.ts
diff --git a/src/components/common/Dialog/Dialog.jsx b/src/components/common/Dialog/Dialog.tsx
similarity index 73%
rename from src/components/common/Dialog/Dialog.jsx
rename to src/components/common/Dialog/Dialog.tsx
index c002e0c9..377a1a3f 100644
--- a/src/components/common/Dialog/Dialog.jsx
+++ b/src/components/common/Dialog/Dialog.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useState } from "react";
+import { ReactNode, useCallback, useState } from "react";
import {
Button,
Dialog as MuiDialog,
@@ -13,52 +13,47 @@ import {
Grid,
TextField,
LinearProgress,
- Alert
+ Alert,
+ DialogProps as DialogPropsMUI
} from "@mui/material";
import CloseIcon from "@mui/icons-material/Close";
-/**
- * The title component for an ESS dialog, featuring a text/custom area and a close button
- * nestled inside a colored box.
- */
-const DialogTitle = styled(({ onClose, className, children }) => {
- return (
- <Stack
- className={className}
- flexDirection="row"
- justifyContent="space-between"
- alignItems="center"
- backgroundColor="primary.main"
- color="essWhite.main"
- paddingX={2}
- paddingY={1}
- >
- {typeof children === "string" ? (
- <Typography>{children}</Typography>
- ) : (
- <>{children}</>
- )}
- <IconButton
- variant="outlined"
- onClick={onClose}
- aria-label="Close Dialog"
- edge="end"
- >
- <CloseIcon
- fontSize="medium"
- color="essWhite"
- />
- </IconButton>
- </Stack>
- );
-})({});
+interface DialogTitleProps {
+ onClose: () => void;
+ className?: string;
+ children: ReactNode | string;
+}
-/**
- * @name renderActionsCallback
- * @function
- * @param {function} onClose - callback fired when the component requests to be closed
- * @returns {object} JSX component
- */
+const DialogTitle = ({ onClose, className, children }: DialogTitleProps) => (
+ <Stack
+ className={className}
+ flexDirection="row"
+ justifyContent="space-between"
+ alignItems="center"
+ sx={{
+ backgroundColor: "primary.main",
+ color: "essWhite.main",
+ paddingX: 2,
+ paddingY: 1
+ }}
+ >
+ {typeof children === "string" ? (
+ <Typography>{children}</Typography>
+ ) : (
+ <>{children}</>
+ )}
+ <IconButton
+ onClick={onClose}
+ aria-label="Close Dialog"
+ edge="end"
+ >
+ <CloseIcon
+ fontSize="medium"
+ sx={{ color: "essWhite.main" }}
+ />
+ </IconButton>
+ </Stack>
+);
/**
* A generic MUI Dialog stylized for ESS that provides:
@@ -76,23 +71,35 @@ const DialogTitle = styled(({ onClose, className, children }) => {
* @param {string|object} title - Title string or custom component
* @param {string|object} content - Content string or custom component
* @param {renderActionsCallback} renderActions - render function that receives the onClose callback and returns the dialog footer/actions
- * @param {boolean} open return true or false
* @param {function} onClose callback fired when the component requests to be closed
* @param {object} DialogProps MUI Dialog component props; this might be how you change the
* width of the modal via fullWidth=true, maxWidth="md", for example. See MUI documentation.
* @param {string} className containing css classname
*/
+
+export interface DialogProps {
+ title: string | ReactNode;
+ content: string | ReactNode;
+ open: boolean;
+ DialogProps?: DialogPropsMUI;
+ className?: string;
+ isLoading?: boolean;
+ error?: string;
+ onClose: () => void;
+ renderActions?: (onClose: () => void) => ReactNode;
+}
+
export const Dialog = ({
title,
content,
- renderActions,
open,
- onClose,
- DialogProps = {},
className,
isLoading,
- error
-}) => {
+ error,
+ DialogProps,
+ renderActions,
+ onClose
+}: DialogProps) => {
return (
<MuiDialog
open={open}
@@ -125,14 +132,22 @@ export const Dialog = ({
);
};
+interface ConfirmationDialogButtonsProps {
+ confirmText: string;
+ cancelText: string;
+ isConfirmDisabled?: boolean;
+ onConfirm: () => void;
+ onClose: () => void;
+}
+
const ConfirmationDialogButtons = styled(
({
- onConfirm,
- onClose,
confirmText,
cancelText,
- isConfirmDisabled = false
- }) => {
+ isConfirmDisabled = false,
+ onConfirm,
+ onClose
+ }: ConfirmationDialogButtonsProps) => {
const handleConfirm = useCallback(() => {
if (onConfirm) {
onConfirm();
@@ -187,23 +202,36 @@ const ConfirmationDialogButtons = styled(
* @param {string|object} props.title - Title string or custom component
* @param {string|object} props.content - Content string or custom component
* @param {renderActionsCallback} props.renderActions - render function that receives the onClose callback and returns the dialog footer/actions
- * @param {boolean} props.open return true or false
* @param {function} props.onClose callback fired when the component requests to be closed
* @param {object} props.DialogProps MUI Dialog component props; this might be how you change the
* width of the modal via fullWidth=true, maxWidth="md", for example. See MUI documentation.
* @param {string} props.className containing css classname
*/
+
+export interface ConfirmationDialogProps extends DialogProps {
+ confirmText?: string;
+ cancelText?: string;
+ isConfirmDisabled?: boolean;
+ onConfirm: () => void;
+}
+
export const ConfirmationDialog = styled(
({
+ title,
+ content,
+ open,
onConfirm,
onClose,
confirmText = "Yes",
cancelText = "No",
- isConfirmDisabled,
- ...props
- }) => {
+ isConfirmDisabled = false
+ }: ConfirmationDialogProps) => {
return (
<Dialog
+ title={title}
+ content={content}
+ open={open}
+ onClose={onClose}
renderActions={() => (
<ConfirmationDialogButtons
onConfirm={onConfirm}
@@ -213,28 +241,30 @@ export const ConfirmationDialog = styled(
isConfirmDisabled={isConfirmDisabled}
/>
)}
- onClose={onClose}
- {...props}
/>
);
}
)({});
-export const ConfirmDangerActionDialog = ({ ...props }) => {
- const {
- title,
- text,
- confirmText,
- valueToCheck,
- open,
- onClose,
- onConfirm,
- isLoading,
- error
- } = props;
+export interface ConfirmDangerActionDialogProps
+ extends ConfirmationDialogProps {
+ valueToCheck: string;
+}
+
+export const ConfirmDangerActionDialog = ({
+ title,
+ content,
+ confirmText,
+ valueToCheck,
+ open,
+ onClose,
+ onConfirm,
+ isLoading,
+ error
+}: ConfirmDangerActionDialogProps) => {
const [isConfirmDisabled, setIsConfirmDisabled] = useState(true);
- const handleInputChange = (event) => {
+ const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const inputText = event.target.value;
setIsConfirmDisabled(inputText !== valueToCheck);
};
@@ -260,9 +290,9 @@ export const ConfirmDangerActionDialog = ({ ...props }) => {
xs={12}
>
{typeof content === "string" ? (
- <DialogContentText>{text}</DialogContentText>
+ <DialogContentText>{content}</DialogContentText>
) : (
- <Box>{text}</Box>
+ <Box>{content}</Box>
)}
</Grid>
<Grid
diff --git a/src/components/common/Dialog/index.js b/src/components/common/Dialog/index.js
deleted file mode 100644
index 296be34e..00000000
--- a/src/components/common/Dialog/index.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import {
- Dialog,
- ConfirmationDialog,
- ConfirmDangerActionDialog
-} from "./Dialog";
-
-export { Dialog, ConfirmationDialog, ConfirmDangerActionDialog };
diff --git a/src/components/common/Dialog/index.ts b/src/components/common/Dialog/index.ts
new file mode 100644
index 00000000..f6d6189f
--- /dev/null
+++ b/src/components/common/Dialog/index.ts
@@ -0,0 +1,17 @@
+import {
+ Dialog,
+ ConfirmationDialog,
+ ConfirmDangerActionDialog,
+ DialogProps,
+ ConfirmationDialogProps,
+ ConfirmDangerActionDialogProps
+} from "./Dialog";
+
+export {
+ Dialog,
+ ConfirmationDialog,
+ ConfirmDangerActionDialog,
+ type DialogProps,
+ type ConfirmationDialogProps,
+ type ConfirmDangerActionDialogProps
+};
--
GitLab
From 8bc4eee717d0eb70d5da20c2ec55d0621757fbdd Mon Sep 17 00:00:00 2001
From: Johanna Szepanski <johanna.szepanski@softhouse.se>
Date: Wed, 26 Feb 2025 16:09:30 +0100
Subject: [PATCH 2/5] migrated dialog test
---
cypress.d.ts | 10 ++++++++++
.../common/Dialog/{Dialog.cy.jsx => Dialog.cy.tsx} | 13 +++++++------
src/hooks/useTypingTimer.ts | 3 ++-
tsconfig.json | 7 ++++---
4 files changed, 23 insertions(+), 10 deletions(-)
create mode 100644 cypress.d.ts
rename src/components/common/Dialog/{Dialog.cy.jsx => Dialog.cy.tsx} (94%)
diff --git a/cypress.d.ts b/cypress.d.ts
new file mode 100644
index 00000000..4ab1d185
--- /dev/null
+++ b/cypress.d.ts
@@ -0,0 +1,10 @@
+import { mount } from "cypress/react";
+
+declare global {
+ namespace Cypress {
+ interface Chainable {
+ mount: typeof mount;
+ login(): Chainable<void>;
+ }
+ }
+}
diff --git a/src/components/common/Dialog/Dialog.cy.jsx b/src/components/common/Dialog/Dialog.cy.tsx
similarity index 94%
rename from src/components/common/Dialog/Dialog.cy.jsx
rename to src/components/common/Dialog/Dialog.cy.tsx
index 19c13a1f..49b9d612 100644
--- a/src/components/common/Dialog/Dialog.cy.jsx
+++ b/src/components/common/Dialog/Dialog.cy.tsx
@@ -1,4 +1,5 @@
import { composeStories } from "@storybook/react";
+import { mount } from "cypress/react";
import * as stories from "../../../stories/common/Dialog/Dialog.stories";
const { BasicDialog, Confirmation, DangerActionDialog } =
@@ -6,14 +7,14 @@ const { BasicDialog, Confirmation, DangerActionDialog } =
describe("SimpleDialog", () => {
it("should close on clicking close", () => {
- cy.mount(<BasicDialog />);
+ mount(<BasicDialog />);
cy.findByText(/some title/i).should("exist");
cy.findByRole("button", { name: /close/i }).click();
cy.findByText(/some title/i).should("not.exist");
});
it("should close on escape", () => {
- cy.mount(<BasicDialog />);
+ mount(<BasicDialog />);
cy.findByText(/some title/i)
.should("exist")
@@ -26,7 +27,7 @@ const closedText = "You closed the dialog!";
describe("ConfirmationDialog", () => {
it("should close on clicking close icon", () => {
- cy.mount(<Confirmation />);
+ mount(<Confirmation />);
cy.findByText(/some title/i).should("exist");
cy.findByRole("button", { name: /close/i }).click();
@@ -34,7 +35,7 @@ describe("ConfirmationDialog", () => {
cy.findByText(closedText).should("exist");
});
it("should close on escape", () => {
- cy.mount(<Confirmation />);
+ mount(<Confirmation />);
cy.findByText(/some title/i)
.should("exist")
@@ -43,7 +44,7 @@ describe("ConfirmationDialog", () => {
cy.findByText(closedText).should("exist");
});
it("should close and when clicking cancel", () => {
- cy.mount(<Confirmation />);
+ mount(<Confirmation />);
cy.findByText(/some title/i).should("exist");
cy.findByRole("button", { name: /cancel/i }).click();
@@ -54,7 +55,7 @@ describe("ConfirmationDialog", () => {
describe("DangerActionDialog", () => {
const mountDangerActionDialog = () => {
- cy.mount(<DangerActionDialog />);
+ mount(<DangerActionDialog />);
cy.contains("Open Danger Action Dialog").click();
};
diff --git a/src/hooks/useTypingTimer.ts b/src/hooks/useTypingTimer.ts
index 421e401d..a3943064 100644
--- a/src/hooks/useTypingTimer.ts
+++ b/src/hooks/useTypingTimer.ts
@@ -1,7 +1,8 @@
import { KeyboardEvent, useState } from "react";
export const useTypingTimer = ({ init = "", interval = 750 } = {}) => {
- const [typingTimer, setTypingTimer] = useState<NodeJS.Timeout>();
+ const [typingTimer, setTypingTimer] =
+ useState<ReturnType<typeof setTimeout>>();
const [value, setValue] = useState(init);
const doneTypingInterval = interval; // ms
diff --git a/tsconfig.json b/tsconfig.json
index 7d887f14..189f7c7a 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -12,13 +12,14 @@
"noEmit": true,
"declaration": true,
"jsx": "react-jsx",
- "typeRoots": ["./dist/index.d.ts", "node_modules/@types"],
+ "typeRoots": ["./dist/index.d.ts", "node_modules/@types", "node_modules"],
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
- "allowSyntheticDefaultImports": true
+ "allowSyntheticDefaultImports": true,
+ "types": ["cypress", "@testing-library/cypress"]
},
- "include": ["src"]
+ "include": ["src", "cypress.d.ts"]
}
--
GitLab
From d32ab340ac84e46f3b2ed52347ffa18f6571b308 Mon Sep 17 00:00:00 2001
From: Johanna Szepanski <johanna.szepanski@softhouse.se>
Date: Thu, 27 Feb 2025 08:36:17 +0100
Subject: [PATCH 3/5] migrated dialog stories
---
...{Dialog.stories.jsx => Dialog.stories.tsx} | 90 ++++++++++++++++---
1 file changed, 77 insertions(+), 13 deletions(-)
rename src/stories/common/Dialog/{Dialog.stories.jsx => Dialog.stories.tsx} (75%)
diff --git a/src/stories/common/Dialog/Dialog.stories.jsx b/src/stories/common/Dialog/Dialog.stories.tsx
similarity index 75%
rename from src/stories/common/Dialog/Dialog.stories.jsx
rename to src/stories/common/Dialog/Dialog.stories.tsx
index 7fa9e976..5cc70e83 100644
--- a/src/stories/common/Dialog/Dialog.stories.jsx
+++ b/src/stories/common/Dialog/Dialog.stories.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, ReactNode } from "react";
import { Alert, Button, Stack, Typography } from "@mui/material";
import { Box } from "@mui/system";
import AddBoxIcon from "@mui/icons-material/AddBox";
@@ -20,7 +20,11 @@ const CLOSED = "CLOSED";
const loremString =
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dignissim aliquam libero, sit amet porttitor felis iaculis a. Nunc consequat urna vitae tellus consequat, a egestas enim dictum. Morbi sodales pharetra sagittis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed velit ex, venenatis id vulputate egestas, molestie id libero. Curabitur eu tincidunt metus. Mauris ultricies tristique quam, ut cursus tortor. Nullam feugiat elementum nulla, nec faucibus lorem sodales quis. Suspendisse sollicitudin sollicitudin sapien, a bibendum dolor rhoncus consectetur. Nunc interdum et turpis vitae vehicula. Donec egestas vitae mauris id scelerisque. Cras suscipit magna nec purus vehicula ultrices. Fusce quam nibh, iaculis in maximus a, ultrices eget tortor. Etiam ex massa, vulputate condimentum fermentum eu, convallis non metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dignissim aliquam libero, sit amet porttitor felis iaculis a. Nunc consequat urna vitae tellus consequat, a egestas enim dictum. Morbi sodales pharetra sagittis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed velit ex, venenatis id vulputate egestas, molestie id libero. Curabitur eu tincidunt metus. Mauris ultricies tristique quam, ut cursus tortor. Nullam feugiat elementum nulla, nec faucibus lorem sodales quis. Suspendisse sollicitudin sollicitudin sapien, a bibendum dolor rhoncus consectetur. Nunc interdum et turpis vitae vehicula. Donec egestas vitae mauris id scelerisque. Cras suscipit magna nec purus vehicula ultrices. Fusce quam nibh, iaculis in maximus a, ultrices eget tortor. Etiam ex massa, vulputate condimentum fermentum eu, convallis non metus.";
-const CustomTitle = ({ title }) => {
+interface CustomTitleProps {
+ title: string | ReactNode;
+}
+
+const CustomTitle = ({ title }: CustomTitleProps) => {
return (
<Stack
flexDirection="row"
@@ -30,7 +34,7 @@ const CustomTitle = ({ title }) => {
<AddBoxIcon fontSize="large" />
<Typography
variant="button"
- verticalalign="center"
+ sx={{ verticalalign: "center" }}
>
{title}
</Typography>
@@ -38,17 +42,28 @@ const CustomTitle = ({ title }) => {
);
};
-const CustomContent = ({ content }) => {
+interface CustomContentProps {
+ content: string | ReactNode;
+}
+
+const CustomContent = ({ content }: CustomContentProps) => {
return <Typography fontFamily="monospace">{content}</Typography>;
};
+interface DialogProps {
+ title: string | ReactNode;
+ titleIsCustomComponent: boolean;
+ content: string | ReactNode;
+ contentIsCustomComponent: boolean;
+}
+
export const BasicDialog = ({
title,
titleIsCustomComponent,
content,
contentIsCustomComponent,
...props
-}) => {
+}: DialogProps) => {
const [state, setState] = useState(OPEN);
return (
@@ -89,7 +104,7 @@ const ConfirmationTemplate = ({
content,
contentIsCustomComponent,
...props
-}) => {
+}: DialogProps) => {
const [state, setState] = useState(OPEN);
const onConfirm = () => setState(CONFIRMED);
const onClose = () => setState(CLOSED);
@@ -128,7 +143,15 @@ const ConfirmationTemplate = ({
);
};
-export const Confirmation = (args) => <ConfirmationTemplate {...args} />;
+interface ConfirmationDialogProps extends DialogProps {
+ confirmText: string;
+ cancelText: string;
+ isConfirmDisabled: boolean;
+}
+
+export const Confirmation = (args: ConfirmationDialogProps) => (
+ <ConfirmationTemplate {...args} />
+);
Confirmation.args = {
...BasicDialog.args,
confirmText: "Confirm",
@@ -136,7 +159,17 @@ Confirmation.args = {
isConfirmDisabled: false
};
-export const DangerActionComponent = ({ ...props }) => {
+interface DangerActionDialogProps extends ConfirmationDialogProps {
+ valueToCheck: string;
+}
+
+const DangerActionComponent = ({
+ title,
+ content,
+ confirmText,
+ valueToCheck,
+ ...props
+}: DangerActionDialogProps) => {
const [state, setState] = useState(IDLE);
return (
@@ -154,6 +187,10 @@ export const DangerActionComponent = ({ ...props }) => {
) : null}
</Box>
<ConfirmDangerActionDialog
+ title={title}
+ content={content}
+ confirmText={confirmText}
+ valueToCheck={valueToCheck}
open={state === OPEN}
onConfirm={() => setState(CONFIRMED)}
onClose={() => setState(CLOSED)}
@@ -163,10 +200,25 @@ export const DangerActionComponent = ({ ...props }) => {
);
};
-export const DangerActionDialog = (args) => <DangerActionComponent {...args} />;
+export const DangerActionDialog = ({
+ title,
+ content,
+ confirmText,
+ valueToCheck,
+ ...args
+}: DangerActionDialogProps) => (
+ <DangerActionComponent
+ title={title}
+ content={content}
+ confirmText={confirmText}
+ valueToCheck={valueToCheck}
+ {...args}
+ />
+);
DangerActionDialog.args = {
title: "Delete IOC type",
- text: " Type in the complete IOC type name to confirm that you really want to delete the IOC type.",
+ content:
+ " Type in the complete IOC type name to confirm that you really want to delete the IOC type.",
confirmText: "Delete",
valueToCheck: "ec234-67hdj"
};
@@ -188,11 +240,23 @@ const getCustomComponent = () => (
</>
);
-export const DangerActionDialogWithCustomContent = (args) => (
- <DangerActionComponent {...args} />
+export const DangerActionDialogWithCustomContent = ({
+ title,
+ content,
+ confirmText,
+ valueToCheck,
+ ...args
+}: DangerActionDialogProps) => (
+ <DangerActionComponent
+ title={title}
+ content={content}
+ confirmText={confirmText}
+ valueToCheck={valueToCheck}
+ {...args}
+ />
);
DangerActionDialogWithCustomContent.args = {
...DangerActionDialog.args,
- text: getCustomComponent()
+ content: getCustomComponent()
};
--
GitLab
From ce8367ded37b3b6ce33f3167b2874156c48ba5df Mon Sep 17 00:00:00 2001
From: Johanna Szepanski <johanna.szepanski@softhouse.se>
Date: Thu, 27 Feb 2025 10:06:34 +0100
Subject: [PATCH 4/5] moved open prop to DialogProps obj as required by MUI
---
src/components/auth/Login.jsx | 4 ++--
src/components/common/Dialog/Dialog.tsx | 14 ++++++--------
.../common/ExpandableViewer/ExpandableViewer.jsx | 2 +-
src/stories/common/Dialog/Dialog.stories.tsx | 16 +++++++---------
4 files changed, 16 insertions(+), 20 deletions(-)
diff --git a/src/components/auth/Login.jsx b/src/components/auth/Login.jsx
index 6c66c77e..5dd5d273 100644
--- a/src/components/auth/Login.jsx
+++ b/src/components/auth/Login.jsx
@@ -130,9 +130,9 @@ export const LoginDialog = styled(
return (
<Dialog
DialogProps={{
- fullWidth: true
+ fullWidth: true,
+ open: open
}}
- open={open}
onClose={handleClose}
className={`${className} CeuiLoginDialog`}
content={
diff --git a/src/components/common/Dialog/Dialog.tsx b/src/components/common/Dialog/Dialog.tsx
index 377a1a3f..bacf66b5 100644
--- a/src/components/common/Dialog/Dialog.tsx
+++ b/src/components/common/Dialog/Dialog.tsx
@@ -80,8 +80,7 @@ const DialogTitle = ({ onClose, className, children }: DialogTitleProps) => (
export interface DialogProps {
title: string | ReactNode;
content: string | ReactNode;
- open: boolean;
- DialogProps?: DialogPropsMUI;
+ DialogProps: DialogPropsMUI;
className?: string;
isLoading?: boolean;
error?: string;
@@ -92,7 +91,6 @@ export interface DialogProps {
export const Dialog = ({
title,
content,
- open,
className,
isLoading,
error,
@@ -102,7 +100,6 @@ export const Dialog = ({
}: DialogProps) => {
return (
<MuiDialog
- open={open}
onClose={onClose}
fullWidth
maxWidth="sm"
@@ -219,18 +216,18 @@ export const ConfirmationDialog = styled(
({
title,
content,
- open,
onConfirm,
onClose,
confirmText = "Yes",
cancelText = "No",
- isConfirmDisabled = false
+ isConfirmDisabled = false,
+ DialogProps
}: ConfirmationDialogProps) => {
return (
<Dialog
title={title}
content={content}
- open={open}
+ DialogProps={DialogProps}
onClose={onClose}
renderActions={() => (
<ConfirmationDialogButtons
@@ -256,7 +253,7 @@ export const ConfirmDangerActionDialog = ({
content,
confirmText,
valueToCheck,
- open,
+ DialogProps,
onClose,
onConfirm,
isLoading,
@@ -280,6 +277,7 @@ export const ConfirmDangerActionDialog = ({
confirmText={confirmText}
cancelText="Cancel"
onClose={handleClose}
+ DialogProps={DialogProps}
content={
<Grid
container
diff --git a/src/components/common/ExpandableViewer/ExpandableViewer.jsx b/src/components/common/ExpandableViewer/ExpandableViewer.jsx
index 6d082067..20c8a70d 100644
--- a/src/components/common/ExpandableViewer/ExpandableViewer.jsx
+++ b/src/components/common/ExpandableViewer/ExpandableViewer.jsx
@@ -88,7 +88,6 @@ export const ExpandableViewer = styled(
) : (
<>
<Dialog
- open={dialogOpen}
onClose={handleClose}
title={title}
content={
@@ -101,6 +100,7 @@ export const ExpandableViewer = styled(
}
className="CeuiExpandableViewerDialog"
DialogProps={{
+ open: dialogOpen,
fullWidth: true,
maxWidth: "xl",
...DialogProps
diff --git a/src/stories/common/Dialog/Dialog.stories.tsx b/src/stories/common/Dialog/Dialog.stories.tsx
index 5cc70e83..50db852f 100644
--- a/src/stories/common/Dialog/Dialog.stories.tsx
+++ b/src/stories/common/Dialog/Dialog.stories.tsx
@@ -61,8 +61,7 @@ export const BasicDialog = ({
title,
titleIsCustomComponent,
content,
- contentIsCustomComponent,
- ...props
+ contentIsCustomComponent
}: DialogProps) => {
const [state, setState] = useState(OPEN);
@@ -75,7 +74,7 @@ export const BasicDialog = ({
Show Dialog
</Button>
<Dialog
- open={state === OPEN}
+ DialogProps={{ open: state === OPEN }}
onClose={() => setState(IDLE)}
title={titleIsCustomComponent ? <CustomTitle title={title} /> : title}
content={
@@ -85,7 +84,6 @@ export const BasicDialog = ({
content
)
}
- {...props}
/>
</>
);
@@ -102,8 +100,7 @@ const ConfirmationTemplate = ({
title,
titleIsCustomComponent,
content,
- contentIsCustomComponent,
- ...props
+ contentIsCustomComponent
}: DialogProps) => {
const [state, setState] = useState(OPEN);
const onConfirm = () => setState(CONFIRMED);
@@ -128,8 +125,10 @@ const ConfirmationTemplate = ({
</Box>
<ConfirmationDialog
{...{ onConfirm, onClose }}
- open={state === OPEN}
+ DialogProps={{ open: state === OPEN }}
title={titleIsCustomComponent ? <CustomTitle title={title} /> : title}
+ cancelText="Cancel"
+ confirmText="Confirm"
content={
contentIsCustomComponent ? (
<CustomContent content={content} />
@@ -137,7 +136,6 @@ const ConfirmationTemplate = ({
content
)
}
- {...props}
/>
</>
);
@@ -191,7 +189,7 @@ const DangerActionComponent = ({
content={content}
confirmText={confirmText}
valueToCheck={valueToCheck}
- open={state === OPEN}
+ DialogProps={{ open: state === OPEN }}
onConfirm={() => setState(CONFIRMED)}
onClose={() => setState(CLOSED)}
{...props}
--
GitLab
From 79b79ff6b6b3296f3ff8d877a6f72447d61c5e0c Mon Sep 17 00:00:00 2001
From: Johanna Szepanski <johanna.szepanski@softhouse.se>
Date: Thu, 27 Feb 2025 11:22:04 +0100
Subject: [PATCH 5/5] 16.0.0
---
package-lock.json | 4 ++--
package.json | 2 +-
2 files changed, 3 insertions(+), 3 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index a86596c7..3ddd7d77 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
{
"name": "@ess-ics/ce-ui-common",
- "version": "15.5.0",
+ "version": "16.0.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "@ess-ics/ce-ui-common",
- "version": "15.5.0",
+ "version": "16.0.0",
"dependencies": {
"@fontsource/titillium-web": "^5.0.22",
"@mui/x-data-grid-pro": "^6.5.0",
diff --git a/package.json b/package.json
index 085d1d50..294573bb 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "@ess-ics/ce-ui-common",
- "version": "15.5.0",
+ "version": "16.0.0",
"private": true,
"type": "module",
"main": "dist/index.js",
--
GitLab