Skip to content

Commit

Permalink
MAT-7223a, MAT-7911, MAT-7910: Fix margin, overflow issues
Browse files Browse the repository at this point in the history
  • Loading branch information
mcmcphillips committed Nov 13, 2024
1 parent fb785a7 commit 961f19e
Show file tree
Hide file tree
Showing 2 changed files with 144 additions and 139 deletions.
4 changes: 2 additions & 2 deletions src/components/editCqlLibrary/EditCQLLibrary.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,11 +57,11 @@
}

.allotment-wrapper {
margin: 0 32px;
margin: 0;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);

.inner-right {
margin-left: 30px;
padding: 24px 16px;
}

.split-view {
Expand Down
279 changes: 142 additions & 137 deletions src/components/editCqlLibrary/EditCqlLibrary.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -387,164 +387,169 @@ const EditCqlLibrary = () => {
</div>
</Allotment.Pane>
<Allotment.Pane>
<div id="right-panel">
<div className="right-panel">
<NavTabs
activeTab={activeTab}
handleTabChange={handleTabChange}
/>
<div
style={{
marginTop: 10,
display: "flex",
flexDirection: "row",
justifyContent: "flex-end",
}}
>
<Typography
<div style={{ height: "calc(100% - 48px)", overflowY: "auto" }}>
<div
style={{
fontSize: 14,
fontWeight: 300,
fontFamily: "Rubik",
marginRight: 32,
paddingTop: 10,
display: "flex",
flexDirection: "row",
justifyContent: "flex-end",
}}
>
<span
<Typography
style={{
color: "rgb(174, 28, 28)",
marginRight: 3,
fontWeight: 400,
fontSize: 14,
fontWeight: 300,
fontFamily: "Rubik",
marginRight: 32,
}}
>
*
</span>
Indicates required field
</Typography>
</div>
<div className="inner-right">
{activeTab === "details" && (
<div id="details-tab" data-test-id="details-tab">
{/* These are loaded in first instance and then removed why ? */}
{!formik.values.draft && (
<span
style={{
color: "rgb(174, 28, 28)",
marginRight: 3,
fontWeight: 400,
}}
>
*
</span>
Indicates required field
</Typography>
</div>
<div className="inner-right">
{activeTab === "details" && (
<div id="details-tab" data-test-id="details-tab">
{/* These are loaded in first instance and then removed why ? */}
{!formik.values.draft && (
<div className="form-row">
<MadieAlert
type="info"
content={
<p>
CQL Library is not a draft. Only drafts can be
edited.
</p>
}
canClose={false}
/>
</div>
)}
{!canEdit && (
<div className="form-row">
<MadieAlert
type="info"
content={
<p>
You are not the owner of the CQL Library. Only
owner can edit it.
</p>
}
canClose={false}
/>
</div>
)}

<div className="form-row">
<MadieAlert
type="info"
content={
<p>
CQL Library is not a draft. Only drafts can be
edited.
</p>
<TextField
label="CQL Library Name"
required
id="cqlLibraryName"
data-testid="cql-library-name-text-field"
disabled={!formik.values.draft || !canEdit}
inputProps={{
id: "cql-library-name-text-field-input",
"data-testid": "cql-library-name-text-field-input",
"aria-required": true,
required: true,
}}
error={
formik.touched.cqlLibraryName &&
Boolean(formik.errors.cqlLibraryName)
}
canClose={false}
{...formik.getFieldProps("cqlLibraryName")}
helperText={formikErrorHandler(
"cqlLibraryName",
true
)}
placeholder="Enter a Cql Library Name"
/>
</div>
)}
{!canEdit && (

<div className="form-row">
<MadieAlert
type="info"
content={
<p>
You are not the owner of the CQL Library. Only
owner can edit it.
</p>
<TextArea
label="Description"
disabled={!formik.values.draft || !canEdit}
required
name="cql-library-description"
id="cql-library-description"
onChange={formik.handleChange}
value={formik.values.description}
placeholder="Description"
data-testid={"cql-library-description"}
{...formik.getFieldProps("description")}
error={
formik.touched.description &&
Boolean(formik.errors.description)
}
canClose={false}
helperText={formikErrorHandler("description", true)}
/>
</div>
)}

<div className="form-row">
<TextField
label="CQL Library Name"
required
id="cqlLibraryName"
data-testid="cql-library-name-text-field"
disabled={!formik.values.draft || !canEdit}
inputProps={{
id: "cql-library-name-text-field-input",
"data-testid": "cql-library-name-text-field-input",
"aria-required": true,
required: true,
}}
error={
formik.touched.cqlLibraryName &&
Boolean(formik.errors.cqlLibraryName)
}
{...formik.getFieldProps("cqlLibraryName")}
helperText={formikErrorHandler("cqlLibraryName", true)}
placeholder="Enter a Cql Library Name"
/>
</div>

<div className="form-row">
<TextArea
label="Description"
disabled={!formik.values.draft || !canEdit}
required
name="cql-library-description"
id="cql-library-description"
onChange={formik.handleChange}
value={formik.values.description}
placeholder="Description"
data-testid={"cql-library-description"}
{...formik.getFieldProps("description")}
error={
formik.touched.description &&
Boolean(formik.errors.description)
}
helperText={formikErrorHandler("description", true)}
/>
</div>

<div className="form-row">
<AutoComplete
id="publisher"
dataTestId="publisher"
label="Publisher"
placeholder="-"
required={true}
disabled={!formik.values.draft || !canEdit}
error={
formik.touched.publisher && formik.errors.publisher
}
helperText={
formik.touched.publisher && formik.errors.publisher
}
options={organizations}
{...formik.getFieldProps("publisher")}
onChange={formik.setFieldValue}
/>
</div>
<div className="form-row">
<AutoComplete
id="publisher"
dataTestId="publisher"
label="Publisher"
placeholder="-"
required={true}
disabled={!formik.values.draft || !canEdit}
error={
formik.touched.publisher && formik.errors.publisher
}
helperText={
formik.touched.publisher && formik.errors.publisher
}
options={organizations}
{...formik.getFieldProps("publisher")}
onChange={formik.setFieldValue}
/>
</div>

<div className="form-row">
<FormControlLabel
sx={{
"& .MuiFormControlLabel-label": {
fontSize: 16,
fontWeight: 300,
},
}}
control={
<Checkbox
id="experimental"
data-testid="cql-library-experimental-checkbox"
sx={{ "& .MuiSvgIcon-root": { fontSize: 28 } }}
disabled={!formik.values.draft || !canEdit}
{...formik.getFieldProps("experimental")}
checked={formik.values.experimental}
onChange={(event: any) => {
formik.setFieldValue(
"experimental",
event.target.checked
);
}}
/>
}
label="Experimental"
/>
<div className="form-row">
<FormControlLabel
sx={{
"& .MuiFormControlLabel-label": {
fontSize: 16,
fontWeight: 300,
},
}}
control={
<Checkbox
id="experimental"
data-testid="cql-library-experimental-checkbox"
sx={{ "& .MuiSvgIcon-root": { fontSize: 28 } }}
disabled={!formik.values.draft || !canEdit}
{...formik.getFieldProps("experimental")}
checked={formik.values.experimental}
onChange={(event: any) => {
formik.setFieldValue(
"experimental",
event.target.checked
);
}}
/>
}
label="Experimental"
/>
</div>
</div>
</div>
)}
)}
</div>
</div>
</div>
</Allotment.Pane>
Expand Down

0 comments on commit 961f19e

Please sign in to comment.