diff --git a/pages/access/[serviceId]/[environmentId]/[resourceId]/[resourceInstanceId].js b/pages/access/[serviceId]/[environmentId]/[resourceId]/[resourceInstanceId].js index 0c59876a..4586372e 100644 --- a/pages/access/[serviceId]/[environmentId]/[resourceId]/[resourceInstanceId].js +++ b/pages/access/[serviceId]/[environmentId]/[resourceId]/[resourceInstanceId].js @@ -436,7 +436,10 @@ function ResourceInstance() { {Object.entries(tabs).map(([key, value]) => { return ( diff --git a/pages/access/[serviceId]/[environmentId]/access-control.js b/pages/access/[serviceId]/[environmentId]/access-control.js index 7b033d26..0e1540fb 100644 --- a/pages/access/[serviceId]/[environmentId]/access-control.js +++ b/pages/access/[serviceId]/[environmentId]/access-control.js @@ -5,7 +5,6 @@ import { CircularProgress, IconButton, InputAdornment, - MenuItem, Stack, } from "@mui/material"; import { useMutation } from "@tanstack/react-query"; @@ -14,7 +13,6 @@ import React, { useEffect, useMemo, useState } from "react"; import Button from "../../../../src/components/Button/Button"; import DashboardLayout from "../../../../src/components/DashboardLayout/DashboardLayout"; import Form from "../../../../src/components/FormElements/Form/Form"; -import TextField from "../../../../src/components/FormElements/TextField/TextField"; import useSnackbar from "../../../../src/hooks/useSnackbar"; import LoadingSpinnerSmall from "../../../../src/components/CircularProgress/CircularProgress"; import { useRouter } from "next/router"; @@ -47,6 +45,9 @@ import AccessControlIcon from "src/components/Icons/AccessControlIcon/AccessCont import { Text } from "src/components/Typography/Typography"; import DataGrid from "src/components/DataGrid/DataGrid"; import AccessControlHeader from "src/components/Access/AccessControl/AccessControlHeader"; +import Select from "src/components/FormElementsv2/Select/Select"; +import TextField from "src/components/FormElementsv2/TextField/TextField"; +import MenuItem from "src/components/FormElementsv2/MenuItem/MenuItem"; export const getServerSideProps = async () => { return { @@ -215,22 +216,16 @@ function AccessControl() { field: "name", headerName: "Name", flex: 1, - headerAlign: "center", - align: "center", }, { field: "emailAddress", headerName: "Email Address", flex: 1, - headerAlign: "center", - align: "center", }, { field: "role", headerName: "Role", flex: 1, - headerAlign: "center", - align: "center", valueGetter: (params) => { const role = params.row.role; if (role === "editor") { @@ -248,21 +243,15 @@ function AccessControl() { field: "resource", headerName: "Resource", flex: 1, - headerAlign: "center", - align: "center", }, { field: "resourceInstance", headerName: "Resource Instance", flex: 1, - headerAlign: "center", - align: "center", }, { field: "action", headerName: "Action", - headerAlign: "center", - align: "center", renderCell: (params) => { const role = params.row.role; if (role !== "root") { @@ -598,6 +587,8 @@ function AccessControl() { position="start" sx={{ marginRight: "0px", + paddingRight: "0px !important", + borderLeft: "none !important", "& .MuiIconButton-root": { padding: 0, }, @@ -610,40 +601,37 @@ function AccessControl() { ), }} /> - value || "Role"} > {["Editor", "Reader"].map((option) => ( {option} ))} - + + + + { + remove(index); + }} + > + + - {index !== 0 && ( - - { - remove(index); - }} - > - - - - )} ); })} @@ -743,11 +731,12 @@ function AccessControl() { formData={deleteformik} title={`Delete User`} buttonLabel={"Delete"} - buttonColour={"red"} + buttonColour={"#D92D20"} subtitle={`Are you sure you want to Delete ${modifyFormikValue.emailAddress}?`} message={ "To confirm deletion, please enter deleteme , in the field below:" } + isLoading={deleteUserMutation.isLoading} /> { + useEffect(() => { if (source) { setCurrentSource(source); } @@ -279,6 +280,18 @@ useEffect(() => { (instance) => instance.kubernetesDashboardEndpoint ); + const handleViewAccountConfigInstructions = (row) => { + setViewInstructionsItem(row); + const result_params = row.result_params; + setCloudProvider( + result_params?.cloud_provider || !!result_params?.aws_account_id + ? "aws" + : "gcp" + ); + setAccountConfigMethod(result_params?.account_configuration_method); + handleOrgIdModalOpen(); + }; + const columns = useMemo(() => { const columnDefinition = [ { @@ -286,8 +299,6 @@ useEffect(() => { headerName: "ID", flex: 0.9, minWidth: 200, - align: "center", - headerAlign: "center", renderCell: (params) => { const instanceId = params.row.id; const instanceIdDisplay = isCurrentResourceBYOA @@ -321,16 +332,12 @@ useEffect(() => { headerName: "Resource Name", flex: 1, minWidth: 235, - align: "center", - headerAlign: "center", renderCell: () => selectedResource?.name, }, { field: "status", headerName: "Lifecycle Status", flex: 0.9, - align: "center", - headerAlign: "center", minWidth: 160, renderCell: (params) => { const status = params.row.status; @@ -342,16 +349,13 @@ useEffect(() => { "PENDING_DEPENDENCY", "UNKNOWN", "DEPLOYING", + "READY", + "FAILED", ].includes(status); const statusSytlesAndLabel = getResourceInstanceStatusStylesAndLabel(status); return ( - + {showInstructions && ( { alignItems: "center", }} onClick={() => { - const result_params = params.row.result_params; - setCloudProvider( - result_params?.cloud_provider || - !!result_params?.aws_account_id - ? "aws" - : "gcp" - ); - - setAccountConfigMethod( - result_params?.account_configuration_method - ); - handleOrgIdModalOpen(); + handleViewAccountConfigInstructions(params.row); }} > @@ -397,24 +390,18 @@ useEffect(() => { headerName: "Load", flex: 0.9, minWidth: 100, - align: "center", - headerAlign: "center", renderCell: (params) => { const instanceLoadStatus = params.row.instanceLoadStatus; return ( - + {instanceLoadStatus === "UNKNOWN" && "-"} {instanceLoadStatus === "POD_IDLE" && ( Low )} @@ -423,6 +410,7 @@ useEffect(() => { src={SpeedoMeterMedium} width={54} height={54} + alt="Medium" style={{ marginBottom: "-25px" }} /> )} @@ -431,6 +419,7 @@ useEffect(() => { src={SpeedoMeterHigh} width={54} height={54} + alt="High" style={{ marginBottom: "-25px" }} /> )} @@ -443,8 +432,6 @@ useEffect(() => { headerName: "Created On", flex: 1, minWidth: 235, - align: "center", - headerAlign: "center", valueGetter: (params) => { const value = formatDateLocal(params.row.created_at); return value; @@ -455,8 +442,6 @@ useEffect(() => { headerName: "Last Modified", flex: 1, minWidth: 225, - align: "center", - headerAlign: "center", valueGetter: (params) => { const value = formatDateLocal(params.row.last_modified_at); return value; @@ -466,8 +451,6 @@ useEffect(() => { field: "region", headerName: "Region", flex: 1, - align: "center", - headerAlign: "center", minWidth: 155, renderCell: (params) => { const region = params.row.region; @@ -482,7 +465,7 @@ useEffect(() => { } - width={params.colDef.computedWidth} + justifyContent="start" /> ); }, @@ -495,8 +478,6 @@ useEffect(() => { headerName: "Health Status", flex: 1, minWidth: 200, - align: "center", - headerAlign: "center", renderCell: (params) => { const status = params?.row?.status; let mainResource = []; @@ -559,8 +540,6 @@ useEffect(() => { field: "cloud_provider", headerName: "Account ID", flex: 0.8, - align: "center", - headerAlign: "center", renderCell: (params) => { let Logo; const provider = params.row.cloud_provider; @@ -579,8 +558,6 @@ useEffect(() => { field: "cloud_provider", headerName: "☁️ Provider(s)", flex: 0.8, - align: "center", - headerAlign: "center", minWidth: 130, renderCell: (params) => { const cloudProvider = isCurrentResourceBYOA @@ -605,8 +582,6 @@ useEffect(() => { field: "kubernetesDashboardEndpoint", headerName: "Dashboard Endpoint", flex: 1, - headerAlign: "center", - align: "center", minWidth: 150, renderCell: (params) => { const { row } = params; @@ -623,6 +598,7 @@ useEffect(() => { href={"https://" + dashboardEndpoint} target="_blank" externalLinkArrow + justifyContent="start" /> ); }, @@ -773,12 +749,13 @@ useEffect(() => { defaultCloudProvider = "gcp"; } } + //create resource instance const createformik = useFormik({ initialValues: { serviceId: serviceId, cloud_provider: defaultCloudProvider, - network_type: "", + network_type: "PUBLIC", region: "", requestParams: { ...requestParams }, serviceProviderId: service?.serviceProviderId, @@ -955,6 +932,17 @@ useEffect(() => { } } + let isCloudProvider = false; + for (const param of schemaArray) { + if (["cloud_provider"].includes(param.key)) { + isCloudProvider = true; + } + } + + if (!isCloudProvider || isCustomNetworkEnabled) { + delete data["network_type"]; + } + if (!isTypeError) { if (isError) { snackbar.showError(`${requiredFieldName} is required`); @@ -1893,7 +1881,12 @@ useEffect(() => { /> ) : ( <> - + { fetchResourceInstancesOfSelectedResource } cloudFormationTemplateUrlNoLB={cloudFormationTemplateUrlNoLB} + viewInstructionsItem={viewInstructionsItem} /> { + return ( + + {children} + + ); +}; + +const OrgIdContainer = (props) => { + const { orgId } = props; + return ( + + + + {orgId} + + + + + + ); +}; + +const CreationTimeInstructions = (props) => { + const { + accountConfigMethod, + cloudformationlink, + terraformlink, + cloudFormationGuide, + terraformGuide, + orgId, + accountConfigStatus, + cloudFormationTemplateUrl, + cloudformationNoLBlink, + } = props; + + if (accountConfigStatus === "FAILED") { + return ( + + The account configuration could not be saved because of system error. + Please try again. If the issue continues, reach out to support for + assistance.{" "} + + ); + } + + if (accountConfigMethod === "CloudFormation") { + if (!cloudFormationTemplateUrl) { + return ( + + Your CloudFormation Stack is being configured. Please check back + shortly for detailed setup instructions. + + ); + } + + return ( + <> + + Your account details have been saved. To complete the setup please + create your CloudFormation Stack using the provided template{" "} + {cloudformationlink}. + + + + If an existing AWSLoadBalancerControllerIAMPolicy policy causes an + error while creating the CloudFormation stack, use{" "} + {cloudformationNoLBlink} CloudFormation template instead. + + + For guidance, our instructional video is available{" "} + {cloudFormationGuide}. + + + ); + } + + return ( + <> + + Your account details have been saved. To complete the setup execute the + Terraform scripts available {terraformlink}, by using the Account Config + Identity ID below. + + + + + For guidance, our instructional video is available {terraformGuide}. + + + ); +}; + +const NonCreationTimeInstructions = (props) => { + const { + viewInstructionsItem, + accountConfigMethod, + terraformlink, + cloudformationlink, + cloudFormationGuide, + terraformGuide, + orgId, + cloudFormationTemplateUrl, + cloudformationNoLBlink, + } = props; + + return ( + <> + + + {STATUS_DESCRIPTION_MAP[viewInstructionsItem?.status] ?? + "To complete the account configuration setup -"}{" "} + + + + {(!accountConfigMethod || + accountConfigMethod === "CloudFormation") && ( + + + + + + {cloudFormationTemplateUrl ? ( + <> + + + For AWS CloudFormation users: Please create your + CloudFormation Stack using the provided template{" "} + {cloudformationlink}. Watch the CloudFormation{" "} + {cloudFormationGuide} for help. + + + If an existing AWSLoadBalancerControllerIAMPolicy policy + causes an error while creating the CloudFormation stack, + use {cloudformationNoLBlink} CloudFormation template + instead. + + + + ) : ( + + For AWS CloudFormation users: Your CloudFormation Stack + is being configured. Please check back shortly for detailed + setup instructions. + + )} + + )} + {(!accountConfigMethod || accountConfigMethod === "Terraform") && ( + + + + + + + For AWS/GCP Terraform users: Execute the Terraform + scripts available {terraformlink}, by using the Account Config + Identity ID below. For guidance our Terraform instructional + video is {terraformGuide}. + + + )} + + + + + + ); +}; const CloudFormationLink = ({ cloudFormationTemplateUrl }) => { const updateTemplateURL = (url) => { @@ -66,6 +334,7 @@ function CloudProviderAccountOrgIdModal(props) { setCloudFormationTemplateUrlNoLB, fetchResourceInstancesOfSelectedResource, cloudFormationTemplateUrlNoLB, + viewInstructionsItem, } = props; const terraformlink = isAccessPage ? ( @@ -75,8 +344,7 @@ function CloudProviderAccountOrgIdModal(props) { cursor: "pointer", textDecoration: "underline", color: "#7F56D9", - fontWeight: 700, - fontStyle: "italic", + fontWeight: 600, }} component="span" onClick={() => { @@ -160,13 +428,30 @@ function CloudProviderAccountOrgIdModal(props) {
- - - Account Configuration Instructions + + + + + {isAccountCreation || + !STATUS_TITLE_MAP[viewInstructionsItem?.status] + ? "Account Configuration Instructions" + : STATUS_TITLE_MAP[viewInstructionsItem?.status]} - +
@@ -203,6 +488,8 @@ function CloudProviderAccountOrgIdModal(props) { /> ) : (
-
@@ -234,279 +526,3 @@ function CloudProviderAccountOrgIdModal(props) { } export default CloudProviderAccountOrgIdModal; - -const CreationTimeInstructions = (props) => { - const { - accountConfigMethod, - cloudformationlink, - terraformlink, - cloudFormationGuide, - terraformGuide, - orgId, - accountConfigStatus, - cloudFormationTemplateUrl, - cloudformationNoLBlink, - } = props; - - if (accountConfigStatus === "FAILED") { - return ( - - The account configuration could not be saved because of system error. - Please try again. If the issue continues, reach out to support for - assistance.{" "} - - ); - } - - if (accountConfigMethod === "CloudFormation") { - if (!cloudFormationTemplateUrl) { - return ( - - Your CloudFormation Stack is being configured. Please check back - shortly for detailed setup instructions. - - ); - } - - return ( - <> - - Your account details have been saved. To complete the setup please - create your CloudFormation Stack using the provided template{" "} - {cloudformationlink}. - - - - If an existing AWSLoadBalancerControllerIAMPolicy policy causes an - error while creating the CloudFormation stack, use{" "} - {cloudformationNoLBlink} CloudFormation template instead. - - - For guidance, our instructional video is available{" "} - {cloudFormationGuide}. - - - ); - } - - return ( - <> - - Your account details have been saved. To complete the setup execute the - Terraform scripts available {terraformlink}, by using the Account Config - Identity ID below. - - - - - For guidance, our instructional video is available {terraformGuide}. - - - ); -}; - -const NonCreationTimeInstructions = (props) => { - const { - accountConfigMethod, - terraformlink, - cloudformationlink, - cloudFormationGuide, - terraformGuide, - orgId, - cloudFormationTemplateUrl, - cloudformationNoLBlink, - } = props; - - return ( - <> - - - To complete the account configuration setup - - - - - {(!accountConfigMethod || - accountConfigMethod === "CloudFormation") && ( - - - - - - {cloudFormationTemplateUrl ? ( - <> - - - For AWS CloudFormation users: Please create your - CloudFormation Stack using the provided template{" "} - {cloudformationlink}. Watch the CloudFormation{" "} - {cloudFormationGuide} for help. - - - If an existing AWSLoadBalancerControllerIAMPolicy policy - causes an error while creating the CloudFormation stack, - use {cloudformationNoLBlink} CloudFormation template - instead. - - - - ) : ( - - For AWS CloudFormation users: Your CloudFormation Stack - is being configured. Please check back shortly for detailed - setup instructions. - - )} - - )} - {(!accountConfigMethod || accountConfigMethod === "Terraform") && ( - - - - - - - For AWS/GCP Terraform users: Execute the Terraform - scripts available {terraformlink}, by using the Account Config - Identity ID below. For guidance our Terraform instructional - video is {terraformGuide}. - - - )} - - - - - - ); -}; - -const OrgIdContainer = (props) => { - const { orgId } = props; - return ( - - - - - - ); -}; - -const StyledContainer = styled(Box)({ - position: "fixed", - top: "0", - right: "50%", - transform: "translateX(50%)", - background: "white", - borderRadius: "12px", - boxShadow: - "0px 8px 8px -4px rgba(16, 24, 40, 0.03), 0px 20px 24px -4px rgba(16, 24, 40, 0.08)", - padding: "24px", - width: "100%", - maxWidth: "550px", - display: "flex", - flexDirection: "column", - justifyContent: "flex-start", -}); - -const Header = styled(Box)({ - width: "100%", - display: "flex", - justifyContent: "space-between", - alignItems: "center", -}); - -const Content = styled(Box)({ - marginTop: "20px", - width: "100%", -}); - -const Footer = styled(Box)({ - marginTop: "24px", - width: "100%", - display: "flex", - justifyContent: "flex-end", - alignItems: "center", - gap: "16px", -}); - -const StyledLink = styled(Link)({ - textDecoration: "underline", - color: "#7F56D9", - fontWeight: 700, - fontStyle: "italic", -}); - -const List = styled(Box)({ - display: "flex", - flexDirection: "column", - gap: "8px", - marginTop: "8px", -}); - -const ListItem = styled(Box)({ - display: "flex", - justifyContent: "flex-start", - alignItems: "flex-start", - gap: "12px", -}); - -const ListItemIcon = styled(Box)({ - flexShrink: 0, -}); - -const ArrowBullet = (props) => ( - - - -); diff --git a/src/components/CopyClipboardButton/CopyClipboardButton.jsx b/src/components/CopyClipboardButton/CopyClipboardButton.jsx index 8f197521..224886eb 100644 --- a/src/components/CopyClipboardButton/CopyClipboardButton.jsx +++ b/src/components/CopyClipboardButton/CopyClipboardButton.jsx @@ -1,12 +1,11 @@ import { useState } from "react"; import clipboard from "clipboardy"; import Tooltip from "../Tooltip/Tooltip"; -import { IconButton, styled } from "@mui/material"; -import copyIcon from "../../../public/assets/images/dashboard/copy.svg"; -import Image from "next/image"; +import { IconButton } from "@mui/material"; +import DataGridCopyIcon from "../Icons/CopyIcon/DataGridCopyIcon"; -const CopyToClipbpoardButton = (props) => { - const { text = "", size = "medium", buttonStyles = {} } = props; +const CopyToClipboardButton = (props) => { + const { text = "", iconProps, buttonStyles = {} } = props; const [tooltipText, setTooltipText] = useState("Click to copy"); function handleClick() { @@ -33,17 +32,10 @@ const CopyToClipbpoardButton = (props) => { placement="top" > - + ); }; -export default CopyToClipbpoardButton; - -const CopyIcon = styled(Image, { - shouldForwardProp: (prop) => prop !== "size", -})(({ size }) => ({ - height: size === "small" ? "18px" : "24px", - width: size === "small" ? "18px" : "24px", -})); +export default CopyToClipboardButton; diff --git a/src/components/DashboardLayout/ProfileDropdown.jsx b/src/components/DashboardLayout/ProfileDropdown.jsx index c89580bf..75fbda79 100644 --- a/src/components/DashboardLayout/ProfileDropdown.jsx +++ b/src/components/DashboardLayout/ProfileDropdown.jsx @@ -60,6 +60,10 @@ function ProfileDropdown(props) { setSideDrawerOpen(true); } + function closeSideDrawer() { + setSideDrawerOpen(false); + } + return ( {Object.values(userAllData)[0]?.name} @@ -256,14 +260,13 @@ function ProfileDropdown(props) { { - setSideDrawerOpen(false); - }} + closeDrawer={closeSideDrawer} RenderUI={ } containerStyles={{ padding: "12px 32px" }} diff --git a/src/components/DataGrid/DataGrid.jsx b/src/components/DataGrid/DataGrid.jsx index e750f097..56b2b99c 100644 --- a/src/components/DataGrid/DataGrid.jsx +++ b/src/components/DataGrid/DataGrid.jsx @@ -77,7 +77,7 @@ const DataGrid = styled( "& .MuiDataGrid-cell": { color: "#475467", fontSize: "14px", - fontWeight: 400, + fontWeight: 500, lineHeight: "20px", }, "& .MuiDataGrid-columnHeader:focus": { diff --git a/src/components/DataGrid/DataGridText.tsx b/src/components/DataGrid/DataGridText.tsx index 7b0dcc61..78981521 100644 --- a/src/components/DataGrid/DataGridText.tsx +++ b/src/components/DataGrid/DataGridText.tsx @@ -1,11 +1,12 @@ import { FC, useCallback, useState } from "react"; import Link from "next/link"; import clipboard from "clipboardy"; -import { IconButton, Stack, Tooltip, Typography } from "@mui/material"; +import { IconButton, Stack, Typography } from "@mui/material"; import type * as CSS from "csstype"; import DataGridCopyIcon from "../Icons/CopyIcon/DataGridCopyIcon"; import { styleConfig } from "src/providerConfig"; +import Tooltip from "../Tooltip/Tooltip"; type LinkProps = { href: string; @@ -25,6 +26,7 @@ type DataGridTextProps = { onClick?: () => void; color?: "default" | "primary"; style?: CSS.Properties; + justifyContent?: "center" | "start" | "end"; }; const DataGridText: FC = ({ @@ -34,6 +36,7 @@ const DataGridText: FC = ({ onClick, color = "default", style = {}, + justifyContent = "start", }) => { const [tooltipText, setTooltipText] = useState("Click to copy"); const { href, target = "_self", isUnderlined = false } = linkProps || {}; @@ -93,7 +96,7 @@ const DataGridText: FC = ({ diff --git a/src/components/DataTable/DataTable.tsx b/src/components/DataTable/DataTable.tsx index b14a072f..0da3538e 100644 --- a/src/components/DataTable/DataTable.tsx +++ b/src/components/DataTable/DataTable.tsx @@ -203,7 +203,7 @@ const DataTable = (props: DataTableProps): ReactNode => { {headerGroup.headers.map((header) => { const sortDirection = header.column.getIsSorted(); const columnAlignment = - header.column.columnDef.meta?.align || "center"; + header.column.columnDef.meta?.align || "left"; return ( (props: DataTableProps): ReactNode => { {row.getVisibleCells().map((cell) => { const cellValue = cell.getValue(); const columnAlignment = - cell.column.columnDef.meta?.align || "center"; + cell.column.columnDef.meta?.align || "left"; let title = ""; if ( ["string", "number", "boolean"].includes( @@ -271,6 +271,10 @@ const DataTable = (props: DataTableProps): ReactNode => { key={cell.id} align={columnAlignment} title={title} + sx={{ + fontSize: "14px", + fontWeight: "500", + }} > {flexRender( cell.column.columnDef.cell, diff --git a/src/components/Dialog/ConfirmDialog.jsx b/src/components/Dialog/ConfirmDialog.jsx index 22e4512b..229f606a 100644 --- a/src/components/Dialog/ConfirmDialog.jsx +++ b/src/components/Dialog/ConfirmDialog.jsx @@ -128,7 +128,7 @@ export default function ConfirmationDialog(props) { }} type="submit" variant="contained" - style={{ backgroundColor: buttonColour }} + bgColor={buttonColour} // disabled={isDeleteEnable} disabled={isLoading} > diff --git a/src/components/DynamicForm/DynamicField.tsx b/src/components/DynamicForm/DynamicField.tsx index 179d9c26..8cc1957c 100644 --- a/src/components/DynamicForm/DynamicField.tsx +++ b/src/components/DynamicForm/DynamicField.tsx @@ -1,12 +1,5 @@ import { FC, useState } from "react"; -import { - SxProps, - Theme, - Stack, - InputAdornment, - Box, - Tooltip, -} from "@mui/material"; +import { SxProps, Theme, Stack, InputAdornment, Box } from "@mui/material"; import Generator from "generate-password"; import FieldLabel from "src/components/FormElements/FieldLabel/FieldLabel"; import Autocomplete from "src/components/FormElementsv2/AutoComplete/AutoComplete"; @@ -20,6 +13,7 @@ import TextField from "src/components/FormElementsv2/TextField/TextField"; import FieldError from "src/components/FormElementsv2/FieldError/FieldError"; import { Text } from "src/components/Typography/Typography"; import KeyIcon from "src/components/Icons/Key/KeyIcon"; +import Tooltip from "../Tooltip/Tooltip"; type DynamicFieldProps = { field: any; diff --git a/src/components/FormElements/TextCopy/TextCopy.jsx b/src/components/FormElements/TextCopy/TextCopy.jsx index bae7b2dc..3178ae3a 100644 --- a/src/components/FormElements/TextCopy/TextCopy.jsx +++ b/src/components/FormElements/TextCopy/TextCopy.jsx @@ -1,9 +1,10 @@ -import { Box, ButtonBase, Tooltip, styled } from "@mui/material"; +import { Box, ButtonBase, styled } from "@mui/material"; import MuiInputAdornment from "@mui/material/InputAdornment"; import ContentCopyIcon from "@mui/icons-material/ContentCopy"; import { useState } from "react"; import clipboard from "clipboardy"; import { Text } from "../../Typography/Typography"; +import Tooltip from "src/components/Tooltip/Tooltip"; const TextCopy = (props) => { const { copyButton, ...restProps } = props; diff --git a/src/components/FormElements/TextField/TextField.jsx b/src/components/FormElements/TextField/TextField.jsx index 224078f3..0bfd73e9 100644 --- a/src/components/FormElements/TextField/TextField.jsx +++ b/src/components/FormElements/TextField/TextField.jsx @@ -1,4 +1,4 @@ -import { Box, ButtonBase,Tooltip, styled } from "@mui/material"; +import { Box, ButtonBase, styled } from "@mui/material"; import MuiInputAdornment from "@mui/material/InputAdornment"; import MuiTextField from "@mui/material/TextField"; import ContentCopyIcon from "@mui/icons-material/ContentCopy"; @@ -9,12 +9,13 @@ import clipboard from "clipboardy"; import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown"; import SearchIcon from "@mui/icons-material/Search"; import IconButton from "@mui/material/IconButton"; +import Tooltip from "src/components/Tooltip/Tooltip"; const StyledTextField = styled(MuiTextField, { shouldForwardProp: (prop) => { return prop !== "readonly"; }, -})(({ readonly }) => ({ +})(({ readonly }) => ({ boxShadow: "0px 1px 2px rgba(16, 24, 40, 0.05)", borderRadius: 8, flexGrow: 1, diff --git a/src/components/FormElementsv2/PasswordField/PasswordField.jsx b/src/components/FormElementsv2/PasswordField/PasswordField.jsx index 6d22d332..2a630e95 100644 --- a/src/components/FormElementsv2/PasswordField/PasswordField.jsx +++ b/src/components/FormElementsv2/PasswordField/PasswordField.jsx @@ -1,10 +1,11 @@ import { useState } from "react"; import Generator from "generate-password"; -import { InputAdornment, Tooltip, Box } from "@mui/material"; +import { InputAdornment, Box } from "@mui/material"; import TextField from "../TextField/TextField"; import KeyIcon from "src/components/Icons/Key/KeyIcon"; import { Text } from "src/components/Typography/Typography"; +import Tooltip from "src/components/Tooltip/Tooltip"; export const PasswordField = (props) => { const { diff --git a/src/components/FormElementsv2/PasswordField/PasswordWithOutBorderField.jsx b/src/components/FormElementsv2/PasswordField/PasswordWithOutBorderField.jsx index 1833f90e..4be53550 100644 --- a/src/components/FormElementsv2/PasswordField/PasswordWithOutBorderField.jsx +++ b/src/components/FormElementsv2/PasswordField/PasswordWithOutBorderField.jsx @@ -1,6 +1,7 @@ import { useState } from "react"; -import { InputAdornment, Stack, Tooltip, Typography } from "@mui/material"; +import { InputAdornment, Stack, Typography } from "@mui/material"; import { Text } from "src/components/Typography/Typography"; +import Tooltip from "src/components/Tooltip/Tooltip"; function convertToAsterisks(str) { // Get the length of the input string diff --git a/src/components/Forms/CreateResourceInstanceForm.jsx b/src/components/Forms/CreateResourceInstanceForm.jsx index d619223c..21b8aaf2 100644 --- a/src/components/Forms/CreateResourceInstanceForm.jsx +++ b/src/components/Forms/CreateResourceInstanceForm.jsx @@ -188,9 +188,7 @@ function CreateResourceInstanceForm(props) { const cloudProviderFieldExists = createSchema.find( (field) => field.key === "cloud_provider" ); - const networkTypeFieldExists = createSchema.find( - (field) => field.key === "network_type" - ); + const regionFieldExists = createSchema.find( (field) => field.key === "region" ); @@ -252,6 +250,9 @@ function CreateResourceInstanceForm(props) { const selectedCustomNetworkId = formData.values?.custom_network_id ?? ""; + const networkTypeFieldExists = + cloudProviderFieldExists && !isCustomNetworkEnabled; + if (isSchemaLoading) return ( @@ -329,31 +330,7 @@ function CreateResourceInstanceForm(props) { )} - {networkTypeFieldExists && ( - - Network Type - - Type of Network - - - {["PUBLIC", "INTERNAL"].map((option) => ( - - {option} - - ))} - - - {formData.touched.network_type && formData.errors.network_type} - - - )} + {regionFieldExists && ( Region @@ -397,6 +374,34 @@ function CreateResourceInstanceForm(props) { )} + {networkTypeFieldExists && ( + + Network Type + + Type of Network + + + {[{ Public: "PUBLIC" }, { Internal: "INTERNAL" }].map((item) => + Object.entries(item).map(([key, value]) => ( + + {key} + + )) + )} + + + {formData.touched.network_type && formData.errors.network_type} + + + )} + {customNetworkFieldExists && ( Custom Network @@ -542,7 +547,7 @@ function CreateResourceInstanceForm(props) { if (isBYOA && !shouldShowParamField(param.key)) { return null; } - if (param.type === "Password") { + if (param.type === "Password" || param.key?.includes("password")) { return ( {param.required == true ? ( diff --git a/src/components/GridCellExpand/GridCellExpand.tsx b/src/components/GridCellExpand/GridCellExpand.tsx index a0144342..f31f01b1 100644 --- a/src/components/GridCellExpand/GridCellExpand.tsx +++ b/src/components/GridCellExpand/GridCellExpand.tsx @@ -1,6 +1,6 @@ import Box from "@mui/material/Box"; import React from "react"; -import CopyToClipbpoardButton from "../CopyClipboardButton/CopyClipboardButton"; +import CopyToClipboardButton from "../CopyClipboardButton/CopyClipboardButton"; import Link from "next/link"; import ArrowOutwardIcon from "@mui/icons-material/ArrowOutward"; @@ -38,7 +38,7 @@ const GridCellExpand = React.memo(function GridCellExpand( onClick = () => {}, href, target = "_self", - justifyContent = "center", + justifyContent = "start", externalLinkArrow, } = props; const wrapper = React.useRef(null); @@ -101,7 +101,7 @@ const GridCellExpand = React.memo(function GridCellExpand( > {startIcon} {Boolean(copyButton && value) && ( - ( - - - - - - - - - - - - - ); export default InstructionsModalIcon; diff --git a/src/components/Icons/ArrowIcon/ArrowBulletIcon.tsx b/src/components/Icons/ArrowIcon/ArrowBulletIcon.tsx new file mode 100644 index 00000000..57e7dd12 --- /dev/null +++ b/src/components/Icons/ArrowIcon/ArrowBulletIcon.tsx @@ -0,0 +1,19 @@ +const ArrowBulletIcon = (props) => ( + + + +); + +export default ArrowBulletIcon; diff --git a/src/components/Icons/PrivateService/PrivateService.jsx b/src/components/Icons/PrivateService/PrivateService.jsx deleted file mode 100644 index fc3e81cf..00000000 --- a/src/components/Icons/PrivateService/PrivateService.jsx +++ /dev/null @@ -1,29 +0,0 @@ -import * as React from "react"; - -const PrivateServiceIcon = (props) => { - let { color = "" } = props; - const { width = 26, height = 26 } = props; - if (!color) { - color = "#fff"; - } - - return ( - - - - - ); -}; -export default PrivateServiceIcon; diff --git a/src/components/Icons/Refresh/RefreshDisabled.jsx b/src/components/Icons/Refresh/RefreshDisabled.jsx deleted file mode 100644 index 402e5251..00000000 --- a/src/components/Icons/Refresh/RefreshDisabled.jsx +++ /dev/null @@ -1,24 +0,0 @@ -import * as React from "react"; -const RefreshIconDisabled = (props) => { - const { color = "#EAECF0" } = props; - - return ( - - - - ); -}; - -export default RefreshIconDisabled; diff --git a/src/components/Icons/SideNavbar/AccessControl/AccessControl.jsx b/src/components/Icons/SideNavbar/AccessControl/AccessControl.jsx deleted file mode 100644 index 9a97ab8f..00000000 --- a/src/components/Icons/SideNavbar/AccessControl/AccessControl.jsx +++ /dev/null @@ -1,32 +0,0 @@ -import { styleConfig } from "src/providerConfig"; - -const AccessControlNavIcon = (props) => { - const { active, disabled, ...restProps } = props; - let color = props.color || styleConfig.sidebarIconColor; - - if (active) { - color = styleConfig.sidebarIconActiveColor; - } - if (disabled) { - color = styleConfig.sidebarIconDisabledColor; - } - - return ( - - - - ); -}; -export default AccessControlNavIcon; diff --git a/src/components/Icons/SideNavbar/AccountManagement/AccountManagement.tsx b/src/components/Icons/SideNavbar/AccountManagement/AccountManagement.tsx deleted file mode 100644 index 85774066..00000000 --- a/src/components/Icons/SideNavbar/AccountManagement/AccountManagement.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import { styleConfig } from "src/providerConfig"; - -const AccountManagementIcon = (props) => { - const { active, disabled, ...restProps } = props; - let color = props.color || styleConfig.sidebarIconColor; - - if (active) { - color = styleConfig.sidebarIconActiveColor; - } - if (disabled) { - color = styleConfig.sidebarIconDisabledColor; - } - - return ( - - - - ); -}; -export default AccountManagementIcon; diff --git a/src/components/Icons/SideNavbar/Events/Events.jsx b/src/components/Icons/SideNavbar/Events/Events.jsx deleted file mode 100644 index 01f0c2b6..00000000 --- a/src/components/Icons/SideNavbar/Events/Events.jsx +++ /dev/null @@ -1,32 +0,0 @@ -import { styleConfig } from "src/providerConfig"; - -const EventsNavIcon = (props) => { - const { active, disabled, ...restProps } = props; - let color = props.color || styleConfig.sidebarIconColor; - - if (active) { - color = styleConfig.sidebarIconActiveColor; - } - if (disabled) { - color = styleConfig.sidebarIconDisabledColor; - } - - return ( - - - - ); -}; -export default EventsNavIcon; diff --git a/src/components/InfoCard/InfoCard.jsx b/src/components/InfoCard/InfoCard.jsx deleted file mode 100644 index 559820a6..00000000 --- a/src/components/InfoCard/InfoCard.jsx +++ /dev/null @@ -1,48 +0,0 @@ -import { Box, styled } from "@mui/material"; - -export const InfoCardContainer = styled(Box)(() => ({ - background: "#FFFFFF", - border: "1px solid #EAECF0", - boxShadow: - "0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06)", - borderRadius: "12px", - display: "flex", - gap: "12px", - marginTop: "20px", -})); - - -export const ColumnTitle = styled("h4")({ - fontWeight: 600, - fontSize: "16px", - lineHeight: "24px", - color: "#475467", - padding: "10px 0px", - textAlign: "center", - borderBottom: "1px solid #EAECF0;", -}); - -export const Column = (props) => { - const { title, children } = props; - return ( - - {title} - - {children} - - - ); -}; diff --git a/src/components/InfoTable/InfoTable.jsx b/src/components/InfoTable/InfoTable.jsx deleted file mode 100644 index f5171d89..00000000 --- a/src/components/InfoTable/InfoTable.jsx +++ /dev/null @@ -1,71 +0,0 @@ -import { Stack, Tooltip, styled } from "@mui/material"; -import MuiTableContainer from "@mui/material/TableContainer"; -import MuiTable from "@mui/material/Table"; -import MuiTableBody from "@mui/material/TableBody"; -import MuiTableRow from "@mui/material/TableRow"; -import MuiTableCell from "@mui/material/TableCell"; -import { Text } from "../Typography/Typography"; -import CopyToClipbpoardButton from "../CopyClipboardButton/CopyClipboardButton"; - -export const TableContainer = styled(MuiTableContainer)(() => ({ - background: "#FFFFFF", - border: "1px solid #EAECF0", - boxShadow: - "0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06)", - borderRadius: "12px", - padding: "10px 20px", -})); - -export const Table = styled(MuiTable)(() => ({})); - -export const TableBody = styled(MuiTableBody)(() => ({})); - -export const TableRow = styled(MuiTableRow)(() => ({ - borderBottom: "1px solid #EAECF0", - "&:last-child": { - borderBottom: "none", - }, -})); - -export const TableCell = styled(MuiTableCell)(() => ({ - padding: "16px 20px", - borderBottom: "none", -})); - -export const CellTitle = styled((props) => ( - -))({}); - -export const CellSubtext = styled((props) => ( - -))({ - mt: "2px", -}); - -export const CellDescription = (props) => { - const { children } = props; - - return ( - - - {/* Div is necessary for showing the Tooltip */} -
- - {typeof children === "string" - ? `${children?.slice(0, 100)}${children?.length > 100 ? "..." : ""}` - : children} - -
- - {children && typeof children === "string" && ( - - )} - - ); -}; diff --git a/src/components/KeyValueCopyTable/KeyValueCopyTable.jsx b/src/components/KeyValueCopyTable/KeyValueCopyTable.jsx deleted file mode 100644 index 09f5654e..00000000 --- a/src/components/KeyValueCopyTable/KeyValueCopyTable.jsx +++ /dev/null @@ -1,65 +0,0 @@ -import { Box, Stack, styled } from "@mui/material"; -import { Text } from "../Typography/Typography"; -import CopyButton from "../Button/CopyButton"; - -const RowContainer = styled(Box)({ - display: "flex", - flexDirection: "row", - border: "1px solid #D0D5DD", - borderRadius: "8px", - boxShadow: "0px 1px 2px 0px #1018280D", - "& + &": { - marginTop: "16px", - }, -}); - -export const KeyValueCopyTableRow = (props) => { - const { label, value, copyValue } = props; - return ( - - - - {label} - - - - - - - {value} - - - - - - - - ); -}; - -const KeyValueCopyTable = (props) => { - const { rows } = props; - return rows.map((rowData, index) => { - return ( - - ); - }); -}; - -export default KeyValueCopyTable; diff --git a/src/components/MarketplaceServiceSidebar/Icons/ResourceDropdownArrow.jsx b/src/components/MarketplaceServiceSidebar/Icons/ResourceDropdownArrow.jsx deleted file mode 100644 index 57595e87..00000000 --- a/src/components/MarketplaceServiceSidebar/Icons/ResourceDropdownArrow.jsx +++ /dev/null @@ -1,26 +0,0 @@ -const ResourceDropdownArrow = ({ isInverted }) => { - return ( - - - - ); -}; - -export default ResourceDropdownArrow; diff --git a/src/components/MarketplaceServiceSidebar/Icons/ResourceDropdownCurvedLine.jsx b/src/components/MarketplaceServiceSidebar/Icons/ResourceDropdownCurvedLine.jsx deleted file mode 100644 index c2fc9172..00000000 --- a/src/components/MarketplaceServiceSidebar/Icons/ResourceDropdownCurvedLine.jsx +++ /dev/null @@ -1,27 +0,0 @@ -import { styleConfig } from "src/providerConfig"; - -const ResourceDropdownCurvedLine = ({ isActive, ...restProps }) => { - return ( - - - - ); -}; - -export default ResourceDropdownCurvedLine; diff --git a/src/components/MarketplaceServiceSidebar/Icons/ResourceDropdownLine.jsx b/src/components/MarketplaceServiceSidebar/Icons/ResourceDropdownLine.jsx deleted file mode 100644 index 8ac4266b..00000000 --- a/src/components/MarketplaceServiceSidebar/Icons/ResourceDropdownLine.jsx +++ /dev/null @@ -1,27 +0,0 @@ -import { styleConfig } from "src/providerConfig"; - -const ResourceDropdownLine = ({ isActive, ...restProps }) => { - return ( - - - - ); -}; - -export default ResourceDropdownLine; diff --git a/src/components/MarketplaceServiceSidebar/Icons/ResourcesIcon.jsx b/src/components/MarketplaceServiceSidebar/Icons/ResourcesIcon.jsx deleted file mode 100644 index 567a8d4d..00000000 --- a/src/components/MarketplaceServiceSidebar/Icons/ResourcesIcon.jsx +++ /dev/null @@ -1,67 +0,0 @@ -import { styleConfig } from "src/providerConfig"; - -const ResourcesIcon = ({ - active, - disabled, - color: inputColor, - ...restProps -}) => { - let color = inputColor || styleConfig.sidebarIconColor; - - if (active) { - color = styleConfig.sidebarIconActiveColor; - } - if (disabled) { - color = styleConfig.sidebarIconDisabledColor; - } - - return ( - - - - - - - - - ); -}; - -export default ResourcesIcon; diff --git a/src/components/MarketplaceServiceSidebar/ResourcesDropdown.jsx b/src/components/MarketplaceServiceSidebar/ResourcesDropdown.jsx deleted file mode 100644 index ab764e49..00000000 --- a/src/components/MarketplaceServiceSidebar/ResourcesDropdown.jsx +++ /dev/null @@ -1,175 +0,0 @@ -import { Box, Stack, Typography } from "@mui/material"; -import ResourcesIcon from "./Icons/ResourcesIcon"; -import { useEffect, useMemo, useState } from "react"; -import { styleConfig } from "src/providerConfig"; -import Link from "next/link"; -import ResourceDropdownCurvedLine from "./Icons/ResourceDropdownCurvedLine"; -import ResourceDropdownLine from "./Icons/ResourceDropdownLine"; -import ResourceDropdownArrow from "./Icons/ResourceDropdownArrow"; - -const resourceItemHeight = 56; - -const ResourceListItem = ({ - href, - resourceName, - isActive, - isHighlighted, // For highlighting the ResourceDropdownLine - isLastItem, -}) => { - return ( - - - {!isLastItem && ( - - )} - - - - - - - {resourceName} - - - - - ); -}; - -const ResourcesDropdown = ({ - activeResourceId, - selectedResource, - resourceUrlLink, - resourceParameters = [], - isDisabled = false, - isCustomNetworkEnabled, - isCustomNetworkActive, -}) => { - const [isExpaned, setIsExpaned] = useState( - !!selectedResource || !!activeResourceId - ); - - useEffect(() => { - setIsExpaned(!!selectedResource || !!activeResourceId); - }, [selectedResource, activeResourceId]); - - const selectedResourceIndex = useMemo(() => { - const index = resourceParameters.findIndex( - (el) => - el.urlKey === selectedResource || el.resourceId === activeResourceId - ); - return index; - }, [selectedResource, activeResourceId, resourceParameters]); - - let resourceParametersList = [...resourceParameters]; - if (isCustomNetworkEnabled) { - resourceParametersList = [ - ...resourceParametersList, - { - name: "Custom Networks", - href: `${resourceUrlLink}&viewType=custom-networks`, - isActive: isCustomNetworkActive, - custom: true, - customResourceType: "customNetwork", - }, - ]; - } - - return ( - - setIsExpaned(!isExpaned)} - sx={{ cursor: "pointer" }} - > - - - - Resources - - - - - - - - {resourceParametersList?.length - ? resourceParametersList.map((resourceParameter, index) => { - if (resourceParameter.custom) { - return ( - - ); - } else - return ( - - ); - }) - : "No Resources Found"} - - - ); -}; - -export default ResourcesDropdown; diff --git a/src/components/PropertyTable/PropertyTable.tsx b/src/components/PropertyTable/PropertyTable.tsx index 707d5cef..a68faef3 100644 --- a/src/components/PropertyTable/PropertyTable.tsx +++ b/src/components/PropertyTable/PropertyTable.tsx @@ -1,8 +1,9 @@ import Link from "next/link"; -import { Box, Tooltip } from "@mui/material"; +import { Box } from "@mui/material"; import { FC, Fragment } from "react"; import { Text } from "../Typography/Typography"; import CopyButton from "../Button/CopyButton"; +import Tooltip from "../Tooltip/Tooltip"; export type Row = { label: string; diff --git a/src/components/ResourceInstance/Connectivity/PropertyTable.tsx b/src/components/ResourceInstance/Connectivity/PropertyTable.tsx index 868576b0..0a0e698c 100644 --- a/src/components/ResourceInstance/Connectivity/PropertyTable.tsx +++ b/src/components/ResourceInstance/Connectivity/PropertyTable.tsx @@ -1,9 +1,10 @@ -import { Box, BoxProps, Tooltip } from "@mui/material"; +import { Box, BoxProps } from "@mui/material"; import { FC, Fragment } from "react"; import Link from "next/link"; import { Text } from "src/components/Typography/Typography"; import CopyButton from "src/components/Button/CopyButton"; +import Tooltip from "src/components/Tooltip/Tooltip"; export type Row = { label: string; diff --git a/src/components/ResourceInstance/NodesTable/NodeStatus.jsx b/src/components/ResourceInstance/NodesTable/NodeStatus.jsx index 80414170..4edc133e 100644 --- a/src/components/ResourceInstance/NodesTable/NodeStatus.jsx +++ b/src/components/ResourceInstance/NodesTable/NodeStatus.jsx @@ -1,23 +1,16 @@ +import { Box } from "@mui/material"; import NodeStatusTooltip from "./NodeStatusTooltip"; -import StatusChipPulsateDot from "src/components/StatusChipPulsateDot/StatusChipPulsateDot"; -import { useEffect, useState } from "react"; +import StatusChip, { + getChipStyles, +} from "src/components/StatusChip/StatusChip"; export const NodeStatus = (props) => { const { detailedHealth, isStopped } = props; - const [activeDot, setActiveDot] = useState(0); const ConnectivityStatus = detailedHealth?.ConnectivityStatus; const DiskHealth = detailedHealth?.DiskHealth; const NodeHealth = detailedHealth?.NodeHealth; const ProcessHealth = detailedHealth?.ProcessHealth; const ProcessLiveness = detailedHealth?.ProcessLiveness; - useEffect(() => { - // Function to update active dot every second - const interval = setInterval(() => { - setActiveDot((prevDot) => (prevDot + 1) % 5); - }, 500); - - return () => clearInterval(interval); - }, []); const detailedHealthStatus = [ ConnectivityStatus, DiskHealth, @@ -25,18 +18,45 @@ export const NodeStatus = (props) => { ProcessHealth, ProcessLiveness, ]; + return ( - <> - {detailedHealthStatus.map((status, index) => ( - - ))} - + + {detailedHealthStatus.map((status, index) => { + const chipStyles = getChipStyles(isStopped ? "UNKNOWN" : status); + + if (isStopped) { + return ; + } + + return ( + + ); + })} + ); }; diff --git a/src/components/ResourceInstance/NodesTable/NodesTable.jsx b/src/components/ResourceInstance/NodesTable/NodesTable.jsx index bfb488f5..7db03f0f 100644 --- a/src/components/ResourceInstance/NodesTable/NodesTable.jsx +++ b/src/components/ResourceInstance/NodesTable/NodesTable.jsx @@ -115,14 +115,13 @@ export default function NodesTable(props) { style={{ width: "24px", height: "24px" }} /> } - justifyContent="left" + justifyContent="start" value={nodeId} textStyles={{ color: "#475467", marginLeft: "4px", fontSize: "14px", lineHeight: "20px", - fontWeight: 400, }} /> ); @@ -134,7 +133,6 @@ export default function NodesTable(props) { headerName: "Dashboard Endpoint", flex: 1, headerAlign: "left", - align: "center", minWidth: 150, renderCell: (params) => { const { row } = params; @@ -153,6 +151,7 @@ export default function NodesTable(props) { href={"https://" + dashboardEndpointRow} target="_blank" externalLinkArrow + justifyContent="start" /> ); }, @@ -191,7 +190,7 @@ export default function NodesTable(props) { style={{ width: "24px", height: "24px" }} /> } - justifyContent="left" + justifyContent="start" value={nodeId} textStyles={{ color: "#475467", @@ -236,20 +235,19 @@ export default function NodesTable(props) { field: "availabilityZone", headerName: "Availability Zone", flex: 1, - minWidth: 100, + minWidth: 140, renderCell: (params) => { const availabilityZone = params.row.availabilityZone; return ( } value={availabilityZone} - justifyContent="left" + justifyContent="start" textStyles={{ color: "#475467", marginLeft: "4px", fontSize: "14px", lineHeight: "20px", - fontWeight: 400, }} /> ); diff --git a/src/components/ResourceInstance/ResourceInstanceDetails/PropertyDetails.tsx b/src/components/ResourceInstance/ResourceInstanceDetails/PropertyDetails.tsx index 889c4b79..8157969b 100644 --- a/src/components/ResourceInstance/ResourceInstanceDetails/PropertyDetails.tsx +++ b/src/components/ResourceInstance/ResourceInstanceDetails/PropertyDetails.tsx @@ -290,14 +290,24 @@ const PropertyDetails: FC = ({ rows, ...otherProps }) => { paddingLeft={"8px"} display="flex" flexDirection="column" + alignItems="flex-start" borderRight="1px solid #EAECF0" boxSizing="border-box" minHeight="80px" > - - {row.label} - - + + + + {row.label} + + + + {value} diff --git a/src/components/Tooltip/Tooltip.jsx b/src/components/Tooltip/Tooltip.jsx index 4c2a97f0..d5016988 100644 --- a/src/components/Tooltip/Tooltip.jsx +++ b/src/components/Tooltip/Tooltip.jsx @@ -8,22 +8,15 @@ const Tooltip = styled( { shouldForwardProp: (prop) => prop !== "isVisible", } -)(({ theme, isVisible = true }) => { - return { - display: isVisible ? "block" : "none", - [`& .${tooltipClasses.arrow}`]: { - color: theme.palette.common.black, - }, - [`& .${tooltipClasses.tooltip}`]: { - backgroundColor: "#101828", - fontSize: "12px", - lineHeight: "18px", - fontWeight: 600, - padding: "12px", - borderRadius: "8px", - }, - }; -}); +)(({ isVisible = true }) => ({ + display: isVisible ? "block" : "none", + [`& .${tooltipClasses.arrow}`]: {}, + [`& .${tooltipClasses.tooltip}`]: { + padding: "6px 10px", + fontWeight: "500", + borderRadius: "8px", + }, +})); export default Tooltip; diff --git a/src/features/CustomNetworks/CustomNetworks.tsx b/src/features/CustomNetworks/CustomNetworks.tsx index ab46a83e..17fd6638 100644 --- a/src/features/CustomNetworks/CustomNetworks.tsx +++ b/src/features/CustomNetworks/CustomNetworks.tsx @@ -189,8 +189,6 @@ const CustomNetworks: FC = (props) => { headerName: "Network ID", flex: 1, minWidth: 170, - headerAlign: "center", - align: "center", valueGetter: (params: GridCellParams) => params.row.id, renderCell: (params: GridCellParams) => ( @@ -210,29 +208,14 @@ const CustomNetworks: FC = (props) => { headerName: "Name", flex: 1, minWidth: 170, - headerAlign: "center", - align: "center", valueGetter: (params: GridCellParams) => params.row.name, - // renderCell: (params: GridCellParams) => ( - // { - // setSelectedCustomNetwork(params.row); - // openSideDrawer(); - // }} - // color="primary" - // > - // {params.row.name} - // - // ), }, { field: "cloudProviderName", headerName: "Provider", flex: 1, minWidth: 150, - headerAlign: "center", - align: "center", valueGetter: (params: GridCellParams) => params.row.cloudProviderName, renderCell: (params: GridCellParams) => { @@ -246,14 +229,13 @@ const CustomNetworks: FC = (props) => { headerName: "Region", flex: 1, minWidth: 100, - headerAlign: "center", - align: "center", valueGetter: (params: GridCellParams) => params.row.cloudProviderRegion, renderCell: (params: GridCellParams) => ( } + justifyContent="start" /> ), }, @@ -262,13 +244,6 @@ const CustomNetworks: FC = (props) => { headerName: "CIDR", flex: 1, minWidth: 150, - headerAlign: "center", - align: "center", - valueGetter: (params: GridCellParams) => - params.row.cidr, - renderCell: (params: GridCellParams) => ( - {params.row.cidr} - ), }, ], [] diff --git a/src/features/Marketplace/MySubscriptions.jsx b/src/features/Marketplace/MySubscriptions.jsx index b03a06fe..2606ed4a 100644 --- a/src/features/Marketplace/MySubscriptions.jsx +++ b/src/features/Marketplace/MySubscriptions.jsx @@ -12,13 +12,16 @@ import useSnackbar from "src/hooks/useSnackbar"; // import CloudProviderCell from "./components/CloudProviderCell"; - Removed for Now import useUserSubscriptions from "src/hooks/query/useUserSubscriptions"; import { + getMarketplaceProductTierRoute, getResourceRouteWithoutEnv, } from "src/utils/route/access/accessRoute"; import GridCellExpand from "src/components/GridCellExpand/GridCellExpand"; import SubscriptionTypeDirectIcon from "src/components/Icons/SubscriptionType/SubscriptionTypeDirectIcon"; import SubscriptionTypeInvitedIcon from "src/components/Icons/SubscriptionType/SubscriptionTypeInvitedIcon"; +import { marketplaceServicePageTypes } from "./constants/marketplaceServicePageTypes"; -const MySubscriptions = () => { +const MySubscriptions = (props) => { + const { closeSideDrawer } = props; const { data: subscriptions = [], isFetching, @@ -27,6 +30,7 @@ const MySubscriptions = () => { const router = useRouter(); + const { serviceId, environmentId, subscriptionId } = router.query; const [showUnsubscribeDialog, setShowUnsubscribeDialog] = useState(false); const [selectedSubscription, setSelectedSubscription] = useState({}); @@ -36,9 +40,8 @@ const MySubscriptions = () => { const filteredSubscriptions = useMemo(() => { let list = subscriptions; - list = subscriptions?.filter( - (item) => - item?.serviceName?.toLowerCase()?.includes(searchText?.toLowerCase()) + list = subscriptions?.filter((item) => + item?.serviceName?.toLowerCase()?.includes(searchText?.toLowerCase()) ); if (typeFilter === "direct") { list = list?.filter((item) => item?.roleType === "root"); @@ -95,6 +98,7 @@ const MySubscriptions = () => { router.push( getResourceRouteWithoutEnv(serviceId, productTierId, id) ); + closeSideDrawer(); }} startIcon={ { setShowUnsubscribeDialog(true); } - const unsubsscribeFormik = useFormik({ initialValues: { confirmationText: "", @@ -271,6 +274,15 @@ const MySubscriptions = () => { const unsubscribeMutation = useMutation(deleteSubscription, { onSuccess: () => { + if (subscriptionId === selectedSubscription.id) { + router.push( + getMarketplaceProductTierRoute( + serviceId, + environmentId, + marketplaceServicePageTypes.public + ) + ); + } refetchSubscriptions(); setShowUnsubscribeDialog(false); unsubsscribeFormik.resetForm(); diff --git a/src/features/Marketplace/components/ServiceCard.jsx b/src/features/Marketplace/components/ServiceCard.jsx deleted file mode 100644 index 756738e2..00000000 --- a/src/features/Marketplace/components/ServiceCard.jsx +++ /dev/null @@ -1,115 +0,0 @@ -import { Box, Tooltip, styled } from "@mui/material"; -import Link from "next/link"; -import React, { Fragment } from "react"; -import Card from "src/components/Card/Card"; -import placeholderServiceIcon from "public/assets/images/dashboard/service/cloud-services-icon.svg"; -import Image from "next/image"; -import { Text } from "src/components/Typography/Typography"; -import AwsLogo from "src/components/Logos/AwsLogo/AwsLogo"; -import AzureLogo from "src/components/Logos/AzureLogo/AzureLogo"; -import GcpLogo from "src/components/Logos/GcpLogo/GcpLogo"; -import { SANDBOX_ORG_IDS } from "../constants"; -import styles from "../styles.module.css"; - -const CLOUD_PROVIDERS_MAP = { - aws: , - gcp: , - AZURE: , -}; - -function ServiceCard(props) { - const { serviceData, link } = props; - - return ( - - - {SANDBOX_ORG_IDS.includes(serviceData?.serviceOrgId) && ( - Sandbox - )} - - - - - - - - {serviceData?.serviceName} - - - Created By{" "} - - {serviceData?.serviceProviderName} - - - - - - - - {serviceData?.serviceDescription?.length > 100 - ? `${serviceData?.serviceDescription?.substring(0, 100)}...` - : serviceData?.serviceDescription} - - - - - - - Available in - - - {serviceData?.cloudProviders?.map((provider, i) => { - return ( - {CLOUD_PROVIDERS_MAP[provider]} - ); - })} - - - - - - ); -} - -export default ServiceCard; - -const StyledLogo = styled(Image)({ - height: "40px", -}); - -const CloudProvidersList = styled(Box)({ - display: "flex", - marginTop: "15px", - gap: "10px", -}); diff --git a/src/features/ProfileSettings/SettingsMarketplace.jsx b/src/features/ProfileSettings/SettingsMarketplace.jsx index 012022ad..96964294 100644 --- a/src/features/ProfileSettings/SettingsMarketplace.jsx +++ b/src/features/ProfileSettings/SettingsMarketplace.jsx @@ -14,7 +14,8 @@ import MySubscriptions from "../Marketplace/MySubscriptions"; import BillingPage from "../Billing/BillingPage"; function SettingsMarketplace(props) { - const { currentTab, setCurrentTab, isBillingEnabled } = props; + const { currentTab, setCurrentTab, isBillingEnabled, closeSideDrawer } = + props; const router = useRouter(); const selectUser = useSelector(selectUserrootData); const { query, refetch } = useUserData(); @@ -33,7 +34,7 @@ function SettingsMarketplace(props) { router={router} isBillingEnabled={isBillingEnabled} /> - + {currentTab === tabs.profile && ( )} @@ -41,7 +42,9 @@ function SettingsMarketplace(props) { {currentTab === tabs.billingAddress && ( )} - {currentTab === tabs.subscriptions && } + {currentTab === tabs.subscriptions && ( + + )} {isBillingEnabled && currentTab === tabs.billing && } diff --git a/src/features/ProfileSettings/components/BillingAddress.jsx b/src/features/ProfileSettings/components/BillingAddress.jsx index fad89e14..03434ec9 100644 --- a/src/features/ProfileSettings/components/BillingAddress.jsx +++ b/src/features/ProfileSettings/components/BillingAddress.jsx @@ -33,7 +33,7 @@ function ProfileForm(props) { /*eslint-disable-next-line no-use-before-define*/ formik.resetForm(); refetch(); - snackbar.showSuccess("Update Billing Address Successfully"); + snackbar.showSuccess("Updated Billing Address Successfully!"); }) .catch((error) => { if ( diff --git a/src/features/ProfileSettings/components/ProfileForm.jsx b/src/features/ProfileSettings/components/ProfileForm.jsx index da8e88d8..63f804b3 100644 --- a/src/features/ProfileSettings/components/ProfileForm.jsx +++ b/src/features/ProfileSettings/components/ProfileForm.jsx @@ -30,7 +30,7 @@ function ProfileForm(props) { /*eslint-disable-next-line no-use-before-define*/ formik.resetForm(); refetch(); - snackbar.showSuccess("Update Profile Successfully"); + snackbar.showSuccess("Updated Profile Successfully!"); }) .catch((error) => { if ( @@ -113,12 +113,7 @@ function ProfileForm(props) { Organization ID - + diff --git a/src/features/RedirectPage/RedirectPage.tsx b/src/features/RedirectPage/RedirectPage.tsx index 4b3ad82f..9142505c 100644 --- a/src/features/RedirectPage/RedirectPage.tsx +++ b/src/features/RedirectPage/RedirectPage.tsx @@ -56,7 +56,9 @@ const RedirectPage = () => { // No Subscriptions, Subscribe to the First Service Offering if (subscriptions?.length === 0 && subscriptionRequestIds?.length === 0) { - const offering = serviceOfferingsData?.[0]; + const offering = serviceOfferingsData?.find( + (offering) => offering.AutoApproveSubscription + ); // Find the First Service Offering with AutoApproveSubscription Enabled if (!offering) { setIsRedirecting(true); router.push("/service-plans"); @@ -78,7 +80,7 @@ const RedirectPage = () => { offering.serviceId, offering.serviceEnvironmentID, offering.productTierID, - Object.values(res.data).join("") + Object.values(res.data).join("") // The Subscription ID ) ); } else { diff --git a/src/features/ResourceInstance/components/InstancesTableHeader.tsx b/src/features/ResourceInstance/components/InstancesTableHeader.tsx index c3f7290d..2faf688a 100644 --- a/src/features/ResourceInstance/components/InstancesTableHeader.tsx +++ b/src/features/ResourceInstance/components/InstancesTableHeader.tsx @@ -22,6 +22,25 @@ import { AccessResourceInstance } from "src/types/resourceInstance"; import { CLI_MANAGED_RESOURCES } from "src/constants/resource"; import GenerateTokenDialog from "src/components/GenerateToken/GenerateTokenDialog"; +const SpeedoMeterLegend = ({ + label = "Low", + color = "rgba(23, 178, 106, 1)", +}) => ( + + + + {label} + + +); + type InstancesTableHeaderProps = { count?: number; selectedResourceName?: string; @@ -111,6 +130,12 @@ const InstancesTableHeader: FC = ({ return actionsObj; } + //Action disabled in Resource Type is Proxy + const isManagedResource = Boolean( + selectedInstance?.detailedNetworkTopology?.[selectedResourceId] + ?.resourceType === "PortsBasedProxy" + ); + const isUpdateAllowedByRBAC = isOperationAllowedByRBAC( operationEnum.Update, role, @@ -125,14 +150,15 @@ const InstancesTableHeader: FC = ({ const { status, backupStatus } = selectedInstance || {}; - if (status === "STOPPED" && isUpdateAllowedByRBAC && !cliManagedResource) { + if ( + status === "STOPPED" && + isUpdateAllowedByRBAC && + !cliManagedResource && + !isManagedResource + ) { actionsObj.start = true; } - if (status === "RUNNING" && isUpdateAllowedByRBAC && !cliManagedResource) { - actionsObj.stop = true; - } - if (status === "RUNNING") { actionsObj.connect = true; } @@ -141,10 +167,21 @@ const InstancesTableHeader: FC = ({ status === "RUNNING" && isUpdateAllowedByRBAC && !cliManagedResource && + !isManagedResource + ) { + actionsObj.stop = true; + } + + if ( + isUpdateAllowedByRBAC && + !cliManagedResource && + !isManagedResource && selectedInstance?.autoscalingEnabled ) { - actionsObj.addCapacity = true; - actionsObj.removeCapacity = true; + if (status === "RUNNING") { + actionsObj.addCapacity = true; + actionsObj.removeCapacity = true; + } actionsObj.isVisibleCapacity = true; } @@ -152,7 +189,8 @@ const InstancesTableHeader: FC = ({ (status === "RUNNING" || status === "FAILED") && isUpdateAllowedByRBAC && !cliManagedResource && - !isCurrentResourceBYOA + !isCurrentResourceBYOA && + !isManagedResource ) { actionsObj.restart = true; } @@ -160,12 +198,13 @@ const InstancesTableHeader: FC = ({ if ( (status === "RUNNING" || status === "FAILED") && isUpdateAllowedByRBAC && - !isCurrentResourceBYOA + !isCurrentResourceBYOA && + !isManagedResource ) { actionsObj.modify = true; } - if (status !== "DELETING" && isDeleteAllowedByRBAC) { + if (status !== "DELETING" && isDeleteAllowedByRBAC && !isManagedResource) { actionsObj.delete = true; } if ( @@ -178,13 +217,21 @@ const InstancesTableHeader: FC = ({ if ( backupStatus?.earliestRestoreTime && isUpdateAllowedByRBAC && - !cliManagedResource + !cliManagedResource && + !isManagedResource ) { actionsObj.restore = true; } return actionsObj; - }, [selectedInstance, role, isCurrentResourceBYOA, view, selectedResourceId]); + }, [ + selectedInstance, + cliManagedResource, + role, + isCurrentResourceBYOA, + view, + selectedResourceId, + ]); return ( @@ -321,22 +368,3 @@ const InstancesTableHeader: FC = ({ }; export default InstancesTableHeader; - -const SpeedoMeterLegend = ({ - label = "Low", - color = "rgba(23, 178, 106, 1)", -}) => ( - - - - {label} - - -); diff --git a/src/features/ResourceInstance/components/ResourceInstanceControlPanel.tsx b/src/features/ResourceInstance/components/ResourceInstanceControlPanel.tsx index 73dbd3ca..7dbb86f0 100644 --- a/src/features/ResourceInstance/components/ResourceInstanceControlPanel.tsx +++ b/src/features/ResourceInstance/components/ResourceInstanceControlPanel.tsx @@ -162,6 +162,7 @@ const ResourceInstanceControlPanel: FC = ({ handleRestore, handleConnect, handleGenerateToken, + isCliManagedResource, isCurrentResourceBYOA, isDeleteDisabled, isModifyDisabled, @@ -178,7 +179,6 @@ const ResourceInstanceControlPanel: FC = ({ isVisibleBYOA, isVisibleCapacity, isVisibleGenerateToken, - isCliManagedResource, ]); return ( diff --git a/src/types/common/enums.ts b/src/types/common/enums.ts index b13b48ea..cf2eb78f 100644 --- a/src/types/common/enums.ts +++ b/src/types/common/enums.ts @@ -6,7 +6,8 @@ export type ResourceType = | "OperatorCRD" | "Kustomize" | "HelmChart" - | "Terraform"; + | "Terraform" + | "PortsBasedProxy"; // Network Types export type NetworkType = diff --git a/src/types/common/reactGenerics.ts b/src/types/common/reactGenerics.ts index b6e52018..cb147731 100644 --- a/src/types/common/reactGenerics.ts +++ b/src/types/common/reactGenerics.ts @@ -1 +1,2 @@ export type SetState = React.Dispatch>; +export type SVGIconType = React.FC>;