Skip to content

Commit 4dd6336

Browse files
finnar-binagalin920shrunyan
authored
Feature: Media title bar (#2241)
* Common breadcrumbs * content layout rework * Full item edit header swap * Version and language selector * move files * re-org and permissions * duo mode toggle * disabled fix * Add duplicate item dialog * duplicate content item * Add preview button and urls * Hide Schedule unpublish * Resolve vqa changes * vqa changes * min width update * tabs regression on other apps and update pages of other content tabs * remove comments * icon colors on schema tabs * typing fix * task: update spacing * task: package version * task: spacing and color updates * Center analytics metrics and update padding * task: updated insights page * task: update header layout * task: center align separator * task: title vertical clamp * task: show breadcrumbs in folder view * task: create media breadcrumbs component * cypress updates * remove local package * task: folder bg color and media list spacing * task: changed font variant * fix: remove duplicate buttons * task: cypress tests * Responsive content title bar * task: moved to theme * task: remove local package * task: filter button update * task: spacing update * task: select item header spacing * only wrap below 900 * task: replace upload files image * task: change maxwidth and fontweight * task: preview model file name font weight * task: only show term when searching * task: breadcrumb alignment * task: use filter button component * task: grammar correction * task: remove checkbox background color * task: change check icon * task: add breadcrumb tooltip * task: update app error screen * task: change to named export * task: table font update * test fixes * Bump dependency * fix: updated cypress tests * task: update cypress test --------- Co-authored-by: Andres <[email protected]> Co-authored-by: Stuart Runyan <[email protected]>
1 parent 79db1d9 commit 4dd6336

34 files changed

+395
-173
lines changed

‎cypress/e2e/home/mature.spec.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ describe("Mature Home", () => {
66
cy.url().should("include", "/launchpad");
77
});
88
it("Displays user first name", () => {
9-
cy.contains("Good Morning, FirstName");
9+
cy.contains("Good Morning, Developers");
1010
});
1111
it("Displays delta percentage on metric card if instance is over 2 months old", () => {
1212
// Test instance is over 2 months old

‎cypress/e2e/media/folders.spec.js

+6
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,12 @@ describe("Media Folders", () => {
5151
.contains("CYPRESS TEST NEW FOLDER")
5252
.should("exist");
5353
});
54+
it("Navigates folders via breadcrumbs", () => {
55+
cy.get(".MuiTreeView-root").contains("CYPRESS TEST NEW FOLDER").click();
56+
57+
cy.getBySelector("breadcrumbs").find(".MuiBreadcrumbs-li").first().click();
58+
cy.location("pathname").should("eq", "/media/folder/1-6c9618c-r26pt");
59+
});
5460
it("Renames folder", () => {
5561
cy.get(".MuiTreeView-root").contains("CYPRESS TEST NEW FOLDER").click();
5662

‎cypress/e2e/schema/models.spec.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
const SEARCH_TERM = `cypress ${Date.now()}`;
12
describe("Schema: Models", () => {
23
before(() => {
34
cy.waitOn("/v1/content/models", () => {
@@ -22,7 +23,7 @@ describe("Schema: Models", () => {
2223
});
2324
it("Creates model", () => {
2425
cy.getBySelector(`create-model-button-all-models`).click();
25-
cy.contains("Single Page Model").click();
26+
cy.contains("Multi Page Model").click();
2627
cy.contains("Next").click();
2728
cy.contains("Display Name").next().type("Cypress Test Model");
2829
cy.contains("Reference ID")

‎cypress/e2e/search/advanced-search.spec.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ describe("Global Search: Advanced Search", () => {
1717
.find("input")
1818
.should("exist")
1919
.type("cypress");
20-
cy.getBySelector("AdvancedSearchButton").click();
20+
cy.getBySelector("AdvancedSearchButton").click({ force: true });
2121
cy.getBySelector("AdvanceSearchModal").should("exist");
2222
cy.get("body").type("{esc}");
2323
});

‎cypress/e2e/search/search-bar.spec.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,9 @@ describe("Global Search: Search Bar", () => {
6060
cy.getBySelector("global-search-recent-keyword")
6161
.should("exist")
6262
.trigger("mouseover");
63-
cy.getBySelector("RemoveRecentSearchKeyword").should("exist").click();
63+
cy.getBySelector("RemoveRecentSearchKeyword")
64+
.should("exist")
65+
.click({ force: true });
6466

6567
// Verify if keyword was removed
6668
cy.getBySelector("global-search-recent-keyword").should("not.exist");

‎cypress/e2e/search/search-page.spec.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ describe("Global Search: Search Page", () => {
2626
"https://8-f48cf3a682-7fthvk.api.dev.zesty.io/v1/search/items*",
2727
() => {
2828
cy.visit(
29-
"/search?q=somerandomstringthatdoesnotexist&user=5-b497838d8d-p2j5tm&datePreset=today"
29+
"/search?q=somerandomstringthatdoesnotexist&user=5-faeda8978e-j5xb6l&datePreset=today"
3030
);
3131
}
3232
);
@@ -68,7 +68,7 @@ describe("Global Search: Search Page", () => {
6868

6969
cy.location("search").should(
7070
"equal",
71-
`?q=somerandomstringthatdoesnotexist&sort=created&user=5-84d1e6d4ae-s3m974&datePreset=today`
71+
`?q=somerandomstringthatdoesnotexist&sort=created&user=5-da8c91c9da-l9cqsz&datePreset=today`
7272
);
7373
});
7474

‎public/images/uploadFiles.jpg

-23.6 KB
Binary file not shown.

‎public/images/uploadFiles.svg

+36
Loading

‎src/apps/content-editor/src/app/views/ItemEdit/components/ItemEditHeader/ItemEditHeaderActions.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -525,6 +525,7 @@ const PublishingMenu = ({
525525
: "Schedule Publish"}
526526
</MenuItem>
527527
)}
528+
528529
<MenuItem
529530
onClick={() => {
530531
history.push(`/content/${modelZUID}/${itemZUID}/publishings`);

‎src/apps/media/src/app/components/Controls/Controls.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@ export const Controls: FC<ControlsProps> = ({ showFilters = true }) => {
1212
return (
1313
<Box
1414
sx={{
15-
px: 3,
16-
mb: 3,
15+
px: 4,
16+
py: 2,
1717
}}
1818
>
1919
<Box

‎src/apps/media/src/app/components/Controls/DateFilter.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,7 @@ export const DateRangeFilter: FC = () => {
105105
color="inherit"
106106
sx={{
107107
py: "1px",
108+
backgroundColor: "common.white",
108109
}}
109110
>
110111
Date

‎src/apps/media/src/app/components/Controls/FiletypeFilter.tsx

+8-42
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ import { AppState } from "../../../../../../shell/store/types";
2525
import { Filetype } from "../../../../../../shell/store/media-revamp";
2626
import { ImageFilterRow } from "./ImageFilterRow";
2727
import { VideoFilterRow } from "./VideoFilterRow";
28+
import { FilterButton } from "../../../../../../shell/components/Filters";
2829

2930
const pluralize = (filetype: Filetype) => {
3031
// audio & code filetypes can't be pluralized
@@ -51,50 +52,15 @@ export const FiletypeFilter: FC = () => {
5152
handleClose();
5253
};
5354

54-
const inactiveButton = (
55-
<Button
56-
endIcon={<ArrowDropDownIcon />}
57-
onClick={handleClick}
58-
variant="outlined"
59-
size="small"
60-
color="inherit"
61-
sx={{
62-
py: "1px",
63-
}}
64-
>
65-
File Type
66-
</Button>
67-
);
68-
69-
const activeButton = (
70-
<ButtonGroup variant="contained">
71-
<Button
72-
startIcon={<CheckIcon sx={{ width: "20px", height: "20px" }} />}
73-
onClick={handleClick}
74-
size="small"
75-
sx={{
76-
py: "1px",
77-
}}
78-
>
79-
<Typography variant="body2" sx={{ textTransform: "capitalize" }}>
80-
{pluralize(activeFilter)}
81-
</Typography>
82-
</Button>
83-
<Button
84-
onClick={() => handleChange(null)}
85-
size="small"
86-
sx={{
87-
py: "1px",
88-
}}
89-
>
90-
<CloseRounded fontSize="small" />
91-
</Button>
92-
</ButtonGroup>
93-
);
94-
9555
return (
9656
<>
97-
{activeFilter ? activeButton : inactiveButton}
57+
<FilterButton
58+
filterId="fileType"
59+
isFilterActive={!!activeFilter}
60+
buttonText={activeFilter ? pluralize(activeFilter) : "File Type"}
61+
onOpenMenu={handleClick}
62+
onRemoveFilter={() => handleChange(null)}
63+
/>
9864
<Menu open={open} onClose={handleClose} anchorEl={anchorEl}>
9965
<ImageFilterRow onClose={handleClose} />
10066
<VideoFilterRow onClose={handleClose} />

‎src/apps/media/src/app/components/Controls/Sort.tsx

+29-18
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,14 @@ import { useSelector, useDispatch } from "react-redux";
55
import { AppState } from "../../../../../../shell/store/types";
66
import { MediaSortOrder } from "../../../../../../shell/store/media-revamp";
77
import { useParams } from "../../../../../../shell/hooks/useParams";
8+
import { FilterButton } from "../../../../../../shell/components/Filters";
89

10+
type SortOrder = "AtoZ" | "ZtoA" | "dateadded";
11+
const SORT_ORDER: Record<SortOrder, string> = {
12+
dateadded: "Date Added",
13+
AtoZ: "Name (A to Z)",
14+
ZtoA: "Name (Z to A)",
15+
} as const;
916
export const Sort: FC = () => {
1017
const dispatch = useDispatch();
1118
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
@@ -17,32 +24,36 @@ export const Sort: FC = () => {
1724
const handleClose = () => {
1825
setAnchorEl(null);
1926
};
20-
type SortOrder = "AtoZ" | "ZtoA" | "dateadded";
2127
const handleChange = (sortOrder: SortOrder) => {
2228
//dispatch(setSortOrder(sortOrder));
2329
setParams(sortOrder, "sort");
2430
handleClose();
2531
};
32+
2633
return (
2734
<>
28-
<Button
29-
endIcon={<ArrowDropDownIcon />}
30-
onClick={handleClick}
31-
variant="outlined"
32-
size="small"
33-
color="inherit"
34-
sx={{
35-
py: "1px",
36-
}}
37-
>
38-
Sort By
39-
</Button>
35+
<FilterButton
36+
filterId="sortBy"
37+
isFilterActive={false}
38+
buttonText={`Sort: ${
39+
SORT_ORDER[params.get("sort") as SortOrder] ?? SORT_ORDER.dateadded
40+
}`}
41+
onOpenMenu={handleClick}
42+
onRemoveFilter={() => {}}
43+
/>
4044
<Menu open={open} onClose={handleClose} anchorEl={anchorEl}>
41-
<MenuItem onClick={() => handleChange("dateadded")}>
42-
Date Added
43-
</MenuItem>
44-
<MenuItem onClick={() => handleChange("AtoZ")}>Name (A to Z)</MenuItem>
45-
<MenuItem onClick={() => handleChange("ZtoA")}>Name (Z to A)</MenuItem>
45+
{Object.entries(SORT_ORDER).map(([key, value]) => (
46+
<MenuItem
47+
onClick={() => handleChange(key as SortOrder)}
48+
selected={
49+
key === "dateadded"
50+
? !params.get("sort") || params.get("sort") === key
51+
: params.get("sort") === key
52+
}
53+
>
54+
{value}
55+
</MenuItem>
56+
))}
4657
</Menu>
4758
</>
4859
);

‎src/apps/media/src/app/components/Controls/ToggleViews.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,10 @@ export const ToggleViews = () => {
2323
color="primary"
2424
>
2525
<ToggleButton value="grid">
26-
<GridViewIcon />
26+
<GridViewIcon fontSize="inherit" />
2727
</ToggleButton>
2828
<ToggleButton value="list">
29-
<ListIcon />
29+
<ListIcon fontSize="inherit" />
3030
</ToggleButton>
3131
</ToggleButtonGroup>
3232
);

‎src/apps/media/src/app/components/EmptyState.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Box, Stack, Typography } from "@mui/material";
2-
import uploadFiles from "../../../../../../public/images/uploadFiles.jpg";
2+
import uploadFiles from "../../../../../../public/images/uploadFiles.svg";
33
import { UploadButton } from "./UploadButton";
44

55
type Props = {

‎src/apps/media/src/app/components/FileModal/FileModalContent.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -261,7 +261,7 @@ export const FileModalContent: FC<Props> = ({
261261
width: "300px",
262262
}}
263263
>
264-
<Typography variant="body1" noWrap>
264+
<Typography variant="body1" fontWeight={700} noWrap>
265265
{newFilename}
266266
</Typography>
267267
</Box>

‎src/apps/media/src/app/components/Folder/index.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ export const Folder: React.FC<FolderProps> = ({ name, id }) => {
2828
color: "grey.500",
2929
borderColor: "grey.100",
3030
textTransform: "none",
31+
backgroundColor: "background.paper",
3132
"&:focus": {
3233
backgroundColor: (theme) => alpha(theme.palette.primary.main, 0.08),
3334
},

0 commit comments

Comments
 (0)