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

Show installed version next to requested #454

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
+43 −26
Open

Show installed version next to requested #454

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
2 changes: 1 addition & 1 deletion src/features/dependencies/components/Dependencies.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@ export const Dependencies = ({
<TableRow>
<TableCell sx={{ fontSize: "13px" }}>Package</TableCell>
<TableCell sx={{ fontSize: "13px", textAlign: "right" }}>
Installed Version
Version
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Looked redundant and potentially confusing to label this column "Installed Version" when:

a. there is no other version column
b. the name of the table is "Installed Packages"

</TableCell>
</TableRow>
</TableHead>
Expand Down
56 changes: 35 additions & 21 deletions src/features/requestedPackages/components/RequestedPackage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@ import React from "react";
import Typography from "@mui/material/Typography";
import TableCell from "@mui/material/TableCell";
import { requestedPackageParser } from "../../../utils/helpers";
import { useAppSelector } from "../../../hooks";
import styled from "@mui/material/styles/styled";

interface IRequestedPackageProps {
/**
* @param requestedPackage requested package
Expand All @@ -10,48 +13,59 @@ interface IRequestedPackageProps {
isLast: boolean;
}

const StyledTableCell = styled(TableCell)(() => ({
width: 190
}));

const StyledTypography = styled(Typography)(() => ({
fontSize: "13px",
color: "#333"
}));

export const RequestedPackage = ({
requestedPackage,
isLast
}: IRequestedPackageProps) => {
const { versionsWithoutConstraints, versionsWithConstraints } =
useAppSelector(state => state.requestedPackages);
Comment on lines +29 to +30
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This is how its done in the RequestPackagesTableRow component on the edit environment page. (Yes, it's confusing but there are nearly duplicate components for the edit versus view pages.)

const { constraint, name, version } =
requestedPackageParser(requestedPackage);

return (
<>
<TableCell
<StyledTableCell
sx={{
display: "flex",
alignItems: "center",
borderBottom: isLast ? "none" : undefined
}}
>
<Typography
sx={{
width: 190,
fontSize: "13px",
color: "#333"
}}
>
{name}
</Typography>
</TableCell>
<TableCell
sx={{ textAlign: "right", borderBottom: isLast ? "none" : undefined }}
<StyledTypography>{name}</StyledTypography>
</StyledTableCell>
<StyledTableCell
sx={{
borderBottom: isLast ? "none" : undefined
}}
>
<StyledTypography sx={{ fontFamily: "monospace" }}>
{versionsWithConstraints[name] ?? versionsWithoutConstraints[name]}{" "}
</StyledTypography>
</StyledTableCell>
<StyledTableCell
sx={{
textAlign: "right",
borderBottom: isLast ? "none" : undefined
}}
>
<Typography
<StyledTypography
sx={{
fontSize: "13px",
fontFamily: constraint === "latest" ? "inherit" : "monospace",
fontStyle: constraint === "latest" ? "italic" : "normal",
color: "#333"
fontStyle: constraint === "latest" ? "italic" : "normal"
}}
>
{constraint === "latest"
? "(no version requested)"
: `${constraint.replace("==", "=")}${version}`}
</Typography>
</TableCell>
</StyledTypography>
</StyledTableCell>
</>
);
};
11 changes: 7 additions & 4 deletions src/features/requestedPackages/components/RequestedPackageList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export const RequestedPackageList = ({
return (
<Accordion
sx={{
maxWidth: 420,
width: 190 * 3,
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Width must be specified in order to use fixed table layout

boxShadow: "none"
}}
disableGutters
Expand All @@ -51,21 +51,24 @@ export const RequestedPackageList = ({
<TableHead>
<TableRow>
<TableCell sx={{ fontSize: "13px" }}>Package</TableCell>
<TableCell sx={{ fontSize: "13px" }}>
Installed Version
</TableCell>
<TableCell sx={{ fontSize: "13px", textAlign: "right" }}>
Requested Version
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{filteredPackageList.map((item, index) => (
{filteredPackageList.map((item: string, index: number) => (
<TableRow
key={String(item)}
key={item}
sx={{
backgroundColor: index % 2 ? "secondary.50" : "transparent"
}}
>
<RequestedPackage
requestedPackage={String(item)}
requestedPackage={item}
isLast={index === listLength - 1}
/>
</TableRow>
Expand Down
Loading