Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Alignment + zebra stripes for requested and installed packages #393

Merged
merged 11 commits into from
May 31, 2024
Merged

Alignment + zebra stripes for requested and installed packages #393

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
cff9742
Alignment + zebra stripes for requestend and installed packages
gabalafou Apr 16, 2024
5fe2c46
Packages installed - info tooltip
gabalafou Apr 17, 2024
d52f895
fixes and tweaks
gabalafou Apr 17, 2024
186f83f
fix test warning
gabalafou Apr 17, 2024
236950a
fix playwright test
gabalafou Apr 23, 2024
a69b28d
style tweaks
gabalafou Apr 23, 2024
bb2ccf2
consolidate StyledButtonPrimary and StyledButtonSecondary
gabalafou Apr 24, 2024
a22a4ab
- move TableRow into DependenciesItem
gabalafou May 7, 2024
5458069
missed spot: monospace
gabalafou May 7, 2024
012f54f
monospace font for fields
gabalafou May 21, 2024
cd30aa0
lint
gabalafou May 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 8 additions & 2 deletions src/components/VersionSelect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -162,7 +162,9 @@ export const VersionSelect = ({
sx: {
padding: "7px 9px !important",
backgroundColor: palette.common.white,
borderRadius: "0px"
borderRadius: "0px",
fontFamily: "monospace",
fontSize: "13px"
peytondmurray marked this conversation as resolved.
Show resolved Hide resolved
},
"data-testid": "VersionSelectTest"
}}
Expand All @@ -171,7 +173,11 @@ export const VersionSelect = ({
{" "}
</MenuItem>
{versionsList.map(v => (
<MenuItem key={v} value={v}>
<MenuItem
key={v}
value={v}
sx={{ fontFamily: "monospace", fontSize: "13px" }}
peytondmurray marked this conversation as resolved.
Show resolved Hide resolved
>
{v}
</MenuItem>
))}
Expand Down
20 changes: 10 additions & 10 deletions src/features/environmentCreate/components/CreateEnvironmentPackages.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
TableBody,
TableHead,
TableRow,
TableCell,
Typography
} from "@mui/material";
import useTheme from "@mui/material/styles/useTheme";
Expand All @@ -16,8 +17,7 @@
StyledAccordionDetails,
StyledAccordionSummary,
StyledAccordionTitle,
StyledButton,

Check failure on line 20 in src/features/environmentCreate/components/CreateEnvironmentPackages.tsx

View workflow job for this annotation

GitHub Actions / Build Package 

Delete `,`
StyledEditPackagesTableCell
} from "../../../styles";
import { AddRequestedPackage } from "../../requestedPackages";
import { requestedPackagesChanged } from "../environmentCreateSlice";
Expand Down Expand Up @@ -55,14 +55,14 @@
</StyledAccordionSummary>
<StyledAccordionDetails
sx={{
padding: "20px 15px",
padding: 0,
borderRadius: "0px"
}}
>
<Table aria-label="requested packages">
<TableHead sx={{ border: "none" }}>
<TableRow>
<StyledEditPackagesTableCell
<TableCell
align="left"
sx={{
width: "120px"
Expand All @@ -74,15 +74,15 @@
>
Name
</Typography>
</StyledEditPackagesTableCell>
<StyledEditPackagesTableCell align="left">
</TableCell>
<TableCell align="left">
<Typography
component="p"
sx={{ fontSize: "13px", fontWeight: 500 }}
>
Version Constraint
</Typography>
</StyledEditPackagesTableCell>
</TableCell>
</TableRow>
</TableHead>
<TableBody>
Expand All @@ -94,8 +94,8 @@
))}
</TableBody>
</Table>
<Box>
{isAdding && (
{isAdding && (
<Box sx={{ padding: "0 0 16px 16px" }}>
<AddRequestedPackage
onSubmit={(value: string) =>
dispatch(
Expand All @@ -108,8 +108,8 @@
onCancel={() => setIsAdding(false)}
isCreating={true}
/>
)}
</Box>
</Box>
)}
</StyledAccordionDetails>
<AccordionDetails
sx={{
Expand Down
2 changes: 1 addition & 1 deletion src/features/requestedPackages/components/AddRequestedPackage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,7 @@ export const AddRequestedPackage = ({
alignItems: "center",
justifyContent: "space-between",
marginTop: "15px",
width: isCreating ? 330 : "100%"
width: isCreating ? 360 : "100%"
}}
>
<Box>
Expand Down
117 changes: 62 additions & 55 deletions src/features/requestedPackages/components/RequestedPackagesEdit.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -14,8 +16,7 @@ import {
StyledAccordionDetails,
StyledAccordionSummary,
StyledAccordionTitle,
StyledButton,
StyledEditPackagesTableCell
StyledButton
} from "../../../styles";
import { CondaSpecificationPip } from "../../../common/models";
import { useAppDispatch } from "../../../hooks";
Expand Down Expand Up @@ -69,68 +70,74 @@ export const RequestedPackagesEdit = ({
</StyledAccordionSummary>
<StyledAccordionDetails
sx={{
padding: "20px 15px",
borderRadius: "0px"
borderRadius: "0px",
padding: 0
}}
>
<Table aria-label="requested packages">
<TableHead sx={{ border: "none" }}>
<TableRow>
<StyledEditPackagesTableCell
align="left"
sx={{
width: "120px"
}}
>
<Typography
component="p"
sx={{ fontSize: "13px", fontWeight: 500 }}
>
Name
</Typography>
</StyledEditPackagesTableCell>
<StyledEditPackagesTableCell
align="left"
sx={{
width: "180px"
}}
>
<Typography
component="p"
sx={{ fontSize: "13px", fontWeight: 500 }}
<TableContainer>
<Table aria-label="requested packages">
<TableHead sx={{ border: "none" }}>
<TableRow>
<TableCell
align="left"
sx={{
width: "120px"
}}
>
Installed Version
</Typography>
</StyledEditPackagesTableCell>
<StyledEditPackagesTableCell align="left">
<Typography
component="p"
sx={{ fontSize: "13px", fontWeight: 500 }}
<Typography
component="p"
sx={{ fontSize: "13px", fontWeight: 500 }}
>
Name
</Typography>
</TableCell>
<TableCell align="left">
<Typography
component="p"
sx={{ fontSize: "13px", fontWeight: 500 }}
>
Version Constraint
</Typography>
</TableCell>
<TableCell
align="right"
sx={{
width: "180px"
}}
>
Version Constraint
</Typography>
</StyledEditPackagesTableCell>
</TableRow>
</TableHead>
<TableBody>
{filteredPackageList.map(requestedPackage => (
<RequestedPackagesTableRow
key={requestedPackage}
requestedPackage={requestedPackage}
onDefaultEnvIsChanged={onUpdateDefaultEnvironment}
/>
))}
</TableBody>
</Table>
<Box>
{isAdding && (
<Typography
component="p"
sx={{ fontSize: "13px", fontWeight: 500 }}
>
Installed Version
</Typography>
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{filteredPackageList.map((requestedPackage, index) => (
<RequestedPackagesTableRow
key={requestedPackage}
requestedPackage={requestedPackage}
onDefaultEnvIsChanged={onUpdateDefaultEnvironment}
/>
))}
</TableBody>
</Table>
</TableContainer>
{isAdding && (
<Box
sx={{
padding: "0 0 16px 16px"
}}
>
<AddRequestedPackage
onSubmit={handleSubmit}
onCancel={setIsAdding}
isCreating={false}
/>
)}
</Box>
</Box>
)}
</StyledAccordionDetails>
<AccordionDetails
sx={{
Expand Down
27 changes: 13 additions & 14 deletions src/features/requestedPackages/components/RequestedPackagesTableRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,18 +80,6 @@ const BaseRequestedPackagesTableRow = ({
{name}
</Typography>
</StyledRequestedPackagesTableCell>
<StyledRequestedPackagesTableCell align="left">
<Typography
sx={{
fontFamily: "monospace",
fontSize: "13px",
fontWeight: 400,
color: "#676666"
}}
>
{versionsWithConstraints[name] ?? versionsWithoutConstraints[name]}
</Typography>
</StyledRequestedPackagesTableCell>
<StyledRequestedPackagesTableCell align="left">
<Box sx={{ display: "flex", alignItems: "center" }}>
<ConstraintSelect
Expand All @@ -103,14 +91,25 @@ const BaseRequestedPackagesTableRow = ({
version={constraint === "latest" ? "" : version}
name={name}
/>
</Box>
</StyledRequestedPackagesTableCell>
<StyledRequestedPackagesTableCell align="right">
<Typography
sx={{
fontFamily: "monospace",
fontSize: "13px",
fontWeight: 400,
color: "#676666"
}}
>
{versionsWithConstraints[name] ?? versionsWithoutConstraints[name]}{" "}
<StyledIconButton
onClick={handleRemove}
sx={{ marginLeft: "24px" }}
data-testid="RemovePackageTest"
>
<DeleteIconAlt />
</StyledIconButton>
</Box>
</Typography>
</StyledRequestedPackagesTableCell>
</TableRow>
);
Expand Down
7 changes: 0 additions & 7 deletions src/styles/StyledEditPackagesTableCell.tsx
View file
Open in desktop

This file was deleted.

4 changes: 1 addition & 3 deletions src/styles/StyledRequestedPackagesTableCell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,6 @@ import { styled } from "@mui/system";

export const StyledRequestedPackagesTableCell = styled(TableCell)(
({ theme }) => ({
paddingLeft: "0px",
borderBottom: "0px",
paddingBottom: "10px"
borderBottom: "0px"
})
);
1 change: 0 additions & 1 deletion src/styles/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
export * from "./StyledAccordionSummary";
export * from "./StyledAccordionDetails";
export * from "./StyledAccordionTitle";
export * from "./StyledEditPackagesTableCell";
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Less code, hurray!

export * from "./StyledButton";
export * from "./StyledRequestedPackagesTableCell";
export * from "./StyledIconButton";
Expand Down
Loading