Skip to content

Commit

Permalink
Reduce duplicate code in action cells
Browse files Browse the repository at this point in the history
Mostly by turning the button that's copy-pasted
everywhere into its own component.
  • Loading branch information
Arnei committed Dec 17, 2024
1 parent 02e9b65 commit 5c88e41
Show file tree
Hide file tree
Showing 17 changed files with 317 additions and 398 deletions.
58 changes: 17 additions & 41 deletions src/components/configuration/partials/ThemesActionsCell.tsx
Original file line number Diff line number Diff line change
@@ -1,16 +1,13 @@
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import ConfirmModal from "../../shared/ConfirmModal";
import ThemeDetailsModal from "./wizard/ThemeDetailsModal";
import {
fetchThemeDetails,
fetchUsage,
} from "../../../slices/themeDetailsSlice";
import { getUserInformation } from "../../../selectors/userInfoSelectors";
import { hasAccess } from "../../../utils/utils";
import { useAppDispatch, useAppSelector } from "../../../store";
import { useAppDispatch } from "../../../store";
import { deleteTheme, ThemeDetailsType } from "../../../slices/themeSlice";
import { Tooltip } from "../../shared/Tooltip";
import { ActionCellDelete } from "../../shared/ActionCellDelete";
import { IconButton } from "../../shared/IconButton";

/**
* This component renders the action cells of themes in the table view
Expand All @@ -20,18 +17,10 @@ const ThemesActionsCell = ({
}: {
row: ThemeDetailsType
}) => {
const { t } = useTranslation();
const dispatch = useAppDispatch();

const [displayDeleteConfirmation, setDeleteConfirmation] = useState(false);
const [displayThemeDetails, setThemeDetails] = useState(false);

const user = useAppSelector(state => getUserInformation(state));

const hideDeleteConfirmation = () => {
setDeleteConfirmation(false);
};

const hideThemeDetails = () => {
setThemeDetails(false);
};
Expand All @@ -50,15 +39,12 @@ const ThemesActionsCell = ({
return (
<>
{/* edit themes */}
{hasAccess("ROLE_UI_THEMES_EDIT", user) && (
<Tooltip title={t("CONFIGURATION.THEMES.TABLE.TOOLTIP.DETAILS")}>
<button
onClick={() => showThemeDetails()}
className="button-like-anchor more"
/>
</Tooltip>
)}

<IconButton
callback={() => showThemeDetails()}
iconClassname={"more"}
editAccessRole={"ROLE_UI_THEMES_EDIT"}
tooltipText={"CONFIGURATION.THEMES.TABLE.TOOLTIP.DETAILS"}
/>
{displayThemeDetails && (
<ThemeDetailsModal
handleClose={hideThemeDetails}
Expand All @@ -67,24 +53,14 @@ const ThemesActionsCell = ({
)}

{/* delete themes */}
{hasAccess("ROLE_UI_THEMES_DELETE", user) && (
<Tooltip title={t("CONFIGURATION.THEMES.TABLE.TOOLTIP.DELETE")}>
<button
onClick={() => setDeleteConfirmation(true)}
className="button-like-anchor remove ng-scope ng-isolate-scope"
/>
</Tooltip>
)}

{displayDeleteConfirmation && (
<ConfirmModal
close={hideDeleteConfirmation}
resourceName={row.name}
resourceId={row.id}
deleteMethod={deletingTheme}
resourceType="THEME"
/>
)}
<ActionCellDelete
editAccessRole={"ROLE_UI_THEMES_DELETE"}
tooltipText={"CONFIGURATION.THEMES.TABLE.TOOLTIP.DELETE"}
resourceId={row.id}
resourceName={row.name}
resourceType={"THEME"}
deleteMethod={deletingTheme}
/>
</>
);
};
Expand Down
131 changes: 54 additions & 77 deletions src/components/events/partials/EventActionCell.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import ConfirmModal from "../../shared/ConfirmModal";
import EmbeddingCodeModal from "./modals/EmbeddingCodeModal";
import { getUserInformation } from "../../../selectors/userInfoSelectors";
import { hasAccess } from "../../../utils/utils";
Expand All @@ -17,6 +16,8 @@ import {
import { Event, deleteEvent } from "../../../slices/eventSlice";
import { Tooltip } from "../../shared/Tooltip";
import { openModal } from "../../../slices/eventDetailsSlice";
import { ActionCellDelete } from "../../shared/ActionCellDelete";
import { IconButton } from "../../shared/IconButton";

/**
* This component renders the action cells of events in the table view
Expand All @@ -29,16 +30,11 @@ const EventActionCell = ({
const { t } = useTranslation();
const dispatch = useAppDispatch();

const [displayDeleteConfirmation, setDeleteConfirmation] = useState(false);
const [displaySeriesDetailsModal, setSeriesDetailsModal] = useState(false);
const [displayEmbeddingCodeModal, setEmbeddingCodeModal] = useState(false);

const user = useAppSelector(state => getUserInformation(state));

const hideDeleteConfirmation = () => {
setDeleteConfirmation(false);
};

const deletingEvent = (id: string) => {
dispatch(deleteEvent(id));
};
Expand Down Expand Up @@ -98,46 +94,33 @@ const EventActionCell = ({
)}

{/* Open event details */}
{hasAccess("ROLE_UI_EVENTS_DETAILS_VIEW", user) && (
<Tooltip title={t("EVENTS.EVENTS.TABLE.TOOLTIP.DETAILS")}>
<button
onClick={() => onClickEventDetails()}
className="button-like-anchor more"
/>
</Tooltip>
)}
<IconButton
callback={onClickEventDetails}
iconClassname={"more"}
editAccessRole={"ROLE_UI_EVENTS_DETAILS_VIEW"}
tooltipText={"EVENTS.EVENTS.TABLE.TOOLTIP.DETAILS"}
/>

