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

Allow series path removal via Tobira tab in series details #983

Merged
merged 6 commits into from
Dec 11, 2024
Merged

Allow series path removal via Tobira tab in series details #983

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
d47d831
Fix bug where adding new path wasn't cancelled correctly
owi92 Nov 19, 2024
e7ca9c4
Extend confirm modal for tobira-path-removal purpose
owi92 Nov 19, 2024
6e2a462
Add `mode` prop to `NewTobiraPage`
owi92 Nov 19, 2024
4b25549
Modify Tobira tab to allow removing series paths
owi92 Nov 19, 2024
aaaaef7
Use new endpoint for unmounting series
owi92 Dec 10, 2024
d419aeb
Improve Tobira error handling
owi92 Dec 10, 2024
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
151 changes: 91 additions & 60 deletions src/components/events/partials/ModalTabsAndPages/DetailsTobiraTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ import EventDetailsTabHierarchyNavigation from "./EventDetailsTabHierarchyNaviga
import NewTobiraPage, { TobiraFormProps } from "./NewTobiraPage";
import { fetchSeriesDetailsTobira, setTobiraTabHierarchy, TobiraData, updateSeriesTobiraPath } from "../../../../slices/seriesDetailsSlice";
import { fetchSeriesDetailsTobiraNew, TobiraPage } from "../../../../slices/seriesSlice";
import ConfirmModal from "../../../shared/ConfirmModal";
import { Tooltip } from "../../../shared/Tooltip";


export type TobiraTabHierarchy = "main" | "edit-path";
Expand Down Expand Up @@ -92,6 +94,15 @@ const DetailsTobiraTab = ({ kind, id }: DetailsTobiraTabProps) => {
dispatch(setTobiraTabHierarchy("main"));
};

const handleDelete = async (hostPage: TobiraPage) => {
await dispatch(updateSeriesTobiraPath({
seriesId: id,
currentPath: hostPage.path,
breadcrumbs: [],
remove: true,
})).then(() => dispatch(fetchSeriesDetailsTobira(id)))
}

