Skip to content

Commit 75b900a

Browse files
gregorydlogangregorydlogan
committed
Merge branch 'switch-to-react-tooltip' of Arnei/opencast-admin-interface into develop
Pull request #1569 Fixes #1446 Switch to react-tooltips
2 parents 0fd9340 + 62b5250 commit 75b900a

31 files changed

Lines changed: 142 additions & 220 deletions

‎package-lock.json‎

Lines changed: 16 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,12 +28,13 @@
2828
"react-datepicker": "^8.8.0",
2929
"react-dom": "^19.2.4",
3030
"react-hotkeys-hook": "^5.2.4",
31-
"react-i18next": "^16.5.4",
31+
"react-i18next": "^16.5.0",
3232
"react-icons": "^5.5.0",
3333
"react-redux": "^9.2.0",
3434
"react-router": "^7.13.0",
3535
"react-select": "^5.10.2",
3636
"react-textarea-autosize": "^8.5.9",
37+
"react-tooltip": "^5.30.0",
3738
"react-window": "^2.2.7",
3839
"redux": "^5.0.1",
3940
"redux-persist": "^6.0.0",

‎src/App.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import { useAppDispatch } from "./store";
1717
import { fetchOcVersion, fetchUserInfo } from "./slices/userInfoSlice";
1818
import { subscribeToAuthEvents } from "./utils/broadcastSync";
1919
import { useTableFilterStateValidation } from "./hooks/useTableFilterStateValidation";
20+
import { Tooltip } from "react-tooltip";
2021

2122
function App() {
2223
const dispatch = useAppDispatch();
@@ -74,6 +75,13 @@ function App() {
7475
element={<Navigate to={"/events/events"} replace />}
7576
/>
7677
</Routes>
78+
<Tooltip
79+
id="my-tooltip"
80+
clickable
81+
className="my-tooltip"
82+
delayShow={100}
83+
delayHide={150}
84+
/>
7785
</HashRouter>
7886
);
7987
}

‎src/components/Footer.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import {
66
import { useAppSelector } from "../store";
77
import { Link } from "react-router";
88
import { useTranslation } from "react-i18next";
9-
import { Tooltip } from "./shared/Tooltip";
109

1110
/**
1211
* Component that renders the footer
@@ -35,14 +34,14 @@ const Footer: React.FC = () => {
3534
{user.ocVersion && (
3635
<li>
3736
{"Opencast "}
38-
<Tooltip title={t("BUILD.VERSION")}><span>{version}</span></Tooltip>
37+
<span data-tooltip-id="my-tooltip" data-tooltip-content={t("BUILD.VERSION")}>{version}</span>
3938
{user.isAdmin && (
4039
<span>
4140
{user.ocVersion.buildNumber && (
42-
<>{" – "} <Tooltip title={t("BUILD.COMMIT")}><span>{user.ocVersion.buildNumber}</span></Tooltip></>
41+
<>{" – "} <span data-tooltip-id="my-tooltip" data-tooltip-content={t("BUILD.COMMIT")}>{user.ocVersion.buildNumber}</span></>
4342
)}
4443
{lastModified && (
45-
<>{" – "} <Tooltip title={t("BUILD.DATE_DESC")}><span>{t("BUILD.BUILT_ON")} {lastModified}</span></Tooltip></>
44+
<>{" – "} <span data-tooltip-id="my-tooltip" data-tooltip-content={t("BUILD.DATE_DESC")}>{t("BUILD.BUILT_ON")} {lastModified}</span></>
4645
)}
4746
</span>
4847
)}

‎src/components/Header.tsx‎

Lines changed: 33 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@ import { useHotkeys } from "react-hotkeys-hook";
2020
import { useAppDispatch, useAppSelector } from "../store";
2121
import { HealthStatus, fetchHealthStatus } from "../slices/healthSlice";
2222
import { UserInfoState } from "../slices/userInfoSlice";
23-
import { Tooltip } from "./shared/Tooltip";
2423
import { HiOutlineTranslate } from "react-icons/hi";
2524
import ButtonLikeAnchor from "./shared/ButtonLikeAnchor";
2625
import { ModalHandle } from "./shared/modals/Modal";
@@ -160,11 +159,9 @@ const Header = () => {
160159
<nav className="header-nav nav-dd-container" id="nav-dd-container">
161160
{/* Select language */}
162161
<div className="nav-dd lang-dd" id="lang-dd" ref={containerLang}>
163-
<Tooltip active={!displayMenuLang} title={t("LANGUAGE")}>
164-
<BaseButton className="lang nav-dd-element" onClick={() => setMenuLang(!displayMenuLang)}>
165-
<HiOutlineTranslate className="header-icon"/>
166-
</BaseButton>
167-
</Tooltip>
162+
<BaseButton className="lang nav-dd-element" onClick={() => setMenuLang(!displayMenuLang)} tooltipText={"LANGUAGE"} data-tooltip-hidden={displayMenuLang}>
163+
<HiOutlineTranslate className="header-icon"/>
164+
</BaseButton>
168165
{displayMenuLang && <MenuLang handleChangeLanguage={handleChangeLanguage}/>}
169166
</div>
170167

