Merge pull request #27 from softwareone-platform/feature/MPT-4864-rec…

…ommendations Recommendations UX
softwareone-platform · Dec 6, 2024 · 7bf6ae6 · 7bf6ae6
2 parents 2af3934 + 0e2f3fd
commit 7bf6ae6
Show file tree

Hide file tree

Showing 17 changed files with 162 additions and 82 deletions.
diff --git a/ngui/ui/package.json b/ngui/ui/package.json
@@ -93,7 +93,7 @@
     "prettier:fix": "prettier --write 'src/**/*.{ts,tsx,json}'",
     "translate:fix": "prettier --write 'src/translations/**/*.json'",
     "translate:sort": "node src/translations/sortTranslations.ts",
-    "check": "pnpm lint:check && pnpm prettier:check",
+    "check": "pnpm lint:check && pnpm prettier:check && pnpm build",
     "fix": "pnpm lint:fix && pnpm prettier:fix",
     "fix:all": "pnpm fix && pnpm translate:sort && pnpm translate:fix",
     "type:check": "tsc"

diff --git a/ngui/ui/src/components/ButtonGroup/ButtonGroup.styles.ts b/ngui/ui/src/components/ButtonGroup/ButtonGroup.styles.ts
@@ -12,7 +12,9 @@ const useStyles = makeStyles()((theme) => ({
   },
   activeButton: {
     backgroundColor: theme.palette.secondary.main,
-    color: theme.palette.secondary.contrastText,
+    ".MuiTypography-root": {
+      color: theme.palette.primary.white
+    },
     "&:hover": {
       backgroundColor: theme.palette.secondary.light
     }

diff --git a/ngui/ui/src/components/Icon/Icon.styles.ts b/ngui/ui/src/components/Icon/Icon.styles.ts
@@ -2,7 +2,9 @@ import { makeStyles } from "tss-react/mui";
 
 const useStyles = makeStyles()((theme) => ({
   icon: {
-    verticalAlign: "middle"
+    verticalAlign: "middle",
+    width: "0.6em",
+    height: "0.6em"
   },
   info: {
     color: theme.palette.info.main

diff --git a/ngui/ui/src/components/SearchInput/SearchInput.tsx b/ngui/ui/src/components/SearchInput/SearchInput.tsx
@@ -60,7 +60,6 @@ const SearchInput = ({ onSearch, initialSearchText = "", dataTestIds = {}, sx =
         startAdornment: (
           <IconButton
             dataTestId={searchButtonDataTestId}
-            sx={{ padding: MPT_SPACING_1 }}
             icon={<SearchOutlinedIcon />}
             onClick={() => {
               inputRef.current.focus();

diff --git a/ngui/ui/src/components/SideModalHeader/SideModalHeader.styles.ts b/ngui/ui/src/components/SideModalHeader/SideModalHeader.styles.ts
@@ -4,11 +4,12 @@ const useStyles = makeStyles()((theme) => ({
   title: {
     flexGrow: 1,
     display: "flex",
-    alignContent: "center"
+    alignContent: "center",
+    color: theme.palette.primary.white
   },
   headerPrimary: {
     color: theme.palette.primary.contrastText,
-    backgroundColor: theme.palette.primary.main
+    background: theme.palette.primary.gradient
   },
   headerSuccess: {
     color: theme.palette.success.contrastText,

diff --git a/ngui/ui/src/components/SummaryCard/SummaryCard.styles.ts b/ngui/ui/src/components/SummaryCard/SummaryCard.styles.ts
@@ -1,9 +1,8 @@
 import { lighten } from "@mui/material/styles";
 import { makeStyles } from "tss-react/mui";
-import { SPACING_1, SPACING_2 } from "utils/layouts";
+import { SPACING_1, SPACING_2, SPACING_3, MPT_BOX_SHADOW_HOVER } from "utils/layouts";
 
 const ALPHA = 0.95;
-const ALPHA_HOVER = 0.8;
 
 const useStyles = makeStyles()((theme, color) => ({
   root: {
@@ -15,12 +14,16 @@ const useStyles = makeStyles()((theme, color) => ({
       minWidth: 100
     },
     backgroundColor: lighten(color, ALPHA),
+    border: `1px solid ${lighten(color, ALPHA)}`,
     color
   },
   button: {
     transition: "background-color 0.3s ease-in",
     cursor: "pointer",
-    "&:hover": { backgroundColor: lighten(color, ALPHA_HOVER) }
+    paddingRight: theme.spacing(SPACING_3),
+    "&:hover": {
+      boxShadow: MPT_BOX_SHADOW_HOVER
+    }
   },
   content: {
     paddingTop: theme.spacing(SPACING_1),

diff --git a/ngui/ui/src/components/SummaryCard/SummaryCard.tsx b/ngui/ui/src/components/SummaryCard/SummaryCard.tsx
@@ -1,5 +1,5 @@
 import { forwardRef } from "react";
-import TouchAppIcon from "@mui/icons-material/TouchApp";
+import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
 import { Box, Typography } from "@mui/material";
 import Card from "@mui/material/Card";
 import CardContent from "@mui/material/CardContent";
@@ -24,8 +24,8 @@ const CardLayout = forwardRef(({ children, color, clickable, onClick, cardTestId
         <Box>
           {children}
           {clickable && (
-            <Box position="absolute" bottom={0} right={0}>
-              <TouchAppIcon color="info" sx={{ opacity: 0.5 }} />
+            <Box position="absolute" bottom={"16px"} right={"8px"}>
+              <ArrowForwardIosIcon color="primary" sx={{ opacity: 1 }} />
             </Box>
           )}
         </Box>

diff --git a/ngui/ui/src/components/SummaryGrid/SummaryGrid.styles.tsx b/ngui/ui/src/components/SummaryGrid/SummaryGrid.styles.tsx
@@ -1,19 +1,18 @@
 import { makeStyles } from "tss-react/mui";
-import { MPT_BOX_SHADOW, MPT_SPACING_1, MPT_SPACING_2 } from "../../utils/layouts";
+import { MPT_BOX_SHADOW, MPT_SPACING_1, MPT_SPACING_2, MPT_TERTIARY_BLUE_1 } from "../../utils/layouts";
 
 const useStyles = makeStyles()(() => ({
   customBox: {
     margin: 0,
     marginBottom: MPT_SPACING_2,
     ".MuiPaper-rounded": {
       borderRadius: MPT_SPACING_2,
-      textAlign: "center",
+      textAlign: "left",
       padding: MPT_SPACING_1,
-      background: "#CAE4FF",
+      background: MPT_TERTIARY_BLUE_1,
       boxShadow: MPT_BOX_SHADOW
     },
     ".MuiBox-root": {
-      justifyContent: "center",
       color: "black"
     }
   }

diff --git a/...ntainers/RecommendationsOverviewContainer/RecommendationCard/RecommendationCard.styles.ts b/...ntainers/RecommendationsOverviewContainer/RecommendationCard/RecommendationCard.styles.ts
@@ -1,28 +1,28 @@
-import { lighten } from "@mui/system";
 import { makeStyles } from "tss-react/mui";
-import { SPACING_2 } from "utils/layouts";
+import { MPT_BOX_SHADOW, MPT_SPACING_1, MPT_SPACING_2, MPT_SPACING_3 } from "../../../utils/layouts";
 
-const ALPHA = 0.95;
 const useStyles = makeStyles()((theme, color) => ({
   card: {
     display: "flex",
     flexDirection: "column",
     justifyContent: "space-between",
-    border: !color ? `1px solid ${lighten(theme.palette.info.main, 0.8)}` : "",
-    backgroundColor: color ? lighten(theme.palette[color].main, ALPHA) : ""
+    border: color ? `2px solid ${theme.palette[color].secondary}` : "",
+    boxShadow: MPT_BOX_SHADOW
   },
   content: {
     display: "flex",
     flexDirection: "column",
-    justifyContent: "space-between"
+    justifyContent: "space-between",
+    padding: MPT_SPACING_3
   },
   description: {
-    marginBottom: theme.spacing(SPACING_2)
+    marginBottom: MPT_SPACING_2
   },
   actions: {
     justifyContent: "space-between",
-    paddingLeft: theme.spacing(SPACING_2),
-    paddingRight: theme.spacing(SPACING_2)
+    paddingLeft: MPT_SPACING_3,
+    paddingRight: MPT_SPACING_3,
+    paddingBottom: MPT_SPACING_1
   }
 }));
 

diff --git a/ngui/ui/src/containers/RecommendationsOverviewContainer/RecommendationsOverview.styles.ts b/ngui/ui/src/containers/RecommendationsOverviewContainer/RecommendationsOverview.styles.ts
@@ -1,5 +1,5 @@
 import { makeStyles } from "tss-react/mui";
-import { SPACING_1 } from "utils/layouts";
+import { MPT_SPACING_3, SPACING_1 } from "utils/layouts";
 
 const useStyles = makeStyles()((theme) => ({
   actionBar: {
@@ -15,8 +15,8 @@ const useStyles = makeStyles()((theme) => ({
   cardsGrid: {
     display: "grid",
     gridTemplateColumns: "repeat(auto-fill, minmax(340px, 1fr))",
-    gap: theme.spacing(SPACING_1),
-    marginTop: theme.spacing(SPACING_1)
+    gap: MPT_SPACING_3,
+    marginTop: MPT_SPACING_3
   }
 }));
 

diff --git a/...containers/RecommendationsOverviewContainer/RecommendationsTable/RecommendationsTable.tsx b/...containers/RecommendationsOverviewContainer/RecommendationsTable/RecommendationsTable.tsx
@@ -64,7 +64,7 @@ const RecommendationsTable = ({
   );
 
   return (
-    <Box sx={{ width: "100%" }}>
+    <Box sx={{ width: "100%" }} className="MuiBox-WhiteCard">
       {isLoading ? (
         <TableLoader columnsCounter={columns.length} />
       ) : (

diff --git a/ngui/ui/src/containers/RecommendationsOverviewContainer/Summary/Summary.tsx b/ngui/ui/src/containers/RecommendationsOverviewContainer/Summary/Summary.tsx
@@ -246,7 +246,7 @@ const Summary = ({ totalSaving, lastCompleted, lastRun, nextRun, riSpExpensesSum
     s3DuplicateFinderCheckCardDefinition
   ];
 
-  return <SummaryGrid summaryData={summaryData} />;
+  return <SummaryGrid summaryData={summaryData} summaryStyle="customBox" />;
 };
 
 export default Summary;
diff --git a/ngui/ui/src/hooks/useRecommendationServices.ts b/ngui/ui/src/hooks/useRecommendationServices.ts
@@ -1,8 +1,8 @@
-import { AWS_CNR, AZURE_CNR, ALIBABA_CNR, GCP_CNR, NEBIUS } from "utils/constants";
-import { useIsNebiusConnectionEnabled } from "./useIsNebiusConnectionEnabled";
+import { AWS_CNR, AZURE_CNR, GCP_CNR } from "utils/constants";
 
 export const ALL_SERVICES = "all";
 
+// MPT_TODO: disabled to math BDR requirements
 export const ALIBABA_ECS = "alibabaEcs";
 export const ALIBABA_ECS_VPC = "alibabaEcsVpc";
 export const ALIBABA_EBS = "alibabaEbs";
@@ -21,26 +21,28 @@ export const AZURE_NETWORK = "azureNetwork";
 
 export const GCP_COMPUTE_ENGINE = "gcpComputeEngine";
 
+// MPT_TODO: disabled to math BDR requirements
 export const NEBIUS_SERVICE = "nebius";
 
-const ALIBABA_SERVICES = Object.freeze({
-  [ALIBABA_ECS]: {
-    type: ALIBABA_CNR,
-    name: "services.ecs"
-  },
-  [ALIBABA_ECS_VPC]: {
-    type: ALIBABA_CNR,
-    name: "services.ecs::vpc"
-  },
-  [ALIBABA_EBS]: {
-    type: ALIBABA_CNR,
-    name: "services.ebs"
-  },
-  [ALIBABA_RDS]: {
-    type: ALIBABA_CNR,
-    name: "services.rds"
-  }
-});
+// MPT_TODO: disabled to math BDR requirements
+// const ALIBABA_SERVICES = Object.freeze({
+//   [ALIBABA_ECS]: {
+//     type: ALIBABA_CNR,
+//     name: "services.ecs"
+//   },
+//   [ALIBABA_ECS_VPC]: {
+//     type: ALIBABA_CNR,
+//     name: "services.ecs::vpc"
+//   },
+//   [ALIBABA_EBS]: {
+//     type: ALIBABA_CNR,
+//     name: "services.ebs"
+//   },
+//   [ALIBABA_RDS]: {
+//     type: ALIBABA_CNR,
+//     name: "services.rds"
+//   }
+// });
 
 const AWS_SERVICES = Object.freeze({
   [AWS_IAM]: {
@@ -91,24 +93,22 @@ const GCP_SERVICES = Object.freeze({
   }
 });
 
-const NEBIUS_SERVICES = Object.freeze({
-  [NEBIUS_SERVICE]: {
-    type: NEBIUS,
-    name: "services.nebius"
-  }
-});
-
-export const useRecommendationServices = () => {
-  const isNebiusConnectionEnabled = useIsNebiusConnectionEnabled();
+// MPT_TODO: disabled to math BDR requirements
+// const NEBIUS_SERVICES = Object.freeze({
+//   [NEBIUS_SERVICE]: {
+//     type: NEBIUS,
+//     name: "services.nebius"
+//   }
+// });
 
-  return {
-    [ALL_SERVICES]: {
-      name: ALL_SERVICES
-    },
-    ...ALIBABA_SERVICES,
-    ...AWS_SERVICES,
-    ...AZURE_SERVICES,
-    ...GCP_SERVICES,
-    ...(isNebiusConnectionEnabled ? NEBIUS_SERVICES : {})
-  };
-};
+export const useRecommendationServices = () => ({
+  [ALL_SERVICES]: {
+    name: ALL_SERVICES
+  },
+  // MPT_TODO: disabled to math BDR requirements
+  // ...ALIBABA_SERVICES,
+  ...AZURE_SERVICES,
+  ...AWS_SERVICES,
+  ...GCP_SERVICES
+  // ...(isNebiusConnectionEnabled ? NEBIUS_SERVICES : {})
+});
diff --git a/ngui/ui/src/layouts/BaseLayout/BaseLayout.styles.ts b/ngui/ui/src/layouts/BaseLayout/BaseLayout.styles.ts
@@ -1,5 +1,5 @@
 import { makeStyles } from "tss-react/mui";
-import { SPACING_1 } from "utils/layouts";
+import { MPT_GRADIENT, SPACING_1 } from "utils/layouts";
 
 export const DRAWER_WIDTH = 250;
 
@@ -8,7 +8,7 @@ const useStyles = makeStyles()((theme) => ({
     boxShadow: "none"
   },
   headerSpacer: {
-    background: "linear-gradient(270deg, #00c9cd, #472aff, #392d9c);",
+    background: MPT_GRADIENT,
     height: "3px"
   },
   toolbar: {

diff --git a/ngui/ui/src/pages/Recommendations/Recommendations.tsx b/ngui/ui/src/pages/Recommendations/Recommendations.tsx
@@ -73,7 +73,7 @@ const RecommendationsPage = ({ isMock }) => {
     <>
       <ActionBar data={recommendationsActionBar} />
       <PageContentWrapper>
-        <Stack spacing={SPACING_2} sx={{ minHeight: "100%" }}>
+        <Stack spacing={SPACING_2} sx={{ minHeight: "100%", width: "100%" }}>
           <div>
             <DataSourceMultiSelect
               allDataSources={cloudAccounts.filter((cloudAccount) =>