const openSubTab = async (tabType: TobiraTabHierarchy, currentPage?: TobiraPage) => {
if (!!currentPage) {
const breadcrumbs = getBreadcrumbs(currentPage);
Expand Down Expand Up @@ -139,16 +150,13 @@ const DetailsTobiraTab = ({ kind, id }: DetailsTobiraTabProps) => {
{kind === "series" && <p className="tab-description">
{t("EVENTS.SERIES.DETAILS.TOBIRA.DESCRIPTION")}
</p>}
<div className="obj-container">
<div className="obj tbl-list">
<header>
{t(`EVENTS.${i18nKey}.DETAILS.TOBIRA.PAGES`)}
</header>
<div className="obj-container">
<TobiraTable {...{ tobiraData, i18nKey, openSubTab }} />
</div>
</div>
</div>
<TobiraTable {...{
tobiraData,
i18nKey,
openSubTab,
dispatch,
handleDelete,
}} />
</>}
</div>}
</div>
Expand All @@ -159,7 +167,10 @@ const DetailsTobiraTab = ({ kind, id }: DetailsTobiraTabProps) => {
onSubmit={values => handleSubmit(values)}
>
{formik => <NewTobiraPage
editMode
mode={{
edit: true,
mount: tobiraData.hostPages.length === 0,
}}
formik={formik}
nextPage={() => {}}
previousPage={() => {}}
Expand All @@ -172,59 +183,79 @@ const DetailsTobiraTab = ({ kind, id }: DetailsTobiraTabProps) => {
type TobiraTableProps = {
tobiraData: TobiraData;
i18nKey: "SERIES" | "EVENTS";
openSubTab: (tabType: TobiraTabHierarchy, currentPage?: TobiraPage) => Promise<void>
openSubTab: (tabType: TobiraTabHierarchy, currentPage?: TobiraPage) => Promise<void>;
handleDelete: (hostPage: TobiraPage) => Promise<void>;
};

const TobiraTable: React.FC<TobiraTableProps> = ({ tobiraData, i18nKey, openSubTab }) => {
const TobiraTable = ({ tobiraData, i18nKey, openSubTab, handleDelete }: TobiraTableProps) => {
const { t } = useTranslation();
return <table className="main-tbl">
<tbody>
{tobiraData.hostPages.length === 0 && <tr>
<td className="tobira-not-mounted">
{t(`EVENTS.${i18nKey}.DETAILS.TOBIRA.NOT_MOUNTED`)}
{i18nKey === "SERIES" && (
<button
style={{ margin: 5 }}
className="button-like-anchor details-link pull-right"
onClick={() => openSubTab("edit-path")}
>
{t("EVENTS.SERIES.DETAILS.TOBIRA.MOUNT_SERIES")}
</button>
)}
</td>
</tr>}
{tobiraData.hostPages.map(hostPage => <tr key={hostPage.path}>
<td>
<a href={tobiraData.baseURL + hostPage.path}>
{hostPage.path !== '/' && <>
<span className="tobira-page-separator">/</span>
{hostPage.ancestors.map((ancestor, key) => (
<span key={key}>
{ancestor.title}
<span className="tobira-page-separator">/</span>
</span>
))}
const [showConfirmationModal, setShowConfirmationModal] = useState(false);

return <div className="obj">
<header>{t(`EVENTS.${i18nKey}.DETAILS.TOBIRA.PAGES`)}</header>
<table className="main-tbl">
<tbody>
{tobiraData.hostPages.length === 0 && <tr>
<td className="tobira-not-mounted">
{t(`EVENTS.${i18nKey}.DETAILS.TOBIRA.NOT_MOUNTED`)}
{i18nKey === "SERIES" && <Tooltip title={t("EVENTS.SERIES.DETAILS.TOBIRA.MOUNT_SERIES")}>
<button
style={{ margin: 5 }}
className="button-like-anchor edit fa fa-pencil-square pull-right"
onClick={() => openSubTab("edit-path")}
/>
</Tooltip>}
</td>
</tr>}
{tobiraData.hostPages.map(hostPage => <tr key={hostPage.path}>
<td>
<a href={tobiraData.baseURL + hostPage.path}>
{hostPage.path !== '/' && <>
<span className="tobira-page-separator">/</span>
{hostPage.ancestors.map((ancestor, key) => (
<span key={key}>
{ancestor.title}
<span className="tobira-page-separator">/</span>
</span>
))}
</>}
<span className="tobira-leaf-page">
{hostPage.path !== '/' && <span>
{hostPage.title}
</span>}
{hostPage.path === '/' && <span>
{t(`EVENTS.${i18nKey}.DETAILS.TOBIRA.HOMEPAGE`)}
</span>}
</span>
</a>
{i18nKey === "SERIES" && hostPage.blocks?.length === 1 && <>
<Tooltip title={t("EVENTS.SERIES.DETAILS.TOBIRA.REMOVE_PATH")}>
<button
style={{ margin: 5 }}
onClick={() => setShowConfirmationModal(true)}
className="button-like-anchor remove pull-right"
/>
</Tooltip>
<Tooltip title={t("EVENTS.SERIES.DETAILS.TOBIRA.EDIT_PATH")}>
<button
style={{ margin: 5 }}
className="button-like-anchor edit fa fa-pencil-square pull-right"
onClick={() => openSubTab("edit-path", hostPage)}
/>
</Tooltip>
{showConfirmationModal && <ConfirmModal
close={() => setShowConfirmationModal(false)}
resourceName={hostPage.path}
resourceId={null}
deleteMethod={() => handleDelete(hostPage)}
resourceType="TOBIRA_PATH"
/>}
</>}
<span className="tobira-leaf-page">
{hostPage.path !== '/' && <span>
{hostPage.title}
</span>}
{hostPage.path === '/' && <span>
{t(`EVENTS.${i18nKey}.DETAILS.TOBIRA.HOMEPAGE`)}
</span>}
</span>
</a>
{i18nKey === "SERIES" && hostPage.blocks?.length === 1 && <button
style={{ margin: 5 }}
className="button-like-anchor details-link pull-right"
onClick={() => openSubTab("edit-path", hostPage)}
>
{t("EVENTS.SERIES.DETAILS.TOBIRA.EDIT_PATH")}
</button>}
</td>
</tr>)}
</tbody>
</table>;
</td>
</tr>)}
</tbody>
</table>
</div>;
};

export default DetailsTobiraTab;
31 changes: 23 additions & 8 deletions src/components/events/partials/ModalTabsAndPages/NewTobiraPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,12 +24,16 @@ const NewTobiraPage = <T extends TobiraFormProps>({
formik,
nextPage,
previousPage,
editMode,
mode,
}: {
formik: FormikProps<T>,
nextPage: (values: T) => void,
previousPage:(values: T) => void,
editMode?: boolean,
mode: {
edit?: boolean,
mount?: boolean,
},
}) => {
const { t } = useTranslation();
const dispatch = useAppDispatch();
Expand Down Expand Up @@ -202,7 +206,7 @@ const NewTobiraPage = <T extends TobiraFormProps>({
<div className="modal-body">
{/* Notifications */}
<Notifications context="tobira" />
{!editMode && <p className="tab-description">{t("EVENTS.SERIES.NEW.TOBIRA.DESCRIPTION")}</p>}
<p className="tab-description">{t("EVENTS.SERIES.NEW.TOBIRA.DESCRIPTION")}</p>
{!error && <>
<div className="obj-container padded">
<div className="obj">
Expand All @@ -226,7 +230,7 @@ const NewTobiraPage = <T extends TobiraFormProps>({
<table className="main-tbl highlight-hover">
<thead>
<tr>
<th className="small"/>
{currentPage.children.length > 0 && <th className="small"/>}
<th>
{t("EVENTS.SERIES.NEW.TOBIRA.PAGE_TITLE") /* Title */}
</th>
Expand Down Expand Up @@ -300,7 +304,15 @@ const NewTobiraPage = <T extends TobiraFormProps>({
</td>
{editing && <td>
{page.new && <button
onClick={() => select(undefined)}
onClick={() => {
dispatch(setTobiraPage({
...currentPage,
children: currentPage.children.filter((_, idx) => (
idx !== currentPage.children.length - 1
))
}));
select(undefined);
}}
title={t('EVENTS.SERIES.NEW.TOBIRA.CANCEL')}
className="button-like-anchor remove"
/>}
Expand Down Expand Up @@ -329,14 +341,17 @@ const NewTobiraPage = <T extends TobiraFormProps>({
{formik.values.selectedPage.path}
</code>
</>
: t("EVENTS.SERIES.NEW.TOBIRA.NO_PAGE_SELECTED")
: (mode.edit && !mode.mount
? t("EVENTS.SERIES.NEW.TOBIRA.NO_PAGE_SELECTED_EDIT")
: t("EVENTS.SERIES.NEW.TOBIRA.NO_PAGE_SELECTED")
)
}
</p>
<p style={{ fontSize: 12 }}>{t("EVENTS.SERIES.NEW.TOBIRA.DIRECT_LINK")}</p>
{!mode.edit && <p style={{ fontSize: 12 }}>{t("EVENTS.SERIES.NEW.TOBIRA.DIRECT_LINK")}</p>}
</>}
</div>
{/* Render buttons for saving or resetting updated path */}
{editMode && <SaveEditFooter
{mode.edit && <SaveEditFooter
active={formik.values.selectedPage !== undefined}
reset={() => formik.setFieldValue("selectedPage", undefined)}
submit={() => formik.handleSubmit()}
Expand All @@ -345,7 +360,7 @@ const NewTobiraPage = <T extends TobiraFormProps>({
</div>

{/* Button for navigation to next page and previous page */}
{!editMode && <WizardNavigationButtons
{!mode.edit && <WizardNavigationButtons
formik={formik}
nextPage={nextPage}
previousPage={previousPage}
Expand Down
3 changes: 1 addition & 2 deletions src/components/events/partials/modals/EventDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -266,12 +266,11 @@ const EventDetails = ({
header={tabs[page].bodyHeaderTranslation ?? ""}
/>
)}
{page === EventDetailsPage.Tobira && (<>
{page === EventDetailsPage.Tobira && (
<DetailsTobiraTab
kind="event"
id={eventId}
/>
</>
)}
{page === EventDetailsPage.Statistics && !isLoadingStatistics && (
<EventDetailsStatisticsTab
Expand Down
1 change: 1 addition & 0 deletions src/components/events/partials/wizards/NewSeriesWizard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -207,6 +207,7 @@ const NewSeriesWizard: React.FC<{
)}
{page === 4 && (
<NewTobiraPage
mode={{ mount: true }}
formik={formik}
nextPage={nextPage}
previousPage={previousPage}
Expand Down
4 changes: 2 additions & 2 deletions src/components/shared/ConfirmModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ const ConfirmModal = <T,>({
deleteWithCautionMessage = "",
}: {
close: () => void,
resourceType: "EVENT" | "SERIES" | "LOCATION" | "USER" | "GROUP" | "ACL" | "THEME",
resourceType: "EVENT" | "SERIES" | "LOCATION" | "USER" | "GROUP" | "ACL" | "THEME" | "TOBIRA_PATH",
resourceName: string,
resourceId: T,
deleteMethod: (id: T) => void,
Expand Down Expand Up @@ -68,7 +68,7 @@ const ConfirmModal = <T,>({

<div>
<p>
<span>
<span style={{ padding: "0px 4px"}}>
{t("CONFIRMATIONS.METADATA.NOTICE." + resourceType)}
</span>
</p>
Expand Down
7 changes: 6 additions & 1 deletion src/i18n/org/opencastproject/adminui/languages/lang-en_US.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,8 @@
"GROUP": "The following group will be deleted",
"USER": "The following user will be deleted",
"THEME": "The following theme will be deleted",
"LOCATION": "The following location will be deleted"
"LOCATION": "The following location will be deleted",
"TOBIRA_PATH": "The series will be removed from the following path in Tobira:"
},
"NAME": "Name"
},
Expand Down Expand Up @@ -171,7 +172,9 @@
"SERIES_ADDED": "The series has been created",
"SERIES_NOT_SAVED": "The series could not be saved",
"SERIES_PATH_UPDATED": "The series path has been updated",
"SERIES_PATH_REMOVED": "The series path has been removed",
"SERIES_PATH_NOT_UPDATED": "The series path could not be updated",
"SERIES_PATH_NOT_REMOVED": "The series path could not be removed",
"EVENTS_CREATED": "The event has been created",
"EVENTS_UPLOAD_STARTED": "The event is being uploaded… {{ progress }}%",
"EVENTS_NOT_CREATED": "The event could not be created",
Expand Down Expand Up @@ -1146,6 +1149,7 @@
"HOMEPAGE": "Homepage",
"SELECTED_PAGE": "Series will be mounted under the following path",
"NO_PAGE_SELECTED": "No page selected. Series will not be mounted in Tobira.",
"NO_PAGE_SELECTED_EDIT": "No page selected. Series path will not be changed.",
"PATH": "Path",
"DIRECT_LINK": "A direct link will be available.",
"MOUNT_DISCLAIMER": "Series can only be mounted in empty pages"
Expand Down Expand Up @@ -1234,6 +1238,7 @@
"PAGES": "Pages in Tobira that contain this series",
"SHOW_PAGES": "Show all pages",
"EDIT_PATH" : "Edit path",
"REMOVE_PATH" : "Remove path",
"MOUNT_SERIES": "Mount series",
"DESCRIPTION": "You may edit the path of pages containing this series if the page has no other content."
},
Expand Down
Loading
Loading