{/* If event belongs to a series then the corresponding series details can be opened */}
{!!row.series && hasAccess("ROLE_UI_SERIES_DETAILS_VIEW", user) && (
<Tooltip title={t("EVENTS.SERIES.TABLE.TOOLTIP.DETAILS")}>
<button
onClick={() => onClickSeriesDetails()}
className="button-like-anchor more-series"
/>
</Tooltip>
{!!row.series && (
<IconButton
callback={onClickSeriesDetails}
iconClassname={"more-series"}
editAccessRole={"ROLE_UI_SERIES_DETAILS_VIEW"}
tooltipText={"EVENTS.SERIES.TABLE.TOOLTIP.DETAILS"}
/>
)}

{/* Delete an event */}
{/*TODO: needs to be checked if event is published */}
{hasAccess("ROLE_UI_EVENTS_DELETE", user) && (
<Tooltip title={t("EVENTS.EVENTS.TABLE.TOOLTIP.DELETE")}>
<button
onClick={() => setDeleteConfirmation(true)}
className="button-like-anchor remove"
/>
</Tooltip>
)}

{/* Confirmation for deleting an event*/}
{displayDeleteConfirmation && (
<ConfirmModal
close={hideDeleteConfirmation}
resourceName={row.title}
resourceType="EVENT"
resourceId={row.id}
deleteMethod={deletingEvent}
/>
)}
<ActionCellDelete
editAccessRole={"ROLE_UI_EVENTS_DELETE"}
tooltipText={"EVENTS.EVENTS.TABLE.TOOLTIP.DELETE"}
resourceId={row.id}
resourceName={row.title}
resourceType={"EVENT"}
deleteMethod={deletingEvent}
/>

{/* If the event has an preview then the editor can be opened and status if it needs to be cut is shown */}
{!!row.has_preview && hasAccess("ROLE_UI_EVENTS_EDITOR_VIEW", user) && (
Expand All @@ -160,54 +143,48 @@ const EventActionCell = ({

{/* If the event has comments and no open comments then the comment tab of event details can be opened directly */}
{row.has_comments && !row.has_open_comments && (
<Tooltip title={t("EVENTS.EVENTS.TABLE.TOOLTIP.COMMENTS")}>
<button
onClick={() => onClickComments()}
className="button-like-anchor comments"
/>
</Tooltip>
<IconButton
callback={() => onClickComments()}
iconClassname={"comments"}
tooltipText={"EVENTS.EVENTS.TABLE.TOOLTIP.COMMENTS"}
/>
)}

{/* If the event has comments and open comments then the comment tab of event details can be opened directly */}
{row.has_comments && row.has_open_comments && (
<Tooltip title={t("EVENTS.EVENTS.TABLE.TOOLTIP.COMMENTS")}>
<button
onClick={() => onClickComments()}
className="button-like-anchor comments-open"
/>
</Tooltip>
<IconButton
callback={() => onClickComments()}
iconClassname={"comments-open"}
tooltipText={"EVENTS.EVENTS.TABLE.TOOLTIP.COMMENTS"}
/>
)}

{/*If the event is in in a paused workflow state then a warning icon is shown and workflow tab of event
details can be opened directly */}
details can be opened directly */}
{row.workflow_state === "PAUSED" &&
hasAccess("ROLE_UI_EVENTS_DETAILS_WORKFLOWS_EDIT", user) && (
<Tooltip title={t("EVENTS.EVENTS.TABLE.TOOLTIP.PAUSED_WORKFLOW")}>
<button
onClick={() => onClickWorkflow()}
className="button-like-anchor fa fa-warning"
/>
</Tooltip>
)}
<IconButton
callback={() => onClickWorkflow()}
iconClassname={"fa fa-warning"}
editAccessRole={"ROLE_UI_EVENTS_DETAILS_WORKFLOWS_EDIT"}
tooltipText={"EVENTS.EVENTS.TABLE.TOOLTIP.PAUSED_WORKFLOW"}
/>
}

{/* Open assets tab of event details directly*/}
{hasAccess("ROLE_UI_EVENTS_DETAILS_ASSETS_VIEW", user) && (
<Tooltip title={t("EVENTS.EVENTS.TABLE.TOOLTIP.ASSETS")}>
<button
onClick={() => onClickAssets()}
className="button-like-anchor fa fa-folder-open"
/>
</Tooltip>
)}
<IconButton
callback={() => onClickAssets()}
iconClassname={"fa fa-folder-open"}
editAccessRole={"ROLE_UI_EVENTS_DETAILS_ASSETS_VIEW"}
tooltipText={"EVENTS.EVENTS.TABLE.TOOLTIP.ASSETS"}
/>

{/* Open dialog for embedded code*/}
{hasAccess("ROLE_UI_EVENTS_EMBEDDING_CODE_VIEW", user) && (
<Tooltip title={t("EVENTS.EVENTS.TABLE.TOOLTIP.EMBEDDING_CODE")}>
<button
onClick={() => showEmbeddingCodeModal()}
className="button-like-anchor fa fa-link"
/>
</Tooltip>
)}
<IconButton
callback={() => showEmbeddingCodeModal()}
iconClassname={"fa fa-link"}
editAccessRole={"ROLE_UI_EVENTS_EMBEDDING_CODE_VIEW"}
tooltipText={"EVENTS.EVENTS.TABLE.TOOLTIP.EMBEDDING_CODE"}
/>

{displayEmbeddingCodeModal && (
<EmbeddingCodeModal close={hideEmbeddingCodeModal} eventId={row.id} />
Expand Down
17 changes: 8 additions & 9 deletions src/components/events/partials/EventsDateCell.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@ import { getFilters } from "../../../selectors/tableFilterSelectors";
import { useAppDispatch, useAppSelector } from "../../../store";
import { fetchEvents } from "../../../slices/eventSlice";
import { renderValidDate } from "../../../utils/dateUtils";
import { Tooltip } from "../../shared/Tooltip";
import { Event } from "../../../slices/eventSlice";
import { IconButton } from "../../shared/IconButton";

/**
* This component renders the start date cells of events in the table view
Expand Down Expand Up @@ -43,14 +43,13 @@ const EventsDateCell = ({

return (
// Link template for start date of event
<Tooltip title={t("EVENTS.EVENTS.TABLE.TOOLTIP.START")}>
<button
className="button-like-anchor crosslink"
onClick={() => addFilter(row.date)}
>
{t("dateFormats.date.short", { date: renderValidDate(row.date) })}
</button>
</Tooltip>
<IconButton
callback={() => addFilter(row.date)}
iconClassname={"crosslink"}
tooltipText={"EVENTS.EVENTS.TABLE.TOOLTIP.START"}
>
{t("dateFormats.date.short", { date: renderValidDate(row.date) })}
</IconButton>
);
};

Expand Down
19 changes: 8 additions & 11 deletions src/components/events/partials/EventsLocationCell.tsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,11 @@
import React from "react";
import { useTranslation } from "react-i18next";
import { getFilters } from "../../../selectors/tableFilterSelectors";
import { editFilterValue } from "../../../slices/tableFilterSlice";
import { loadEventsIntoTable } from "../../../thunks/tableThunks";
import { useAppDispatch, useAppSelector } from "../../../store";
import { fetchEvents } from "../../../slices/eventSlice";
import { Tooltip } from "../../shared/Tooltip";
import { Event } from "../../../slices/eventSlice";
import { IconButton } from "../../shared/IconButton";

/**
* This component renders the location cells of events in the table view
Expand All @@ -16,7 +15,6 @@ const EventsLocationCell = ({
}: {
row: Event
}) => {
const { t } = useTranslation();
const dispatch = useAppDispatch();

const filterMap = useAppSelector(state => getFilters(state));
Expand All @@ -33,14 +31,13 @@ const EventsLocationCell = ({

return (
// Link template for location of event
<Tooltip title={t("EVENTS.EVENTS.TABLE.TOOLTIP.LOCATION")}>
<button
className="button-like-anchor crosslink"
onClick={() => addFilter(row.location)}
>
{row.location}
</button>
</Tooltip>
<IconButton
callback={() => addFilter(row.location)}
iconClassname={"crosslink"}
tooltipText={"EVENTS.EVENTS.TABLE.TOOLTIP.LOCATION"}
>
{row.location}
</IconButton>
);
};

Expand Down
Loading

0 comments on commit 5c88e41

Please sign in to comment.