OS-7761. Restore the 'Expand' button to the side modal header

ngui/ui/src/components/SideModal/SideModal.tsx

@@ -1,9 +1,25 @@
-import { useState } from "react";
+import { ReactNode, SyntheticEvent, useState } from "react";
 import Drawer from "@mui/material/Drawer";
 import SideModalHeader from "components/SideModalHeader";
+import { SideModalHeaderProps } from "components/SideModalHeader/SideModalHeader";
 import useStyles from "./SideModal.styles";
 
-const DrawerContent = ({ headerProps, handleClose, children }) => {
+type DrawerContentProps = {
+  headerProps: SideModalHeaderProps;
+  handleClose: (event: SyntheticEvent) => void;
+  children: ReactNode;
+};
+
+type SideModalProps = {
+  isOpen: boolean;
+  closeHandler: (isOpen: boolean) => void;
+  dataTestId: string;
+  headerProps: SideModalHeaderProps;
+  onClose?: (event: SyntheticEvent) => void;
+  children: ReactNode;
+};
+
+const DrawerContent = ({ headerProps, handleClose, children }: DrawerContentProps) => {
   const { showExpand, ...sideModalHeaderProps } = headerProps;
 
   const [isExpanded, setIsExpanded] = useState(showExpand);
@@ -14,6 +30,7 @@ const DrawerContent = ({ headerProps, handleClose, children }) => {
     <div className={cx(classes.sideModal, isExpanded && classes.sideModalExpanded)}>
       <SideModalHeader
         {...sideModalHeaderProps}
+        showExpand={showExpand}
         onClose={handleClose}
         isExpanded={isExpanded}
         onExpandChange={() => setIsExpanded(!isExpanded)}
@@ -23,7 +40,7 @@ const DrawerContent = ({ headerProps, handleClose, children }) => {
   );
 };
 
-const SideModal = ({ isOpen, closeHandler, dataTestId, headerProps = {}, onClose, children }) => {
+const SideModal = ({ isOpen, closeHandler, dataTestId, headerProps, onClose, children }: SideModalProps) => {
   const handleClose = (event) => {
     if (event.type === "keydown" && (event.key === "Tab" || event.key === "Shift")) {
       return;

ngui/ui/src/components/SideModalHeader/SideModalHeader.tsx

@@ -1,3 +1,4 @@
+import { ReactNode, SyntheticEvent } from "react";
 import CloseIcon from "@mui/icons-material/Close";
 import WidthNormalIcon from "@mui/icons-material/WidthNormal";
 import WidthWideIcon from "@mui/icons-material/WidthWide";
@@ -10,6 +11,23 @@ import SideModalTitle from "components/SideModalTitle";
 import { capitalize } from "utils/strings";
 import useStyles from "./SideModalHeader.styles";
 
+type Title =
+  | { text: string; messageId?: never; formattedMessageValues?: never }
+  | { text?: never; messageId: string; formattedMessageValues?: Record<string, ReactNode> };
+
+export type SideModalHeaderProps = Title & {
+  onClose: (event: SyntheticEvent) => void;
+  showExpand?: boolean;
+  onExpandChange?: () => void;
+  isExpanded?: boolean;
+  dataTestIds?: {
+    title?: string;
+    closeButton?: string;
+    expandButton?: string;
+  };
+  color?: "primary" | "success" | "info" | "error";
+};
+
 const SideModalHeader = ({
   text,
   messageId,
@@ -20,7 +38,7 @@ const SideModalHeader = ({
   formattedMessageValues,
   dataTestIds,
   color = "primary"
-}) => {
+}: SideModalHeaderProps) => {
   const { classes, cx } = useStyles();
 
   const {
@@ -29,7 +47,8 @@ const SideModalHeader = ({
     expandButton: expandButtonDataTestId
   } = dataTestIds || {};
 
-  const headerClasses = cx(classes["header".concat(capitalize(color))]);
+  const headerColorClassName = `header${capitalize(color)}` as const;
+  const headerClasses = cx(classes[headerColorClassName]);
 
   return (
     <Box mb={2}>

ngui/ui/src/components/SideModalTitle/SideModalTitle.tsx

@@ -1,6 +1,11 @@
-import Typography from "@mui/material/Typography";
+import Typography, { TypographyProps } from "@mui/material/Typography";
 
-const SideModalTitle = ({ children, dataProductTourId, dataTestId, ...rest }) => (
+type SideModalTitleProps = {
+  dataProductTourId?: string;
+  dataTestId?: string;
+} & TypographyProps;
+
+const SideModalTitle = ({ children, dataProductTourId, dataTestId, ...rest }: SideModalTitleProps) => (
   <Typography component="h2" variant="h6" data-product-tour-id={dataProductTourId} data-test-id={dataTestId} {...rest}>
     {children}
   </Typography>

ngui/ui/src/utils/strings.ts

@@ -31,7 +31,8 @@ export const getHash = (s) => {
   return h;
 };
 
-export const capitalize = (s) => (isString(s) ? s.charAt(0).toUpperCase() + s.slice(1) : "");
+export const capitalize = <T extends string>(s: T): Capitalize<T> =>
+  (isString(s) ? s.charAt(0).toUpperCase() + s.slice(1) : "") as Capitalize<T>;
 
 export const concatenate = (array, pre, separator) => {
   const string = array.join(separator);