Merge branch 'unify-buttons' of Arnei/opencast-admin-interface into r/17.x

Pull request #1355

  Unify buttons

Author: gregorydlogan

src/components/Header.tsx

@@ -25,6 +25,7 @@ import { IconContext } from "react-icons";
 import ButtonLikeAnchor from "./shared/ButtonLikeAnchor";
 import { ModalHandle } from "./shared/modals/Modal";
 import { broadcastLogout } from "../utils/broadcastSync";
+import BaseButton from "./shared/BaseButton";
 
 // References for detecting a click outside of the container of the dropdown menus
 const containerLang = React.createRef<HTMLDivElement>();
@@ -144,11 +145,11 @@ const Header = () => {
 					{/* Select language */}
 					<div className="nav-dd lang-dd" id="lang-dd" ref={containerLang}>
 						<Tooltip active={!displayMenuLang} title={t("LANGUAGE")}>
-							<button className="lang" onClick={() => setMenuLang(!displayMenuLang)}>
+							<BaseButton className="lang" onClick={() => setMenuLang(!displayMenuLang)}>
 								<IconContext.Provider value={{ style: {fontSize: "20px"} }}>
 									<HiTranslate />
 								</IconContext.Provider>
-							</button>
+							</BaseButton>
 						</Tooltip>
 						{displayMenuLang && <MenuLang handleChangeLanguage={handleChangeLanguage}/>}
 					</div>
@@ -192,14 +193,14 @@ const Header = () => {
 							ref={containerNotify}
 						>
 							<Tooltip active={!displayMenuNotify} title={t("SYSTEM_NOTIFICATIONS")}>
-								<button onClick={() => setMenuNotify(!displayMenuNotify)}>
+								<BaseButton onClick={() => setMenuNotify(!displayMenuNotify)}>
 									<i className="fa fa-bell" aria-hidden="true" />
 									{errorCounter !== 0 && (
 										<span id="error-count" className="badge">
 											{errorCounter}
 										</span>
 									)}
-								</button>
+								</BaseButton>
 							</Tooltip>
 							{/* Click on the bell icon, a dropdown menu with all services in serviceList and their status opens */}
 							{displayMenuNotify && (
@@ -227,11 +228,11 @@ const Header = () => {
 								ref={containerHelp}
 							>
 								<Tooltip active={!displayMenuHelp} title={t("HELP.HELP")}>
-									<button
+									<BaseButton
 										onClick={() => setMenuHelp(!displayMenuHelp)}
 									>
 										<span className="fa fa-question-circle"></span>
-									</button>
+									</BaseButton>
 								</Tooltip>
 								{/* Click on the help icon, a dropdown menu with documentation, REST-docs and shortcuts (if available) opens */}
 								{displayMenuHelp && (
@@ -248,13 +249,13 @@ const Header = () => {
 
 					{/* Username */}
 					<div className="nav-dd user-dd" id="user-dd" ref={containerUser}>
-						<button
+						<BaseButton
 							className="h-nav"
 							onClick={() => setMenuUser(!displayMenuUser)}
 						>
 							{user.user.name || user.user.username}
 							<span className="dropdown-icon" />
-						</button>
+						</BaseButton>
 						{/* Click on username, a dropdown menu with the option to logout opens */}
 						{displayMenuUser && <MenuUser />}
 					</div>
@@ -281,7 +282,7 @@ const MenuLang = ({ handleChangeLanguage }: { handleChangeLanguage: (code: strin
 			{languages.map((language, key) => (
 				<li key={key}>
 					<ButtonLikeAnchor
-						extraClassName={(i18n.language === language.code ? "selected" : "")}
+						className={(i18n.language === language.code ? "selected" : "")}
 						onClick={() => handleChangeLanguage(language.code)}
 					>
 						{language.long}
@@ -312,8 +313,7 @@ const MenuNotify = ({
 			{healthStatus.map((service, key) => (
 				<li key={key}>
 					{!!service.status && (
-						<button
-							className="button-like-anchor"
+						<ButtonLikeAnchor
 							onClick={() => redirectToServices()}
 						>
 							<span> {service.name} </span>
@@ -326,7 +326,7 @@ const MenuNotify = ({
 									{service.status}
 								</span>
 							)}
-						</button>
+						</ButtonLikeAnchor>
 					)}
 				</li>
 			))}

src/components/NavBar.tsx

@@ -10,6 +10,7 @@ import NewResourceModal, { NewResource } from "./shared/NewResourceModal";
 import { useHotkeys } from "react-hotkeys-hook";
 import { ModalHandle } from "./shared/modals/Modal";
 import { ParseKeys } from "i18next";
+import BaseButton from "./shared/BaseButton";
 
 /**
  * Component that renders the nav bar
@@ -105,13 +106,13 @@ const NavBar = ({
 			{create &&
 				<div className="btn-group">
 					{hasAccess(create.accessRole, user) && (
-						<button
+						<BaseButton
 							className="add"
 							onClick={showNewResourceModal}
 						>
 							<i className="fa fa-plus" />
 							<span>{t(create.text)}</span>
-						</button>
+						</BaseButton>
 					)}
 				</div>
 			}

src/components/configuration/partials/ThemesActionsCell.tsx

@@ -7,9 +7,9 @@ import { useAppDispatch } from "../../../store";
 import { deleteTheme, ThemeDetailsType } from "../../../slices/themeSlice";
 import ThemeDetails from "./wizard/ThemeDetails";
 import { ActionCellDelete } from "../../shared/ActionCellDelete";
-import { IconButton } from "../../shared/IconButton";
 import { Modal, ModalHandle } from "../../shared/modals/Modal";
 import { useTranslation } from "react-i18next";
+import ButtonLikeAnchor from "../../shared/ButtonLikeAnchor";
 
 /**
  * This component renders the action cells of themes in the table view
@@ -44,9 +44,9 @@ const ThemesActionsCell = ({
 	return (
 		<>
 			{/* edit themes */}
-			<IconButton
-				callback={() => showThemeDetails()}
-				iconClassname={"more"}
+			<ButtonLikeAnchor
+				onClick={() => showThemeDetails()}
+				className={"more"}
 				editAccessRole={"ROLE_UI_THEMES_EDIT"}
 				tooltipText={"CONFIGURATION.THEMES.TABLE.TOOLTIP.DETAILS"}
 			/>

src/components/configuration/partials/wizard/WatermarkPage.tsx

@@ -7,6 +7,7 @@ import WizardNavigationButtons from "../../../shared/wizard/WizardNavigationButt
 import FileUpload from "../../../shared/wizard/FileUpload";
 import Notifications from "../../../shared/Notifications";
 import ModalContentTable from "../../../shared/modals/ModalContentTable";
+import BaseButton from "../../../shared/BaseButton";
 
 /**
  * This component renders the watermark page for new themes in the new themes wizard
@@ -97,7 +98,7 @@ const WatermarkPage = <T extends RequiredFormProps>({
 									<div className="video-container">
 										<div className="watermark-config">
 											<div className="position-selection">
-												<button
+												<BaseButton
 													className={cn(
 														"position-button position-top-left",
 														{
@@ -111,8 +112,8 @@ const WatermarkPage = <T extends RequiredFormProps>({
 													{t(
 														"CONFIGURATION.THEMES.DETAILS.WATERMARK.TOP_LEFT"
 													)}
-												</button>
-												<button
+												</BaseButton>
+												<BaseButton
 													className={cn(
 														"position-button position-top-right",
 														{
@@ -126,8 +127,8 @@ const WatermarkPage = <T extends RequiredFormProps>({
 													{t(
 														"CONFIGURATION.THEMES.DETAILS.WATERMARK.TOP_RIGHT"
 													)}
-												</button>
-												<button
+												</BaseButton>
+												<BaseButton
 													className={cn(
 														"position-button position-bottom-left",
 														{
@@ -141,8 +142,8 @@ const WatermarkPage = <T extends RequiredFormProps>({
 													{t(
 														"CONFIGURATION.THEMES.DETAILS.WATERMARK.BOTTOM_LEFT"
 													)}
-												</button>
-												<button
+												</BaseButton>
+												<BaseButton
 													className={cn(
 														"position-button position-bottom-right",
 														{
@@ -156,7 +157,7 @@ const WatermarkPage = <T extends RequiredFormProps>({
 													{t(
 														"CONFIGURATION.THEMES.DETAILS.WATERMARK.BOTTOM_RIGHT"
 													)}
-												</button>
+												</BaseButton>
 											</div>
 										</div>
 									</div>

src/components/events/partials/EventActionCell.tsx

@@ -16,8 +16,8 @@ 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";
 import { Modal, ModalHandle } from "../../shared/modals/Modal";
+import ButtonLikeAnchor from "../../shared/ButtonLikeAnchor";
 
 /**
  * This component renders the action cells of events in the table view
@@ -91,18 +91,18 @@ const EventActionCell = ({
 			)}
 
 			{/* Open event details */}
-			<IconButton
-				callback={onClickEventDetails}
-				iconClassname={"more"}
+			<ButtonLikeAnchor
+				onClick={onClickEventDetails}
+				className={"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 && (
-				<IconButton
-					callback={onClickSeriesDetails}
-					iconClassname={"more-series"}
+				<ButtonLikeAnchor
+					onClick={onClickSeriesDetails}
+					className={"more-series"}
 					editAccessRole={"ROLE_UI_SERIES_DETAILS_VIEW"}
 					tooltipText={"EVENTS.SERIES.TABLE.TOOLTIP.DETAILS"}
 				/>
@@ -139,45 +139,45 @@ 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 && (
-				<IconButton
-					callback={() => onClickComments()}
-					iconClassname={"comments"}
+				<ButtonLikeAnchor
+					onClick={() => onClickComments()}
+					className={"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 && (
-				<IconButton
-					callback={() => onClickComments()}
-					iconClassname={"comments-open"}
+				<ButtonLikeAnchor
+					onClick={() => onClickComments()}
+					className={"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 */}
 			{row.workflow_state === "PAUSED" &&
-				<IconButton
-					callback={() => onClickWorkflow()}
-					iconClassname={"fa fa-warning"}
+				<ButtonLikeAnchor
+					onClick={() => onClickWorkflow()}
+					className={"fa fa-warning"}
 					editAccessRole={"ROLE_UI_EVENTS_DETAILS_WORKFLOWS_EDIT"}
 					tooltipText={"EVENTS.EVENTS.TABLE.TOOLTIP.PAUSED_WORKFLOW"}
 				/>
 			}
 
 			{/* Open assets tab of event details directly*/}
-			<IconButton
-				callback={() => onClickAssets()}
-				iconClassname={"fa fa-folder-open"}
+			<ButtonLikeAnchor
+				onClick={() => onClickAssets()}
+				className={"fa fa-folder-open"}
 				editAccessRole={"ROLE_UI_EVENTS_DETAILS_ASSETS_VIEW"}
 				tooltipText={"EVENTS.EVENTS.TABLE.TOOLTIP.ASSETS"}
 			/>
 
 			{/* Open dialog for embedded code*/}
-			<IconButton
-				callback={() => showEmbeddingCodeModal()}
-				iconClassname={"fa fa-link"}
+			<ButtonLikeAnchor
+				onClick={() => showEmbeddingCodeModal()}
+				className={"fa fa-link"}
 				editAccessRole={"ROLE_UI_EVENTS_EMBEDDING_CODE_VIEW"}
 				tooltipText={"EVENTS.EVENTS.TABLE.TOOLTIP.EMBEDDING_CODE"}
 			/>

src/components/events/partials/EventsLocationCell.tsx

@@ -5,7 +5,7 @@ import { loadEventsIntoTable } from "../../../thunks/tableThunks";
 import { useAppDispatch, useAppSelector } from "../../../store";
 import { fetchEvents } from "../../../slices/eventSlice";
 import { Event } from "../../../slices/eventSlice";
-import { IconButton } from "../../shared/IconButton";
+import ButtonLikeAnchor from "../../shared/ButtonLikeAnchor";
 
 /**
  * This component renders the location cells of events in the table view
@@ -31,13 +31,13 @@ const EventsLocationCell = ({
 
 	return (
 		// Link template for location of event
-		<IconButton
-			callback={() => addFilter(row.location)}
-			iconClassname={"crosslink"}
+		<ButtonLikeAnchor
+			onClick={() => addFilter(row.location)}
+			className={"crosslink"}
 			tooltipText={"EVENTS.EVENTS.TABLE.TOOLTIP.LOCATION"}
 		>
 			{row.location}
-		</IconButton>
+		</ButtonLikeAnchor>
 	);
 };
 

src/components/events/partials/EventsSeriesCell.tsx

@@ -5,7 +5,7 @@ import { loadEventsIntoTable } from "../../../thunks/tableThunks";
 import { useAppDispatch, useAppSelector } from "../../../store";
 import { fetchEvents } from "../../../slices/eventSlice";
 import { Event } from "../../../slices/eventSlice";
-import { IconButton } from "../../shared/IconButton";
+import ButtonLikeAnchor from "../../shared/ButtonLikeAnchor";
 
 /**
  * This component renders the series cells of events in the table view
@@ -32,16 +32,16 @@ const EventsSeriesCell = ({
 	return (
 		!!row.series ? (
 			// Link template for series of event
-			<IconButton
-				callback={() => row.series
+			<ButtonLikeAnchor
+				onClick={() => row.series
 					? addFilter(row.series.id)
 					: console.error("Tried to sort by a series, but the series did not exist.")
 				}
-				iconClassname={"crosslink"}
+				className={"crosslink"}
 				tooltipText={"EVENTS.EVENTS.TABLE.TOOLTIP.SERIES"}
 			>
 				{row.series.title}
-			</IconButton>
+			</ButtonLikeAnchor>
 		)
 		: <></>
 	);

src/components/events/partials/EventsStatusCell.tsx

@@ -8,8 +8,8 @@ import {
 } from "../../../slices/eventDetailsSlice";
 import { EventDetailsPage } from "./modals/EventDetails";
 import { hasScheduledStatus } from "../../../utils/eventDetailsUtils";
-import { IconButton } from "../../shared/IconButton";
 import { ParseKeys } from "i18next";
+import ButtonLikeAnchor from "../../shared/ButtonLikeAnchor";
 
 /**
  * This component renders the status cells of events in the table view
@@ -42,13 +42,13 @@ const EventsStatusCell = ({
 	};
 
 	return (
-		<IconButton
-			callback={() => openStatusModal()}
-			iconClassname={"crosslink"}
+		<ButtonLikeAnchor
+			onClick={() => openStatusModal()}
+			className={"crosslink"}
 			tooltipText={"EVENTS.EVENTS.TABLE.TOOLTIP.STATUS"}
 		>
 			{t(row.displayable_status as ParseKeys)}
-		</IconButton>
+		</ButtonLikeAnchor>
 	);
 };