Pull request update/240828

b0e7921 OS-7761. Restore the 'Expand' button to the side modal header
755b5a2 OS-7736. Update resource_owner_violation_report email template
3c0c939 OS-7735. Update pool_owner_violation_report email template

herald/send_templates.py

@@ -651,25 +651,13 @@
         'template_type': 'pool_owner_violation_report',
         'template_params': {
             'texts': {
-                'title': 'Resource Constraints Report',
                 'total_differ': 0,
                 'total_violated': 2,
                 'differ_resources': [],
                 'organization': {
                     'id': '28eef4b1-4acf-4050-b833-86c3b2aaf1e7',
                     'name': 'Lori Inc'
                 },
-                'user': {
-                    'assignment_id': 'e56d3134-a7f3-44c3-9f70-4734fae654fd',
-                    'assignment_resource_id': '28eef4b1-4acf-4050-b833-86c3b2aaf1e7',
-                    'assignment_type_id': 2,
-                    'role_id': 3,
-                    'role_name': 'Manager',
-                    'role_scope_id': None,
-                    'role_purpose': 'optscale_manager',
-                    'user_display_name': 'lori54',
-                    'user_email': '[email protected]',
-                    'user_id': '0eebe586-9cad-4daf-b143-075c2422cf98'},
                 'violated_resources': [
                     {
                         'cloud_resource_id': 'i-05377b0fa5b9674fd',
@@ -754,7 +742,6 @@
         "subject": "Action required: Hystax OptScale Resource Constraints Report",
         "template_params": {
             "texts": {
-                "title": "Resource Constraints Report",
                 "total_differ": 1,
                 "total_violated": 1,
                 "differ_resources": [{
@@ -790,11 +777,6 @@
                     "id": "b8835bce-da4c-4c29-98a0-4b4967baba53",
                     "name": "Czar Pictures"
                 },
-                "user": {
-                    "user_display_name": "Mr Smith",
-                    "user_email": "[email protected]",
-                    "user_id": "8aa14efd-d111-4934-9c19-92b6f0da18fe"
-                },
                 "violated_resources": [{
                     "cloud_resource_id": "hystax-eu-fra",
                     "constraint_limit": 1,

katara/katara_worker/reports_generators/violated_constraints.py

@@ -39,7 +39,6 @@ def generate(self):
                 'Action required: Hystax OptScale Resource Constraints Report',
             'template_params': {
                 'texts': {
-                    'user': self.report_data,
                     'organization': {
                         'id': org['id'],
                         'name': org['name']
@@ -48,7 +47,6 @@ def generate(self):
                     'total_violated': total_violated,
                     'differ_resources': differ_resources,
                     'violated_resources': violated_resources,
-                    'title': 'Resource Constraints Report'
                 }
             }
         }

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);