Skip to content

Commit 740dcaf

Browse files
finnar-binagalin920shrunyan
authored
Feature: Schema title bar (#2246)
* 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 * Center analytics metrics and update padding * cypress updates * remove local package * task: update all models header * task: update search page header * task: set min-height * Responsive content title bar * only wrap below 900 * task: update layout * task: add breadcrumbs * task: map tabs * task: fields layout * task: spacing update * task: card list and info tab layout update * task: remove zuid * task: spacing update * task: dashboard title bar update * task: use transparent bg image * task: search header updates * task: update create model dialog modal layout * task: duplicate model spacing update * task: select field spacing * task: field form spacing * task: spacing * test fixes * Bump dependency * task: fix form field spacing * task: change border color declaration * revert lock file * task: all models vqa update * task: move breadcrumbs down * task: select model type vqa update * task: modal width * task: strong model label * task: spacing * task: field selection spacing * task: update info tab * task: api tab update * task: replace schema icon * task: use model label * task: vqa round 2 updates * fix: cypress test * task: add cypress test for breadcrumbs --------- Co-authored-by: Andres <[email protected]> Co-authored-by: Stuart Runyan <[email protected]>
1 parent 4746eb4 commit 740dcaf

31 files changed

+794
-594
lines changed

‎cypress/e2e/schema/activity-log.spec.js

+5-3
Original file line numberDiff line numberDiff line change
@@ -33,9 +33,11 @@ describe("Schema: Activity Log Tab", () => {
3333
});
3434

3535
it("Shows the no logs found message", () => {
36-
cy.visit(
37-
"/schema/6-ce80dbfe90-ptjpm6/activity-log?from=2099-02-15&to=2099-03-15"
38-
);
36+
cy.waitOn("/v1/env/audits*", () => {
37+
cy.visit(
38+
"/schema/6-ce80dbfe90-ptjpm6/activity-log?from=2099-02-15&to=2099-03-15"
39+
);
40+
});
3941

4042
cy.contains("No Logs Found");
4143
});

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

+15
Original file line numberDiff line numberDiff line change
@@ -60,4 +60,19 @@ describe("Schema: Models", () => {
6060
});
6161
cy.contains("Delete Forever").click();
6262
});
63+
it("Can navigate via breadcrumbs", () => {
64+
cy.waitOn(
65+
"/v1/content/models/6-ce80dbfe90-ptjpm6/fields?showDeleted=true",
66+
() => {
67+
cy.waitOn("/bin/1-6c9618c-r26pt/groups", () => {
68+
cy.waitOn("/v1/content/models", () => {
69+
cy.visit("/schema/6-ce80dbfe90-ptjpm6/fields");
70+
});
71+
});
72+
}
73+
);
74+
75+
cy.getBySelector("breadcrumbs").find(".MuiBreadcrumbs-li").first().click();
76+
cy.location("pathname").should("eq", "/schema");
77+
});
6378
});

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@
5757
"@tinymce/tinymce-react": "^3.12.6",
5858
"@welldone-software/why-did-you-render": "^6.1.1",
5959
"@zesty-io/core": "1.9.1",
60-
"@zesty-io/material": "0.10.0",
60+
"@zesty-io/material": "^0.11.0",
6161
"chart.js": "^3.8.0",
6262
"chartjs-adapter-moment": "^1.0.1",
6363
"chartjs-plugin-datalabels": "^2.0.0",

‎src/apps/content-editor/src/app/views/Analytics/views/AnalyticsDashboard/index.tsx

