feat: [PROD-13938] add icon button option to create scenario button

Cosmo-Tech · Sep 25, 2024 · c6501d8 · c6501d8
1 parent 3e9973a
commit c6501d8
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 27 deletions.
diff --git a/src/buttons/CreateScenarioButton/CreateScenarioButton.js b/src/buttons/CreateScenarioButton/CreateScenarioButton.js
@@ -1,7 +1,8 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { Button } from '@mui/material';
-import { FadingTooltip } from '../../misc/FadingTooltip';
+import AddCircleIcon from '@mui/icons-material/AddCircle';
+import { Button, IconButton } from '@mui/material';
+import { FadingTooltip } from '../../misc';
 import CreateScenarioDialog from './components';
 
 export const CreateScenarioButton = ({
@@ -16,24 +17,32 @@ export const CreateScenarioButton = ({
   solution,
   disabled,
   labels,
+  isIconButton,
 }) => {
   const [open, setOpen] = useState(false);
   const openDialog = () => setOpen(true);
   const closeDialog = () => setOpen(false);
 
+  const buttonContent = isIconButton ? (
+    <IconButton data-cy="create-scenario-button" size="medium" onClick={openDialog} color="primary" disabled={disabled}>
+      <AddCircleIcon />
+    </IconButton>
+  ) : (
+    <Button
+      data-cy="create-scenario-button"
+      size="medium"
+      variant="contained"
+      onClick={openDialog}
+      color="primary"
+      disabled={disabled}
+    >
+      {labels.button.title}
+    </Button>
+  );
   return (
     <div>
       <FadingTooltip arrow title={labels.button.tooltip}>
-        <Button
-          data-cy="create-scenario-button"
-          size="medium"
-          variant="contained"
-          onClick={openDialog}
-          color="primary"
-          disabled={disabled}
-        >
-          {labels.button.title}
-        </Button>
+        {buttonContent}
       </FadingTooltip>
       <CreateScenarioDialog
         createScenario={createScenario}
@@ -139,6 +148,12 @@ CreateScenarioButton.propTypes = {
       forbiddenCharsInScenarioName: PropTypes.string.isRequired,
     }).isRequired,
   }),
+  /**
+   *  Defines the CreateScenarioButton's form:
+   *  - true : the button is round shaped and has an Add icon instead of title
+   *  - false (default value): the button is contained and has a title
+   */
+  isIconButton: PropTypes.bool,
 };
 
 CreateScenarioButton.defaultProps = {

diff --git a/src/misc/ScenarioValidationStatusChip/ScenarioValidationStatusChip.js b/src/misc/ScenarioValidationStatusChip/ScenarioValidationStatusChip.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Chip, CircularProgress } from '@mui/material';
+import { Box, Chip, CircularProgress } from '@mui/material';
 
 export const ScenarioValidationStatusChip = (props) => {
   const { labels, status, onDelete, className } = props;
@@ -17,26 +17,30 @@ export const ScenarioValidationStatusChip = (props) => {
 
   if (lowerCaseStatus === 'loading') {
     return (
-      <CircularProgress
-        className={className}
-        color="inherit"
-        data-cy="scenario-validation-status-loading-spinner"
-        size="15px"
-      />
+      <Box mx={2}>
+        <CircularProgress
+          className={className}
+          color="inherit"
+          data-cy="scenario-validation-status-loading-spinner"
+          size="15px"
+        />
+      </Box>
     );
   }
 
   const colorProp = lowerCaseStatus === 'validated' ? 'success' : 'error';
 
   return lowerCaseStatus === 'rejected' || lowerCaseStatus === 'validated' ? (
-    <Chip
-      clickable={false}
-      data-cy="scenario-validation-status"
-      label={getLabel()}
-      onDelete={onDelete}
-      color={colorProp}
-      className={className}
-    />
+    <Box mx={1}>
+      <Chip
+        clickable={false}
+        data-cy="scenario-validation-status"
+        label={getLabel()}
+        onDelete={onDelete}
+        color={colorProp}
+        className={className}
+      />
+    </Box>
   ) : null;
 };