Factor out some "save edit" footer code

This pulls the code into a component to limit duplication. The component can be used when "cancel" and "save" buttons are needed in modal tabs that allow editing things like access policies. This makes it easier to reuse and limits duplicated code.
opencast · Aug 12, 2024 · 40e62da · 40e62da
1 parent 3ecbbb0
commit 40e62da
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 52 deletions.
diff --git a/src/components/events/partials/ModalTabsAndPages/EventDetailsAccessPolicyTab.tsx b/src/components/events/partials/ModalTabsAndPages/EventDetailsAccessPolicyTab.tsx
@@ -45,7 +45,6 @@ const EventDetailsAccessPolicyTab = ({
 			resourceId={eventId}
 			header={header}
 			buttonText={"EVENTS.EVENTS.DETAILS.ACCESS.ACCESS_POLICY.LABEL"}
-			saveButtonText={"SAVE"}
 			policies={policies}
 			fetchAccessPolicies={fetchAccessPoliciesWrapper}
 			fetchHasActiveTransactions={fetchHasActiveTransactionsWrapper}

diff --git a/src/components/events/partials/ModalTabsAndPages/NewTobiraPage.tsx b/src/components/events/partials/ModalTabsAndPages/NewTobiraPage.tsx
@@ -8,6 +8,7 @@ import { useAppDispatch, useAppSelector } from "../../../../store";
 import { TobiraPage, fetchSeriesDetailsTobiraNew, setErrorTobiraPage, setTobiraPage } from "../../../../slices/seriesSlice";
 import { getSeriesTobiraPage, getSeriesTobiraPageError } from "../../../../selectors/seriesSeletctor";
 import { NOTIFICATION_CONTEXT } from "../../../../configs/modalConfig";
+import { SaveEditFooter } from "../../../shared/SaveEditFooter";
 
 /**
  * This component renders the theme page for new series in the new series wizard.
@@ -347,27 +348,12 @@ const NewTobiraPage = <T extends RequiredTobiraFormProps>({
 							</div>
 						</>}
 						{/* Render buttons for saving or resetting updated path */}
-						{editMode && <footer style={{ padding: "0 15px" }}>
-							{formik.values.selectedPage !== undefined && <div className="pull-left">
-								<button
-									type="reset"
-									onClick={() => formik.setFieldValue("selectedPage", undefined)}
-									className="cancel"
-								>{t("CANCEL")}</button>
-							</div>}
-							<div className="pull-right">
-								<button
-									onClick={() => formik.handleSubmit()}
-									disabled={!isValid || formik.values.selectedPage === undefined}
-									className={`save green ${
-										(!isValid || formik.values.selectedPage === undefined)
-											? "disabled"
-											: ""
-										}`
-									}
-								>{t("SAVE")}</button>
-							</div>
-						</footer>}
+						{editMode && <SaveEditFooter
+							active={formik.values.selectedPage !== undefined}
+							reset={() => formik.setFieldValue("selectedPage", undefined)}
+							submit={() => formik.handleSubmit()}
+							{...{ isValid }}
+						/>}
 					</div>
 				</div>
 			</div>

diff --git a/src/components/events/partials/ModalTabsAndPages/SeriesDetailsAccessTab.tsx b/src/components/events/partials/ModalTabsAndPages/SeriesDetailsAccessTab.tsx
@@ -45,7 +45,6 @@ const SeriesDetailsAccessTab = ({
 			resourceId={seriesId}
 			header={header}
 			buttonText={"EVENTS.SERIES.DETAILS.ACCESS.ACCESS_POLICY.LABEL"}
-			saveButtonText={"SAVE"}
 			descriptionText={t("EVENTS.SERIES.NEW.ACCESS.ACCESS_POLICY.DESCRIPTION")}
 			policies={policies}
 			fetchAccessPolicies={fetchSeriesDetailsAclsWrapper}

diff --git a/src/components/shared/SaveEditFooter.tsx b/src/components/shared/SaveEditFooter.tsx
@@ -0,0 +1,38 @@
+import { useTranslation } from "react-i18next"
+
+type SaveEditFooterProps = {
+    active: boolean;
+    reset: () => void;
+    submit: () => void;
+    isValid?: boolean;
+}
+
+export const SaveEditFooter: React.FC<SaveEditFooterProps> = ({
+    active,
+    reset,
+    submit,
+    isValid,
+}) => {
+    const { t } = useTranslation();
+
+    return <footer style={{ padding: "0 15px" }}>
+        {active && isValid && (
+            <div className="pull-left">
+                <button
+                    type="reset"
+                    onClick={reset}
+                    className="cancel"
+                >{t("CANCEL")}</button>
+            </div>
+        )}
+        <div className="pull-right">
+            <button
+                onClick={submit}
+                disabled={!isValid || !active}
+                className={`save green ${
+                    !isValid || !active ? "disabled" : ""
+                }`}
+            >{t("SAVE")}</button>
+        </div>
+    </footer>;
+}
diff --git a/src/components/shared/modals/ResourceDetailsAccessPolicyTab.tsx b/src/components/shared/modals/ResourceDetailsAccessPolicyTab.tsx
@@ -24,6 +24,8 @@ import { useAppDispatch, useAppSelector } from "../../../store";
 import { removeNotificationWizardForm, addNotification } from "../../../slices/notificationSlice";
 import { useTranslation } from "react-i18next";
 import { TransformedAcl } from "../../../slices/aclDetailsSlice";
+import { SaveEditFooter } from "../SaveEditFooter";
+
 
 /**
  * This component manages the access policy tab of resource details modals
@@ -37,7 +39,6 @@ const ResourceDetailsAccessPolicyTab = ({
 	saveNewAccessPolicies,
 	descriptionText,
 	buttonText,
-	saveButtonText,
 	editAccessRole,
 	policyChanged,
 	setPolicyChanged,
@@ -50,7 +51,6 @@ const ResourceDetailsAccessPolicyTab = ({
 	saveNewAccessPolicies: (id: string, policies: { acl: Acl }) => Promise<any>,
 	descriptionText: string,
 	buttonText: string,
-	saveButtonText: string,
 	editAccessRole: string,
 	policyChanged: boolean,
 	setPolicyChanged: (value: boolean) => void,
@@ -597,33 +597,12 @@ const ResourceDetailsAccessPolicyTab = ({
 											</div>
 
 											{/* Save and cancel buttons */}
-											{!transactions.read_only && (
-												<footer style={{ padding: "0 15px" }}>
-													{policyChanged &&
-														formik.dirty && (
-														<div className="pull-left">
-															<button
-																type="reset"
-																onClick={() => resetPolicies(formik.resetForm)}
-																className="cancel"
-															>
-																{t("CANCEL") /* Cancel */}
-															</button>
-														</div>
-													)}
-													<div className="pull-right">
-														<button
-															onClick={() => saveAccess(formik.values)}
-															disabled={!formik.isValid || !(policyChanged && formik.dirty)}
-															className={`save green  ${
-																!formik.isValid || !(policyChanged && formik.dirty) ? "disabled" : ""
-															}`}
-														>
-															{t(saveButtonText) /* Save */}
-														</button>
-													</div>
-												</footer>
-												)}
+											{!transactions.read_only && <SaveEditFooter
+												active={policyChanged && formik.dirty}
+												reset={() => resetPolicies(formik.resetForm)}
+												submit={() => saveAccess(formik.values)}
+												isValid={formik.isValid}
+											/>}
 										</div>
 									)}
 								</Formik>