@@ -175,28 +172,26 @@ const Header = () => {
175172
{!!orgProperties &&
176173
!!orgProperties["org.opencastproject.admin.mediamodule.url"] && (
177174
<div className="nav-dd">
178-
<Tooltip title={t("MEDIAMODULE")}>
179-
<a
180-
href={
181-
orgProperties["org.opencastproject.admin.mediamodule.url"]
182-
}
183-
target="_blank" rel="noreferrer"
184-
className="nav-dd-element"
185-
>
186-
<LuCirclePlay className="header-icon"/>
187-
</a>
188-
</Tooltip>
175+
<a
176+
href={
177+
orgProperties["org.opencastproject.admin.mediamodule.url"]
178+
}
179+
target="_blank" rel="noreferrer"
180+
className="nav-dd-element"
181+
data-tooltip-id="my-tooltip"
182+
data-tooltip-content={t("MEDIAMODULE")}
183+
>
184+
<LuCirclePlay className="header-icon"/>
185+
</a>
189186
</div>
190187
)}
191188

192189
{/* Opencast Studio */}
193190
{hasAccess("ROLE_STUDIO", user) && (
194191
<div className="nav-dd">
195-
<Tooltip title={t("STUDIO")}>
196-
<a href={studioURL} target="_blank" rel="noreferrer" className="nav-dd-element">
197-
<LuVideo className="header-icon"/>
198-
</a>
199-
</Tooltip>
192+
<a href={studioURL} target="_blank" rel="noreferrer" className="nav-dd-element" data-tooltip-id="my-tooltip" data-tooltip-content={t("STUDIO")}>
193+
<LuVideo className="header-icon"/>
194+
</a>
200195
</div>
201196
)}
202197

@@ -207,16 +202,14 @@ const Header = () => {
207202
id="info-dd"
208203
ref={containerNotify}
209204
>
210-
<Tooltip active={!displayMenuNotify} title={t("SYSTEM_NOTIFICATIONS")}>
211-
<BaseButton onClick={() => setMenuNotify(!displayMenuNotify)} className="nav-dd-element">
212-
<LuBell className="header-icon"/>
213-
{errorCounter !== 0 && (
214-
<span id="error-count" className="badge">
215-
{errorCounter}
216-
</span>
217-
)}
218-
</BaseButton>
219-
</Tooltip>
205+
<BaseButton onClick={() => setMenuNotify(!displayMenuNotify)} className="nav-dd-element" tooltipText={"SYSTEM_NOTIFICATIONS"} data-tooltip-hidden={displayMenuNotify}>
206+
<LuBell className="header-icon"/>
207+
{errorCounter !== 0 && (
208+
<span id="error-count" className="badge">
209+
{errorCounter}
210+
</span>
211+
)}
212+
</BaseButton>
220213
{/* Click on the bell icon, a dropdown menu with all services in serviceList and their status opens */}
221214
{displayMenuNotify && (
222215
<MenuNotify
@@ -242,14 +235,14 @@ const Header = () => {
242235
id="help-dd"
243236
ref={containerHelp}
244237
>
245-
<Tooltip active={!displayMenuHelp} title={t("HELP.HELP")}>
246-
<BaseButton
247-
onClick={() => setMenuHelp(!displayMenuHelp)}
248-
className="nav-dd-element"
249-
>
250-
<LuMessageCircleQuestion className="header-icon"/>
251-
</BaseButton>
252-
</Tooltip>
238+
<BaseButton
239+
onClick={() => setMenuHelp(!displayMenuHelp)}
240+
className="nav-dd-element"
241+
tooltipText={"HELP.HELP"}
242+
data-tooltip-hidden={displayMenuHelp}
243+
>
244+
<LuMessageCircleQuestion className="header-icon"/>
245+
</BaseButton>
253246
{/* Click on the help icon, a dropdown menu with documentation, REST-docs and shortcuts (if available) opens */}
254247
{displayMenuHelp && (
255248
<MenuHelp

‎src/components/configuration/partials/ThemesActionsCell.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ const ThemesActionsCell = ({
4949
onClick={() => showThemeDetails()}
5050
className={"action-cell-button"}
5151
editAccessRole={"ROLE_UI_THEMES_EDIT"}
52-
// tooltipText={"CONFIGURATION.THEMES.TABLE.TOOLTIP.DETAILS"} // Disabled due to performance concerns
52+
tooltipText={"CONFIGURATION.THEMES.TABLE.TOOLTIP.DETAILS"}
5353
>
5454
<LuFileText />
5555
</ButtonLikeAnchor>
@@ -67,7 +67,7 @@ const ThemesActionsCell = ({
6767
{/* delete themes */}
6868
<ActionCellDelete
6969
editAccessRole={"ROLE_UI_THEMES_DELETE"}
70-
// tooltipText={"CONFIGURATION.THEMES.TABLE.TOOLTIP.DELETE"} // Disabled due to performance concerns
70+
tooltipText={"CONFIGURATION.THEMES.TABLE.TOOLTIP.DELETE"}
7171
resourceId={row.id}
7272
resourceName={row.name}
7373
resourceType={"THEME"}

‎src/components/events/partials/EventActionCell.tsx‎

Lines changed: 18 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ const EventActionCell = ({
8383
onClick={onClickEventDetails}
8484
className={"action-cell-button"}
8585
editAccessRole={"ROLE_UI_EVENTS_DETAILS_VIEW"}
86-
// tooltipText={"EVENTS.EVENTS.TABLE.TOOLTIP.DETAILS"} // Disabled due to performance concerns
86+
tooltipText={"EVENTS.EVENTS.TABLE.TOOLTIP.DETAILS"}
8787
>
8888
<LuFileText />
8989
</ButtonLikeAnchor>
@@ -94,7 +94,7 @@ const EventActionCell = ({
9494
onClick={onClickSeriesDetails}
9595
className={"action-cell-button more-series"}
9696
editAccessRole={"ROLE_UI_SERIES_DETAILS_VIEW"}
97-
// tooltipText={"EVENTS.SERIES.TABLE.TOOLTIP.DETAILS"} // Disabled due to performance concerns
97+
tooltipText={"EVENTS.SERIES.TABLE.TOOLTIP.DETAILS"}
9898
>
9999
<LuFileSymlink />
100100
</ButtonLikeAnchor>
@@ -103,7 +103,7 @@ const EventActionCell = ({
103103
{/* Delete an event */}
104104
<ActionCellDelete
105105
editAccessRole={"ROLE_UI_EVENTS_DELETE"}
106-
// tooltipText={"EVENTS.EVENTS.TABLE.TOOLTIP.DELETE"} // Disabled due to performance concerns
106+
tooltipText={"EVENTS.EVENTS.TABLE.TOOLTIP.DELETE"}
107107
resourceId={row.id}
108108
resourceName={row.title}
109109
resourceType={"EVENT"}
@@ -112,29 +112,23 @@ const EventActionCell = ({
112112

113113
{/* If the event has an preview then the editor can be opened and status if it needs to be cut is shown */}
114114
{!!row.has_preview && hasAccess("ROLE_UI_EVENTS_EDITOR_VIEW", user) && (
115-
// <Tooltip // Disabled due to performance concerns
116-
// title={
117-
// row.needs_cutting
118-
// ? t("EVENTS.EVENTS.TABLE.TOOLTIP.EDITOR_NEEDS_CUTTING")
119-
// : t("EVENTS.EVENTS.TABLE.TOOLTIP.EDITOR")
120-
// }
121-
// >
122-
<a
123-
href={`/editor-ui/index.html?id=${row.id}`}
124-
className="action-cell-button cut"
125-
target="_blank" rel="noreferrer"
126-
>
127-
<LuScissors />
128-
{row.needs_cutting && <span id="badge" className="badge" />}
129-
</a>
130-
// </Tooltip>
115+
<a
116+
href={`/editor-ui/index.html?id=${row.id}`}
117+
className="action-cell-button cut"
118+
target="_blank" rel="noreferrer"
119+
data-tooltip-id="my-tooltip"
120+
data-tooltip-content={row.needs_cutting ? t("EVENTS.EVENTS.TABLE.TOOLTIP.EDITOR_NEEDS_CUTTING") : t("EVENTS.EVENTS.TABLE.TOOLTIP.EDITOR")}
121+
>
122+
<LuScissors />
123+
{row.needs_cutting && <span id="badge" className="badge" />}
124+
</a>
131125
)}
132126

133127
{/* If the event has comments and no open comments then the comment tab of event details can be opened directly */}
134128
{row.has_comments && !row.has_open_comments && (
135129
<ButtonLikeAnchor
136130
onClick={() => onClickComments()}
137-
// tooltipText={"EVENTS.EVENTS.TABLE.TOOLTIP.COMMENTS"} // Disabled due to performance concerns
131+
tooltipText={"EVENTS.EVENTS.TABLE.TOOLTIP.COMMENTS"}
138132
className={"action-cell-button comments"}
139133
>
140134
<LuMessageCircle className="blue"/>
@@ -145,7 +139,7 @@ const EventActionCell = ({
145139
{row.has_comments && row.has_open_comments && (
146140
<ButtonLikeAnchor
147141
onClick={() => onClickComments()}
148-
// tooltipText={"EVENTS.EVENTS.TABLE.TOOLTIP.COMMENTS"} // Disabled due to performance concerns
142+
tooltipText={"EVENTS.EVENTS.TABLE.TOOLTIP.COMMENTS"}
149143
className={"action-cell-button comments-open"}
150144
>
151145
<LuMessageCircle className="blue"/>
@@ -158,7 +152,7 @@ const EventActionCell = ({
158152
<ButtonLikeAnchor
159153
onClick={() => onClickWorkflow()}
160154
editAccessRole={"ROLE_UI_EVENTS_DETAILS_WORKFLOWS_EDIT"}
161-
// tooltipText={"EVENTS.EVENTS.TABLE.TOOLTIP.PAUSED_WORKFLOW"} // Disabled due to performance concerns
155+
tooltipText={"EVENTS.EVENTS.TABLE.TOOLTIP.PAUSED_WORKFLOW"}
162156
className={"action-cell-button"}
163157
>
164158
<LuTriangleAlert className="darkgrey"/>
@@ -169,7 +163,7 @@ const EventActionCell = ({
169163
<ButtonLikeAnchor
170164
onClick={() => onClickAssets()}
171165
editAccessRole={"ROLE_UI_EVENTS_DETAILS_ASSETS_VIEW"}
172-
// tooltipText={"EVENTS.EVENTS.TABLE.TOOLTIP.ASSETS"} // Disabled due to performance concerns
166+
tooltipText={"EVENTS.EVENTS.TABLE.TOOLTIP.ASSETS"}
173167
className={"action-cell-button"}
174168
>
175169
<LuFolderOpen className="darkgrey"/>
@@ -179,7 +173,7 @@ const EventActionCell = ({
179173
<ButtonLikeAnchor
180174
onClick={() => showEmbeddingCodeModal()}
181175
editAccessRole={"ROLE_UI_EVENTS_EMBEDDING_CODE_VIEW"}
182-
// tooltipText={"EVENTS.EVENTS.TABLE.TOOLTIP.EMBEDDING_CODE"} // Disabled due to performance concerns
176+
tooltipText={"EVENTS.EVENTS.TABLE.TOOLTIP.EMBEDDING_CODE"}
183177
className={"action-cell-button"}
184178
>
185179
<LuLink className="darkgrey"/>

‎src/components/events/partials/EventsDateCell.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ const EventsDateCell = ({
1818
filterName="startDate"
1919
fetchResource={fetchEvents}
2020
loadResourceIntoTable={loadEventsIntoTable}
21-
// tooltipText="EVENTS.EVENTS.TABLE.TOOLTIP.START" // Disabled due to performance concerns
21+
tooltipText="EVENTS.EVENTS.TABLE.TOOLTIP.START"
2222
/>
2323
);
2424
};

‎src/components/events/partials/EventsLocationCell.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ const EventsLocationCell = ({
2020
filterItems={[{
2121
filterValue: row.location,
2222
children: row.location,
23-
// cellTooltipText: "EVENTS.EVENTS.TABLE.TOOLTIP.LOCATION", // Disabled due to performance concerns
23+
cellTooltipText: "EVENTS.EVENTS.TABLE.TOOLTIP.LOCATION",
2424
}]}
2525
fetchResource={fetchEvents}
2626
loadResourceIntoTable={loadEventsIntoTable}

‎src/components/events/partials/EventsPresentersCell.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ const EventsPresentersCell = ({
1818
filterItems={row.presenters.map(presenter => ({
1919
filterValue: presenter,
2020
children: presenter,
21-
// cellTooltipText: "EVENTS.EVENTS.TABLE.TOOLTIP.PRESENTER", // Disabled due to performance concerns
21+
cellTooltipText: "EVENTS.EVENTS.TABLE.TOOLTIP.PRESENTER",
2222
}))}
2323
fetchResource={fetchEvents}
2424
loadResourceIntoTable={loadEventsIntoTable}

0 commit comments

Comments
 (0)