From 2adbb8e4e87cefc80109336f39f32a8f791f4953 Mon Sep 17 00:00:00 2001 From: gabalafou Date: Fri, 31 May 2024 11:12:05 -0400 Subject: [PATCH] Alignment + zebra stripes for requested and installed packages (#393) --- src/components/Dialog.tsx | 10 +- src/components/VersionSelect.tsx | 10 +- src/features/auth/components/authButton.tsx | 7 +- .../channels/components/ChannelsEdit.tsx | 19 ++- .../channels/components/ChannelsList.tsx | 12 +- .../dependencies/components/Dependencies.tsx | 84 +++++++++--- .../components/DependenciesItem.tsx | 73 ++++++---- .../components/CreateEnvironmentPackages.tsx | 33 +++-- .../Specification/SpecificationCreate.tsx | 10 +- .../components/EnvironmentDetails.tsx | 2 +- .../components/EnvironmentDetailsHeader.tsx | 8 +- .../Specification/SpecificationEdit.tsx | 14 +- .../metadata/components/EnvMetadata.tsx | 7 +- .../components/AddRequestedPackage.tsx | 2 +- .../components/RequestedPackage.tsx | 55 +++++--- .../components/RequestedPackageList.tsx | 52 +++++-- .../components/RequestedPackagesEdit.tsx | 128 ++++++++++-------- .../components/RequestedPackagesTableRow.tsx | 22 +-- src/styles/StyledAccordionDetails.tsx | 6 - src/styles/StyledButton.ts | 47 +++++++ src/styles/StyledButtonPrimary.tsx | 35 ----- src/styles/StyledEditPackagesTableCell.tsx | 7 - .../StyledRequestedPackagesTableCell.tsx | 4 +- src/styles/index.tsx | 3 +- test/dependencies/Dependencies.test.tsx | 2 +- test/dependencies/DependenciesItem.test.tsx | 15 +- test/playwright/test_ux.py | 4 +- 27 files changed, 409 insertions(+), 262 deletions(-) create mode 100644 src/styles/StyledButton.ts delete mode 100644 src/styles/StyledButtonPrimary.tsx delete mode 100644 src/styles/StyledEditPackagesTableCell.tsx diff --git a/src/components/Dialog.tsx b/src/components/Dialog.tsx index 819cdb3e..0f5fb85a 100644 --- a/src/components/Dialog.tsx +++ b/src/components/Dialog.tsx @@ -4,7 +4,7 @@ import DialogActions from "@mui/material/DialogActions"; import DialogContent from "@mui/material/DialogContent"; import DialogContentText from "@mui/material/DialogContentText"; import DialogTitle from "@mui/material/DialogTitle"; -import { StyledButtonPrimary } from "../styles"; +import { StyledButton } from "../styles"; interface IAlertDialog { title: string; @@ -45,10 +45,12 @@ export const AlertDialog = ({ - Cancel - confirmAction()}> + + Cancel + + confirmAction()}> Delete - + ); diff --git a/src/components/VersionSelect.tsx b/src/components/VersionSelect.tsx index 85f5b189..7394f57a 100644 --- a/src/components/VersionSelect.tsx +++ b/src/components/VersionSelect.tsx @@ -162,7 +162,9 @@ export const VersionSelect = ({ sx: { padding: "7px 9px !important", backgroundColor: palette.common.white, - borderRadius: "0px" + borderRadius: "0px", + fontFamily: "monospace", + fontSize: "13px" }, "data-testid": "VersionSelectTest" }} @@ -171,7 +173,11 @@ export const VersionSelect = ({ {" "} {versionsList.map(v => ( - + {v} ))} diff --git a/src/features/auth/components/authButton.tsx b/src/features/auth/components/authButton.tsx index 9314ee16..dadd77e0 100644 --- a/src/features/auth/components/authButton.tsx +++ b/src/features/auth/components/authButton.tsx @@ -1,6 +1,6 @@ import React, { useState, useEffect } from "react"; -import { StyledButtonPrimary } from "../../../styles"; +import { StyledButton } from "../../../styles"; import { PrefContext } from "../../../preferences"; import { useLazyGetAuthQuery, @@ -53,13 +53,14 @@ export const AuthButton = () => { }, []); return ( - { handleOnClick(); }} sx={{ position: "absolute", top: 14, right: 18 }} > {authenticated ? "Log out" : "Log in"} - + ); }; diff --git a/src/features/channels/components/ChannelsEdit.tsx b/src/features/channels/components/ChannelsEdit.tsx index 7f61169f..c78be006 100644 --- a/src/features/channels/components/ChannelsEdit.tsx +++ b/src/features/channels/components/ChannelsEdit.tsx @@ -15,7 +15,7 @@ import { StyledAccordionDetails, StyledAccordionSummary, StyledAccordionTitle, - StyledButtonPrimary + StyledButton } from "../../../styles"; import { reorderArray } from "../../../utils/helpers"; import { ArrowIcon } from "../../../components"; @@ -27,11 +27,13 @@ export interface IChannelsEditProps { */ channelsList: string[]; updateChannels: (channels: string[]) => void; + maxWidth?: number; } const BaseChannelsEdit = ({ channelsList, - updateChannels + updateChannels, + maxWidth = 420 }: IChannelsEditProps) => { const listLength = channelsList.length; const { palette } = useTheme(); @@ -73,11 +75,13 @@ const BaseChannelsEdit = ({ return ( }> - Channels + + Channels + @@ -132,15 +136,16 @@ const BaseChannelsEdit = ({ borderRadius: "0px", padding: "15px 21px", display: "flex", - justifyContent: "center" + justifyContent: "flex-start" }} > - setIsAdding(true)} > + Add Channel - + ); diff --git a/src/features/channels/components/ChannelsList.tsx b/src/features/channels/components/ChannelsList.tsx index a37ec5cc..9d8851b0 100644 --- a/src/features/channels/components/ChannelsList.tsx +++ b/src/features/channels/components/ChannelsList.tsx @@ -18,8 +18,6 @@ export interface IChannelsListProps { } export const ChannelsList = ({ channelList }: IChannelsListProps) => { - const listLength = channelList.length; - return ( { defaultExpanded > }> - Channels + + Channels + - + {channelList.map((channel, index) => ( diff --git a/src/features/dependencies/components/Dependencies.tsx b/src/features/dependencies/components/Dependencies.tsx index ef49822e..9fb07869 100644 --- a/src/features/dependencies/components/Dependencies.tsx +++ b/src/features/dependencies/components/Dependencies.tsx @@ -1,7 +1,15 @@ import React, { useEffect, useRef } from "react"; import Accordion from "@mui/material/Accordion"; import Box from "@mui/material/Box"; +import TableContainer from "@mui/material/TableContainer"; +import Table from "@mui/material/Table"; +import TableHead from "@mui/material/TableHead"; +import TableBody from "@mui/material/TableBody"; +import TableRow from "@mui/material/TableRow"; +import TableCell from "@mui/material/TableCell"; import CircularProgress from "@mui/material/CircularProgress"; +import Tooltip from "@mui/material/Tooltip"; +import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined"; import InfiniteScroll from "react-infinite-scroll-component"; import { StyledAccordionDetails, @@ -25,13 +33,15 @@ export interface IDependenciesProps { mode: "read-only" | "edit"; hasMore: boolean; next?: () => void; + maxWidth?: number; } export const Dependencies = ({ mode, dependencies, hasMore, - next = () => null + next = () => null, + maxWidth = 420 }: IDependenciesProps) => { const dispatch = useAppDispatch(); const { selectedEnvironment } = useAppSelector(state => state.tabs); @@ -45,20 +55,29 @@ export const Dependencies = ({ return ( }> - - Packages Installed as Dependencies + + Installed Packages{" "} + + + {dependencies.length ? ( - <> - {dependencies.map((dependency, index) => ( - - dispatch(dependencyPromoted(dependency))} - /> - - ))} - + + + + + Package + + Installed Version + + + + + {dependencies.map((dependency, index) => ( + + dispatch(dependencyPromoted(dependency)) + } + isLast={index === dependencies.length - 1} + /> + ))} + +
+ ) : ( - + + + )} diff --git a/src/features/dependencies/components/DependenciesItem.tsx b/src/features/dependencies/components/DependenciesItem.tsx index 51109bfe..052fa794 100644 --- a/src/features/dependencies/components/DependenciesItem.tsx +++ b/src/features/dependencies/components/DependenciesItem.tsx @@ -1,5 +1,6 @@ import React, { memo } from "react"; -import Box from "@mui/material/Box"; +import TableRow from "@mui/material/TableRow"; +import TableCell from "@mui/material/TableCell"; import Typography from "@mui/material/Typography"; import { Dependency } from "../../../common/models"; import Tooltip from "@mui/material/Tooltip"; @@ -14,40 +15,64 @@ interface IDependenciesItemProps { */ dependency: Dependency; mode: "read-only" | "edit"; + isLast: boolean; handleClick: () => void; + sx?: any; } const BaseDependenciesItem = ({ dependency, mode, - handleClick + isLast, + handleClick, + sx = {} }: IDependenciesItemProps) => { const { name, version } = dependency; const isEditMode = mode === "edit"; return ( - - - {name} - - - {version} - - {isEditMode && ( - - - - - - )} - + <> + + + {name} + + + + {version} + {isEditMode && ( + <> +   + + + + + + + )} + + + + ); }; diff --git a/src/features/environmentCreate/components/CreateEnvironmentPackages.tsx b/src/features/environmentCreate/components/CreateEnvironmentPackages.tsx index 761a6a84..afb21fdb 100644 --- a/src/features/environmentCreate/components/CreateEnvironmentPackages.tsx +++ b/src/features/environmentCreate/components/CreateEnvironmentPackages.tsx @@ -6,6 +6,7 @@ import { TableBody, TableHead, TableRow, + TableCell, Typography } from "@mui/material"; import useTheme from "@mui/material/styles/useTheme"; @@ -16,8 +17,7 @@ import { StyledAccordionDetails, StyledAccordionSummary, StyledAccordionTitle, - StyledButtonPrimary, - StyledEditPackagesTableCell + StyledButton } from "../../../styles"; import { AddRequestedPackage } from "../../requestedPackages"; import { requestedPackagesChanged } from "../environmentCreateSlice"; @@ -49,18 +49,20 @@ export const CreateEnvironmentPackages = ({ disableGutters > }> - Requested Packages + + Requested Packages + - Name - - + + Version Constraint - + @@ -92,8 +94,8 @@ export const CreateEnvironmentPackages = ({ ))}
- - {isAdding && ( + {isAdding && ( + dispatch( @@ -106,8 +108,8 @@ export const CreateEnvironmentPackages = ({ onCancel={() => setIsAdding(false)} isCreating={true} /> - )} - + + )} - setIsAdding(true)} > + Add Package - + ); diff --git a/src/features/environmentCreate/components/Specification/SpecificationCreate.tsx b/src/features/environmentCreate/components/Specification/SpecificationCreate.tsx index 7ca76b74..bb76c655 100644 --- a/src/features/environmentCreate/components/Specification/SpecificationCreate.tsx +++ b/src/features/environmentCreate/components/Specification/SpecificationCreate.tsx @@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useState } from "react"; import Box from "@mui/material/Box"; import { ChannelsEdit } from "../../../../features/channels"; import { BlockContainerEditMode } from "../../../../components"; -import { StyledButtonPrimary } from "../../../../styles"; +import { StyledButton } from "../../../../styles"; import { CodeEditor } from "../../../../features/yamlEditor"; import { stringify } from "yaml"; import { CreateEnvironmentPackages } from "../CreateEnvironmentPackages"; @@ -156,9 +156,13 @@ export const SpecificationCreate = ({ onCreateEnvironment }: any) => { marginBottom: "10px" }} > - + Create - + diff --git a/src/features/environmentDetails/components/EnvironmentDetails.tsx b/src/features/environmentDetails/components/EnvironmentDetails.tsx index 21d1ed37..a3073638 100644 --- a/src/features/environmentDetails/components/EnvironmentDetails.tsx +++ b/src/features/environmentDetails/components/EnvironmentDetails.tsx @@ -90,7 +90,7 @@ export const EnvironmentDetails = () => { }, [ // We only want to run this effect when: // - // 1. User navigates to different environment = change of + // 1. User navigates to different environment = change of // (namespaceName, environmentName) in the URL // 2. The corresponding (namespace, environment) data have been fetched // diff --git a/src/features/environmentDetails/components/EnvironmentDetailsHeader.tsx b/src/features/environmentDetails/components/EnvironmentDetailsHeader.tsx index 9f449fe8..be8fce23 100644 --- a/src/features/environmentDetails/components/EnvironmentDetailsHeader.tsx +++ b/src/features/environmentDetails/components/EnvironmentDetailsHeader.tsx @@ -3,7 +3,7 @@ import Box from "@mui/material/Box"; import Typography from "@mui/material/Typography"; import TextField from "@mui/material/TextField"; import useTheme from "@mui/material/styles/useTheme"; -import { StyledButtonPrimary } from "../../../styles"; +import { StyledButton } from "../../../styles"; import { useAppDispatch, useAppSelector } from "../../../hooks"; import { EnvironmentDetailsModes, @@ -55,14 +55,15 @@ export const EnvironmentDetailsHeader = ({ {envName} {mode === EnvironmentDetailsModes.READ && ( - dispatch(modeChanged(EnvironmentDetailsModes.EDIT)) } > Edit - + )} )} @@ -105,7 +106,6 @@ export const EnvironmentDetailsHeader = ({ size="small" onChange={e => onUpdateName(e.target.value)} /> - {/* Archive */} )} diff --git a/src/features/environmentDetails/components/Specification/SpecificationEdit.tsx b/src/features/environmentDetails/components/Specification/SpecificationEdit.tsx index f4afd065..df3be552 100644 --- a/src/features/environmentDetails/components/Specification/SpecificationEdit.tsx +++ b/src/features/environmentDetails/components/Specification/SpecificationEdit.tsx @@ -23,7 +23,7 @@ import { } from "../../../../features/requestedPackages"; import { CodeEditor } from "../../../../features/yamlEditor"; import { useAppDispatch, useAppSelector } from "../../../../hooks"; -import { StyledButtonPrimary } from "../../../../styles"; +import { StyledButton } from "../../../../styles"; import { CondaSpecificationPip } from "../../../../common/models"; interface ISpecificationEdit { descriptionUpdated: boolean; @@ -229,12 +229,14 @@ export const SpecificationEdit = ({ dependencies={dependencies} hasMore={hasMore} next={() => dispatch(pageChanged(page + 1))} + maxWidth={500} /> @@ -260,19 +262,21 @@ export const SpecificationEdit = ({ > Delete environment - Cancel - - + Save - + diff --git a/src/features/metadata/components/EnvMetadata.tsx b/src/features/metadata/components/EnvMetadata.tsx index d978a1bb..355110bf 100644 --- a/src/features/metadata/components/EnvMetadata.tsx +++ b/src/features/metadata/components/EnvMetadata.tsx @@ -2,7 +2,7 @@ import React from "react"; import { useAppSelector } from "../../../hooks"; import { BlockContainer } from "../../../components"; import { Description, EnvBuilds } from "../../../features/metadata/components"; -import { StyledButtonPrimary } from "../../../styles"; +import { StyledButton } from "../../../styles"; export enum EnvironmentDetailsModes { "CREATE" = "create", @@ -84,13 +84,14 @@ export const EnvMetadata = ({ {mode === EnvironmentDetailsModes.EDIT && newCurrentBuild && currentBuildId !== newCurrentBuild && ( - defaultEnvironmentChanged(newCurrentBuild)} disabled={specificationDidChange()} > Change environment version - + )} diff --git a/src/features/requestedPackages/components/AddRequestedPackage.tsx b/src/features/requestedPackages/components/AddRequestedPackage.tsx index 2f757b09..d98d0199 100644 --- a/src/features/requestedPackages/components/AddRequestedPackage.tsx +++ b/src/features/requestedPackages/components/AddRequestedPackage.tsx @@ -123,7 +123,7 @@ export const AddRequestedPackage = ({ alignItems: "center", justifyContent: "space-between", marginTop: "15px", - width: isCreating ? 330 : "100%" + width: isCreating ? 360 : "100%" }} > diff --git a/src/features/requestedPackages/components/RequestedPackage.tsx b/src/features/requestedPackages/components/RequestedPackage.tsx index b29b2c5a..2eae3375 100644 --- a/src/features/requestedPackages/components/RequestedPackage.tsx +++ b/src/features/requestedPackages/components/RequestedPackage.tsx @@ -1,38 +1,57 @@ import React from "react"; -import Box from "@mui/material/Box"; import Typography from "@mui/material/Typography"; +import TableCell from "@mui/material/TableCell"; import { requestedPackageParser } from "../../../utils/helpers"; interface IRequestedPackageProps { /** * @param requestedPackage requested package */ requestedPackage: string; + isLast: boolean; } export const RequestedPackage = ({ - requestedPackage + requestedPackage, + isLast }: IRequestedPackageProps) => { const { constraint, name, version } = requestedPackageParser(requestedPackage); - const displayConstraint = () => { - if (constraint === "latest") { - return ""; - } - const newConstraint = constraint === "==" ? "=" : constraint; - return `${newConstraint}${version}`; - }; - return ( - - - + <> + + {name} - - - {displayConstraint()} - - + + + + {constraint === "latest" + ? "(no version requested)" + : `${constraint.replace("==", "=")}${version}`} + + + ); }; diff --git a/src/features/requestedPackages/components/RequestedPackageList.tsx b/src/features/requestedPackages/components/RequestedPackageList.tsx index 31675e95..4254beb2 100644 --- a/src/features/requestedPackages/components/RequestedPackageList.tsx +++ b/src/features/requestedPackages/components/RequestedPackageList.tsx @@ -1,5 +1,10 @@ import Accordion from "@mui/material/Accordion"; -import Box from "@mui/material/Box"; +import Table from "@mui/material/Table"; +import TableBody from "@mui/material/TableBody"; +import TableCell from "@mui/material/TableCell"; +import TableContainer from "@mui/material/TableContainer"; +import TableHead from "@mui/material/TableHead"; +import TableRow from "@mui/material/TableRow"; import React, { useMemo } from "react"; import { RequestedPackage } from "."; import { CondaSpecificationPip } from "../../../common/models"; @@ -36,21 +41,38 @@ export const RequestedPackageList = ({ defaultExpanded > }> - Requested Packages + + Requested Packages + - - {filteredPackageList.map((item, index) => ( - - - - ))} + + + + + + Package + + Requested Version + + + + + {filteredPackageList.map((item, index) => ( + + + + ))} + +
+ ); diff --git a/src/features/requestedPackages/components/RequestedPackagesEdit.tsx b/src/features/requestedPackages/components/RequestedPackagesEdit.tsx index cd3d983f..44dcfc42 100644 --- a/src/features/requestedPackages/components/RequestedPackagesEdit.tsx +++ b/src/features/requestedPackages/components/RequestedPackagesEdit.tsx @@ -2,10 +2,12 @@ import React, { useMemo, useState } from "react"; import Accordion from "@mui/material/Accordion"; import AccordionDetails from "@mui/material/AccordionDetails"; import Box from "@mui/material/Box"; +import TableContainer from "@mui/material/TableContainer"; import Table from "@mui/material/Table"; import TableBody from "@mui/material/TableBody"; import TableHead from "@mui/material/TableHead"; import TableRow from "@mui/material/TableRow"; +import TableCell from "@mui/material/TableCell"; import Typography from "@mui/material/Typography"; import useTheme from "@mui/material/styles/useTheme"; import { RequestedPackagesTableRow } from "./RequestedPackagesTableRow"; @@ -14,8 +16,7 @@ import { StyledAccordionDetails, StyledAccordionSummary, StyledAccordionTitle, - StyledButtonPrimary, - StyledEditPackagesTableCell + StyledButton } from "../../../styles"; import { CondaSpecificationPip } from "../../../common/models"; import { useAppDispatch } from "../../../hooks"; @@ -63,72 +64,80 @@ export const RequestedPackagesEdit = ({ disableGutters > }> - Requested Packages + + Requested Packages + - - - - - - Name - - - - +
+ + + - Installed Version - - - - + Name + + + + + Version Constraint + + + - Version Constraint - - - - - - {filteredPackageList.map(requestedPackage => ( - - ))} - -
- - {isAdding && ( + + Installed Version + + + + + + {filteredPackageList.map((requestedPackage, index) => ( + + ))} + + + + {isAdding && ( + - )} - + + )} - setIsAdding(true)} > + Add Package - + ); diff --git a/src/features/requestedPackages/components/RequestedPackagesTableRow.tsx b/src/features/requestedPackages/components/RequestedPackagesTableRow.tsx index 646b3b55..dc957a11 100644 --- a/src/features/requestedPackages/components/RequestedPackagesTableRow.tsx +++ b/src/features/requestedPackages/components/RequestedPackagesTableRow.tsx @@ -80,13 +80,6 @@ const BaseRequestedPackagesTableRow = ({ {name} - - - {versionsWithConstraints[name] ?? versionsWithoutConstraints[name]} - - + + + + + {versionsWithConstraints[name] ?? versionsWithoutConstraints[name]}{" "} - + ); diff --git a/src/styles/StyledAccordionDetails.tsx b/src/styles/StyledAccordionDetails.tsx index 156ecc16..85360c44 100644 --- a/src/styles/StyledAccordionDetails.tsx +++ b/src/styles/StyledAccordionDetails.tsx @@ -17,12 +17,6 @@ export const StyledAccordionDetails = styled(AccordionDetails, { borderTop: "none", borderRadius: styleType === "grayscale" ? "0px 0px 5px 5px" : "Opx", overflowY: "scroll", - "&::-webkit-scrollbar": { - width: "10px" - }, - "&::-webkit-scrollbar-track": { - backgroundColor: "transparent" - }, "&::-webkit-scrollbar-thumb": { backgroundColor: styleType === "grayscale" ? "#EBECEE" : "#DADCE0", borderRadius: "5px", diff --git a/src/styles/StyledButton.ts b/src/styles/StyledButton.ts new file mode 100644 index 00000000..7bd782d4 --- /dev/null +++ b/src/styles/StyledButton.ts @@ -0,0 +1,47 @@ +import Button from "@mui/material/Button"; +import { styled } from "@mui/system"; + +export const StyledButton = styled(Button, { + shouldForwardProp: prop => prop !== "styleType", + overridesResolver: (props, styles) => [ + styles.root, + props.color === "primary" && styles.primary, + props.color === "secondary" && styles.secondary + ] +})<{ styleType?: string }>(({ theme, color = "primary" }) => { + const palette = theme.palette[color]; + const { + palette: { secondary } + } = theme; + + return { + padding: "4px 12px 4px 12px", + border: palette.main, + fontSize: "14px", + color: palette.contrastText, + textTransform: "none", + backgroundColor: palette.main, + boxShadow: "none", + borderRadius: "4px", + gap: "6px", + ":hover": { + boxShadow: "none", + color: palette.contrastText, + backgroundColor: palette.dark, + textDecoration: "underline", + textUnderlineOffset: "0.3em" + }, + "&:focus": { + outlineColor: palette.main, + outlineStyle: "auto", + outlineOffset: "4px", + outlineWidth: "medium", + transition: "none" + }, + "&:disabled": { + backgroundColor: secondary[100], + border: "none", + color: secondary.light + } + }; +}); diff --git a/src/styles/StyledButtonPrimary.tsx b/src/styles/StyledButtonPrimary.tsx deleted file mode 100644 index d939ad6a..00000000 --- a/src/styles/StyledButtonPrimary.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import Button from "@mui/material/Button"; -import { styled } from "@mui/system"; - -export const StyledButtonPrimary = styled(Button, { - shouldForwardProp: prop => prop !== "styleType" -})<{ styleType?: string }>(({ theme: { palette } }) => ({ - padding: "4px 12px 4px 12px", - border: palette.primary.main, - fontSize: "14px", - color: palette.primary.contrastText, - textTransform: "none", - backgroundColor: palette.primary.main, - boxShadow: "none", - borderRadius: "4px", - gap: "6px", - ":hover": { - boxShadow: "none", - color: palette.primary.contrastText, - backgroundColor: palette.primary.dark, - textDecoration: "underline", - textUnderlineOffset: "0.3em" - }, - "&:focus": { - outlineColor: palette.primary.main, - outlineStyle: "auto", - outlineOffset: "4px", - outlineWidth: "medium", - transition: "none" - }, - "&:disabled": { - backgroundColor: palette.secondary[100], - border: "none", - color: palette.secondary.light - } -})); diff --git a/src/styles/StyledEditPackagesTableCell.tsx b/src/styles/StyledEditPackagesTableCell.tsx deleted file mode 100644 index 27b7d89d..00000000 --- a/src/styles/StyledEditPackagesTableCell.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import TableCell from "@mui/material/TableCell"; -import { styled } from "@mui/system"; - -export const StyledEditPackagesTableCell = styled(TableCell)(({ theme }) => ({ - padding: "0px", - borderBottom: "0px" -})); diff --git a/src/styles/StyledRequestedPackagesTableCell.tsx b/src/styles/StyledRequestedPackagesTableCell.tsx index 1298ec69..691d40ed 100644 --- a/src/styles/StyledRequestedPackagesTableCell.tsx +++ b/src/styles/StyledRequestedPackagesTableCell.tsx @@ -3,8 +3,6 @@ import { styled } from "@mui/system"; export const StyledRequestedPackagesTableCell = styled(TableCell)( ({ theme }) => ({ - paddingLeft: "0px", - borderBottom: "0px", - paddingBottom: "10px" + borderBottom: "0px" }) ); diff --git a/src/styles/index.tsx b/src/styles/index.tsx index 17e478a6..a83b07c5 100644 --- a/src/styles/index.tsx +++ b/src/styles/index.tsx @@ -1,8 +1,7 @@ export * from "./StyledAccordionSummary"; export * from "./StyledAccordionDetails"; export * from "./StyledAccordionTitle"; -export * from "./StyledEditPackagesTableCell"; -export * from "./StyledButtonPrimary"; +export * from "./StyledButton"; export * from "./StyledRequestedPackagesTableCell"; export * from "./StyledIconButton"; export * from "./StyledAccordionExpandIcon"; diff --git a/test/dependencies/Dependencies.test.tsx b/test/dependencies/Dependencies.test.tsx index 569b7c1b..76f54111 100644 --- a/test/dependencies/Dependencies.test.tsx +++ b/test/dependencies/Dependencies.test.tsx @@ -23,7 +23,7 @@ describe("", () => { ) ); - expect(container).toHaveTextContent("Packages Installed as Dependencies"); + expect(container).toHaveTextContent("Installed Packages"); }); it("should render component in edit mode", async () => { diff --git a/test/dependencies/DependenciesItem.test.tsx b/test/dependencies/DependenciesItem.test.tsx index 8b735322..e8604d29 100644 --- a/test/dependencies/DependenciesItem.test.tsx +++ b/test/dependencies/DependenciesItem.test.tsx @@ -10,11 +10,16 @@ describe("", () => { beforeEach(() => { component = render( mockTheme( - + + + + +
) ); }); diff --git a/test/playwright/test_ux.py b/test/playwright/test_ux.py index 4df6785d..4b53e221 100644 --- a/test/playwright/test_ux.py +++ b/test/playwright/test_ux.py @@ -200,9 +200,7 @@ def _existing_environment_interactions( ).click() # promote a package installed as dependency to specified package - page.locator( - "#infScroll > .infinite-scroll-component__outerdiv > .infinite-scroll-component > div > div > .MuiButtonBase-root" - ).first.click() + page.get_by_test_id("PromoteIcon").first.click() # delete conda-forge channel page.get_by_test_id("DeleteIcon").click()