+7-5
Original file line numberDiff line numberDiff line change
@@ -193,7 +193,7 @@ const AnalyticsDashboard = ({ loading }: Props) => {
193193
height="100%"
194194
>
195195
<AnalyticsDashboardHeader />
196-
<Box pb={8} px={2} overflow="auto" height="100%">
196+
<Box pb={8} px={4} overflow="auto" height="100%">
197197
<Box display="flex" py={2} justifyContent="space-between">
198198
<AnalyticsDateFilter />
199199
<Typography variant="h6" fontWeight="600" maxWidth={304} noWrap>
@@ -466,14 +466,16 @@ const AnalyticsDashboardHeader = () => {
466466
<Box
467467
display="flex"
468468
justifyContent="space-between"
469-
p={2}
470-
borderBottom={`1px inset ${theme.palette.border}`}
469+
px={4}
470+
pt={4}
471+
pb={1.75}
472+
borderBottom={`2px solid ${theme.palette.border}`}
471473
bgcolor={theme.palette.background.paper}
472474
>
473-
<Typography variant="h5" fontWeight="600">
475+
<Typography variant="h3" fontWeight="700">
474476
Dashboard
475477
</Typography>
476-
<Box display="flex" gap={1.5}>
478+
<Box display="flex" gap={1.5} height="fit-content">
477479
{topUsedModels?.reverse()?.map((model: any) => (
478480
<CreateItemButton modelZUID={model[0]} />
479481
))}

‎src/apps/schema/src/app/components/AddFieldModal/FieldFormInput.tsx

+18-7
Original file line numberDiff line numberDiff line change
@@ -142,7 +142,12 @@ export const FieldFormInput = ({
142142
<Grid item xs={fieldConfig.gridSize}>
143143
{fieldConfig.type === "input" && (
144144
<>
145-
<Box mb={0.5}>
145+
<Stack
146+
flexDirection="row"
147+
alignItems="center"
148+
mb={!!fieldConfig.subLabel ? 0 : 0.5}
149+
height={18}
150+
>
146151
<Typography component="span" variant="body2" fontWeight={600}>
147152
{fieldConfig.label}
148153
</Typography>
@@ -151,6 +156,7 @@ export const FieldFormInput = ({
151156
component="span"
152157
variant="body2"
153158
color="text.secondary"
159+
sx={{ whiteSpace: "pre" }}
154160
>
155161
{" "}
156162
(optional)
@@ -164,12 +170,17 @@ export const FieldFormInput = ({
164170
/>
165171
</Tooltip>
166172
)}
167-
{fieldConfig.subLabel && (
168-
<Typography component="p" variant="body3" color="text.secondary">
169-
{fieldConfig.subLabel}
170-
</Typography>
171-
)}
172-
</Box>
173+
</Stack>
174+
{fieldConfig.subLabel && (
175+
<Typography
176+
component="p"
177+
variant="body3"
178+
color="text.secondary"
179+
mb={0.5}
180+
>
181+
{fieldConfig.subLabel}
182+
</Typography>
183+
)}
173184
<InputTextField
174185
autoFocus={fieldConfig.autoFocus}
175186
data-cy={`FieldFormInput_${fieldConfig.name}`}

‎src/apps/schema/src/app/components/AddFieldModal/FieldItem.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,7 @@ export const FieldItem = ({
7979
primaryTypographyProps={{
8080
fontSize: 14,
8181
fontWeight: 700,
82+
color: "text.primary",
8283
}}
8384
secondaryTypographyProps={{
8485
variant: "body3",

‎src/apps/schema/src/app/components/AddFieldModal/views/FieldForm.tsx

+19-25
Original file line numberDiff line numberDiff line change
@@ -464,17 +464,14 @@ export const FieldForm = ({
464464
return (
465465
<>
466466
<DialogTitle
467+
component="div"
467468
sx={{
468-
padding: 0,
469+
borderBottom: "2px solid",
470+
borderColor: "border",
471+
pb: 0,
469472
}}
470473
>
471-
<Box
472-
display="flex"
473-
justifyContent="space-between"
474-
alignItems="center"
475-
px={2.5}
476-
pt={2.5}
477-
>
474+
<Box display="flex" justifyContent="space-between" alignItems="center">
478475
<Box display="flex" alignItems="center">
479476
{!isUpdateField && (
480477
<IconButton
@@ -495,7 +492,7 @@ export const FieldForm = ({
495492
/>
496493
</Box>
497494
<Box display="flex" flexDirection="column">
498-
<Typography variant="h5" fontWeight={600}>
495+
<Typography variant="h5" fontWeight={700}>
499496
{isUpdateField
500497
? `Edit ${fieldData.label}`
501498
: `Add ${name} Field`}
@@ -521,7 +518,8 @@ export const FieldForm = ({
521518
value={activeTab}
522519
onChange={(_, value: ActiveTab) => setActiveTab(value)}
523520
sx={{
524-
px: 2.5,
521+
position: "relative",
522+
top: "2px",
525523
}}
526524
>
527525
<Tab
@@ -550,24 +548,21 @@ export const FieldForm = ({
550548
<DialogContent
551549
dividers
552550
sx={{
553-
p: 2.5,
554-
position: "relative",
551+
pt: 2.5,
552+
pl: activeTab === "details" ? 0 : 2.5,
553+
backgroundColor: "grey.50",
554+
borderTop: 0,
555555
}}
556556
>
557557
{activeTab === "details" && (
558558
<Grid
559559
data-cy="DetailsTab"
560560
container
561-
spacing={2.5}
562-
maxWidth="480px"
561+
rowSpacing={2.5}
562+
columnSpacing={2.5}
563+
width="inherit"
563564
minHeight={448}
564-
mt={-2.5} //Offset grid item default top padding
565565
ml={0}
566-
sx={{
567-
"&.MuiGrid-container .MuiGrid-item": {
568-
pl: 0,
569-
},
570-
}}
571566
>
572567
{FORM_CONFIG[type]?.details?.map((fieldConfig, index) => {
573568
// Only show tooltip field when updating a field that already has a tooltip value
@@ -660,7 +655,7 @@ export const FieldForm = ({
660655
{isUpdateField ? (
661656
<DialogActions
662657
sx={{
663-
p: 2.5,
658+
pt: 2.5,
664659
}}
665660
>
666661
<Button
@@ -689,8 +684,7 @@ export const FieldForm = ({
689684
display: "flex",
690685
justifyContent: "space-between",
691686
alignItems: "center",
692-
px: 3,
693-
py: 2,
687+
pt: 2.5,
694688
}}
695689
>
696690
<Button variant="outlined" color="inherit" onClick={onBackClick}>
@@ -707,15 +701,15 @@ export const FieldForm = ({
707701
loading={isCreatingField || isBulkUpdating}
708702
onClick={handleAddAnotherField}
709703
>
710-
Add another field
704+
Add Another Field
711705
</LoadingButton>
712706
<LoadingButton
713707
data-cy="FieldFormAddFieldBtn"
714708
loading={isCreatingField || isBulkUpdating}
715709
onClick={handleSubmitForm}
716710
variant="contained"
717711
>
718-
Done
712+
Add Field
719713
</LoadingButton>
720714
</Box>
721715
</DialogActions>

‎src/apps/schema/src/app/components/AddFieldModal/views/FieldSelection.tsx

+32-23
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
Box,
88
Typography,
99
IconButton,
10+
Stack,
1011
} from "@mui/material";
1112
import SearchIcon from "@mui/icons-material/Search";
1213
import CloseIcon from "@mui/icons-material/Close";
@@ -67,41 +68,49 @@ export const FieldSelection = ({ onFieldClick, onModalClose }: Props) => {
6768

6869
return (
6970
<>
70-
<DialogTitle sx={{ px: 3, py: 2.5 }}>
71-
<Box display="flex" justifyContent="space-between" pb={2}>
72-
Select a Field Type
71+
<DialogTitle component="div">
72+
<Stack
73+
flexDirection="row"
74+
justifyContent="space-between"
75+
alignItems="flex-start"
76+
>
77+
<Stack gap={2}>
78+
<Typography variant="h5" fontWeight={700}>
79+
Select a Field Type
80+
</Typography>
81+
<Box width="349px">
82+
<TextField
83+
data-cy="FieldSelectionFilter"
84+
fullWidth
85+
InputProps={{
86+
startAdornment: (
87+
<InputAdornment position="start">
88+
<SearchIcon fontSize="small" />
89+
</InputAdornment>
90+
),
91+
}}
92+
onChange={handleFilterFields}
93+
placeholder="Search field types"
94+
autoFocus
95+
size="small"
96+
/>
97+
</Box>
98+
</Stack>
7399
<IconButton
74100
size="small"
75101
onClick={onModalClose}
76102
data-cy="AddFieldCloseBtn"
77103
>
78104
<CloseIcon fontSize="small" />
79105
</IconButton>
80-
</Box>
81-
<Box width="349px">
82-
<TextField
83-
data-cy="FieldSelectionFilter"
84-
fullWidth
85-
InputProps={{
86-
startAdornment: (
87-
<InputAdornment position="start">
88-
<SearchIcon fontSize="small" />
89-
</InputAdornment>
90-
),
91-
}}
92-
onChange={handleFilterFields}
93-
placeholder="Search field types"
94-
autoFocus
95-
size="small"
96-
/>
97-
</Box>
106+
</Stack>
98107
</DialogTitle>
99108
<DialogContent
100109
data-cy="FieldSelection"
101110
dividers
102111
sx={{
103-
px: 3,
104-
py: 1.5,
112+
pt: 2.5,
113+
backgroundColor: "grey.50",
105114
"&.MuiDialogContent-dividers": {
106115
borderColor: "border",
107116
},

0 commit comments

Comments
 (0)