Skip to content

Commit 61d85fa

Browse files
Arneiferishili
Arnei
and
ferishili
authored
Reduce duplicate code - button like anchor (#1063)
* Reduce duplicate code - button like anchor We have many buttons using the "button-like-anchor" class. This patch introduces a button component for these buttons, with built-in tooltip and access check to better support common code combinations for those buttons. In and of itself not a particularly impressive component, but the underlying goal here is to push the app more towards using common basic components. * Fix missing import Due to updating React we now need an explicit import. * Fix indentation Co-authored-by: FarbodZamani <53179227+ferishili@users.noreply.github.com> * Fix duplicate classname Co-authored-by: FarbodZamani <53179227+ferishili@users.noreply.github.com> * Fix duplicate classname Co-authored-by: FarbodZamani <53179227+ferishili@users.noreply.github.com> * Fix duplicate classname Co-authored-by: FarbodZamani <53179227+ferishili@users.noreply.github.com> * Fix duplicate classname Co-authored-by: FarbodZamani <53179227+ferishili@users.noreply.github.com> * Fix duplicate classname Co-authored-by: FarbodZamani <53179227+ferishili@users.noreply.github.com> * Fix duplicate classname Co-authored-by: FarbodZamani <53179227+ferishili@users.noreply.github.com> * Fix indentation Co-authored-by: FarbodZamani <53179227+ferishili@users.noreply.github.com> * More buttonlikeanchor Two more instances were we can replace raw button tags with buttonlikenachor. --------- Co-authored-by: FarbodZamani <53179227+ferishili@users.noreply.github.com>
1 parent a2ff44b commit 61d85fa

40 files changed

Lines changed: 396 additions & 330 deletions

‎src/components/Header.tsx‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import { UserInfoState } from "../slices/userInfoSlice";
2222
import { Tooltip } from "./shared/Tooltip";
2323
import { HiTranslate } from "react-icons/hi";
2424
import { IconContext } from "react-icons";
25+
import ButtonLikeAnchor from "./shared/ButtonLikeAnchor";
2526
import { ModalHandle } from "./shared/modals/Modal";
2627

2728
// References for detecting a click outside of the container of the dropdown menus
@@ -278,12 +279,12 @@ const MenuLang = () => {
278279
{/* one list item for each available language */}
279280
{languages.map((language, key) => (
280281
<li key={key}>
281-
<button
282-
className={"button-like-anchor" + (i18n.language === language.code ? " selected" : "")}
282+
<ButtonLikeAnchor
283+
extraClassName={(i18n.language === language.code ? "selected" : "")}
283284
onClick={() => changeLanguage(language.code)}
284285
>
285286
{language.long}
286-
</button>
287+
</ButtonLikeAnchor>
287288
</li>
288289
))}
289290
</ul>
@@ -393,16 +394,16 @@ const MenuHelp = ({
393394
</li>
394395
)}
395396
<li>
396-
<button className="button-like-anchor" onClick={() => showHotKeys()}>
397+
<ButtonLikeAnchor onClick={() => showHotKeys()}>
397398
<span>{t("HELP.HOTKEY_CHEAT_SHEET")}</span>
398-
</button>
399+
</ButtonLikeAnchor>
399400
</li>
400401
{/* Adoter registration Modal */}
401402
{user.isAdmin && (
402403
<li>
403-
<button className="button-like-anchor" onClick={() => showAdoptersRegistrationModal()}>
404+
<ButtonLikeAnchor onClick={() => showAdoptersRegistrationModal()}>
404405
<span>{t("HELP.ADOPTER_REGISTRATION")}</span>
405-
</button>
406+
</ButtonLikeAnchor>
406407
</li>
407408
)}
408409
</ul>
@@ -415,9 +416,9 @@ const MenuUser = () => {
415416
return (
416417
<ul className="dropdown-ul">
417418
<li>
418-
<button className="button-like-anchor" onClick={() => logout()}>
419+
<ButtonLikeAnchor onClick={() => logout()}>
419420
<span className="logout-icon">{t("LOGOUT")}</span>
420-
</button>
421+
</ButtonLikeAnchor>
421422
</li>
422423
</ul>
423424
);

‎src/components/events/Events.tsx‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ import {
3636
} from "../../slices/eventSlice";
3737
import EventDetailsModal from "./partials/modals/EventDetailsModal";
3838
import { showModal } from "../../selectors/eventDetailsSelectors";
39+
import ButtonLikeAnchor from "../shared/ButtonLikeAnchor";
3940
import { eventsLinks } from "./partials/EventsNavigation";
4041
import { Modal, ModalHandle } from "../shared/modals/Modal";
4142
import { resetTableProperties } from "../../slices/tableSlice";
@@ -225,31 +226,31 @@ const Events = () => {
225226
<ul className="dropdown-ul">
226227
{hasAccess("ROLE_UI_EVENTS_DELETE", user) && (
227228
<li>
228-
<button className="button-like-anchor" onClick={() => deleteModalRef.current?.open()}>
229+
<ButtonLikeAnchor onClick={() => deleteModalRef.current?.open()}>
229230
{t("BULK_ACTIONS.DELETE.EVENTS.CAPTION")}
230-
</button>
231+
</ButtonLikeAnchor>
231232
</li>
232233
)}
233234
{hasAccess("ROLE_UI_TASKS_CREATE", user) && (
234235
<li>
235-
<button className="button-like-anchor" onClick={() => startTaskModalRef.current?.open()}>
236+
<ButtonLikeAnchor onClick={() => startTaskModalRef.current?.open()}>
236237
{t("BULK_ACTIONS.SCHEDULE_TASK.CAPTION")}
237-
</button>
238+
</ButtonLikeAnchor>
238239
</li>
239240
)}
240241
{hasAccess("ROLE_UI_EVENTS_DETAILS_SCHEDULING_EDIT", user) &&
241242
hasAccess("ROLE_UI_EVENTS_DETAILS_METADATA_EDIT", user) && (
242243
<li>
243-
<button className="button-like-anchor" onClick={() => editScheduledEventsModalRef.current?.open()}>
244+
<ButtonLikeAnchor onClick={() => editScheduledEventsModalRef.current?.open()}>
244245
{t("BULK_ACTIONS.EDIT_EVENTS.CAPTION")}
245-
</button>
246+
</ButtonLikeAnchor>
246247
</li>
247248
)}
248249
{hasAccess("ROLE_UI_EVENTS_DETAILS_METADATA_EDIT", user) && (
249250
<li>
250-
<button className="button-like-anchor" onClick={() => editMetadataEventsModalRef.current?.open()}>
251+
<ButtonLikeAnchor onClick={() => editMetadataEventsModalRef.current?.open()}>
251252
{t("BULK_ACTIONS.EDIT_EVENTS_METADATA.CAPTION")}
252-
</button>
253+
</ButtonLikeAnchor>
253254
</li>
254255
)}
255256
</ul>

‎src/components/events/Series.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ import {
2626
showActionsSeries,
2727
} from "../../slices/seriesSlice";
2828
import { fetchSeriesDetailsTobiraNew } from "../../slices/seriesSlice";
29+
import ButtonLikeAnchor from "../shared/ButtonLikeAnchor";
2930
import { eventsLinks } from "./partials/EventsNavigation";
3031
import { Modal, ModalHandle } from "../shared/modals/Modal";
3132
import { availableHotkeys } from "../../configs/hotkeysConfig";
@@ -165,9 +166,9 @@ const Series = () => {
165166
<ul className="dropdown-ul">
166167
{hasAccess("ROLE_UI_SERIES_DELETE", user) && (
167168
<li>
168-
<button className="button-like-anchor" onClick={() => deleteModalRef.current?.open()}>
169+
<ButtonLikeAnchor onClick={() => deleteModalRef.current?.open()}>
169170
{t("BULK_ACTIONS.DELETE.SERIES.CAPTION")}
170-
</button>
171+
</ButtonLikeAnchor>
171172
</li>
172173
)}
173174
</ul>

‎src/components/events/partials/ModalTabsAndPages/DetailsTobiraTab.tsx‎

Lines changed: 15 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { fetchSeriesDetailsTobira, removeSeriesTobiraPath, setTobiraTabHierarchy
1313
import { fetchSeriesDetailsTobiraNew, TobiraPage } from "../../../../slices/seriesSlice";
1414
import ConfirmModal from "../../../shared/ConfirmModal";
1515
import { Tooltip } from "../../../shared/Tooltip";
16+
import ButtonLikeAnchor from "../../../shared/ButtonLikeAnchor";
1617
import { ModalHandle } from "../../../shared/modals/Modal";
1718
import { fetchEventDetailsTobira } from "../../../../slices/eventDetailsSlice";
1819

@@ -213,9 +214,9 @@ const TobiraTable = ({ tobiraData, i18nKey, openSubTab, handleDelete }: TobiraTa
213214
<td className="tobira-not-mounted">
214215
{t(`EVENTS.${i18nKey}.DETAILS.TOBIRA.NOT_MOUNTED`)}
215216
{i18nKey === "SERIES" && <Tooltip title={t("EVENTS.SERIES.DETAILS.TOBIRA.MOUNT_SERIES")}>
216-
<button
217+
<ButtonLikeAnchor
217218
style={{ margin: 5 }}
218-
className="button-like-anchor edit fa fa-pencil-square pull-right"
219+
extraClassName="edit fa fa-pencil-square pull-right"
219220
onClick={() => openSubTab("edit-path")}
220221
/>
221222
</Tooltip>}
@@ -243,20 +244,18 @@ const TobiraTable = ({ tobiraData, i18nKey, openSubTab, handleDelete }: TobiraTa
243244
</span>
244245
</a>
245246
{i18nKey === "SERIES" && hostPage.blocks?.length === 1 && <>
246-
<Tooltip title={t("EVENTS.SERIES.DETAILS.TOBIRA.REMOVE_PATH")}>
247-
<button
248-
style={{ margin: 5 }}
249-
onClick={() => deleteConfirmationModalRef.current?.open()}
250-
className="button-like-anchor remove pull-right"
251-
/>
252-
</Tooltip>
253-
<Tooltip title={t("EVENTS.SERIES.DETAILS.TOBIRA.EDIT_PATH")}>
254-
<button
255-
style={{ margin: 5 }}
256-
className="button-like-anchor edit fa fa-pencil-square pull-right"
257-
onClick={() => openSubTab("edit-path", hostPage)}
258-
/>
259-
</Tooltip>
247+
<ButtonLikeAnchor
248+
style={{ margin: 5 }}
249+
onClick={() => deleteConfirmationModalRef.current?.open()}
250+
extraClassName="remove pull-right"
251+
tooltipText="EVENTS.SERIES.DETAILS.TOBIRA.REMOVE_PATH"
252+
/>
253+
<ButtonLikeAnchor
254+
style={{ margin: 5 }}
255+
extraClassName="edit fa fa-pencil-square pull-right"
256+
onClick={() => openSubTab("edit-path", hostPage)}
257+
tooltipText="EVENTS.SERIES.DETAILS.TOBIRA.EDIT_PATH"
258+
/>
260259
<ConfirmModal
261260
close={() => deleteConfirmationModalRef.current?.close?.()}
262261
resourceName={hostPage.path}

‎src/components/events/partials/ModalTabsAndPages/EventDetailsAssetAttachments.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { useAppDispatch, useAppSelector } from "../../../../store";
88
import { fetchAssetAttachmentDetails, setModalAssetsTabHierarchy } from "../../../../slices/eventDetailsSlice";
99
import { AssetTabHierarchy } from "../modals/EventDetails";
1010
import { useTranslation } from "react-i18next";
11+
import ButtonLikeAnchor from "../../../shared/ButtonLikeAnchor";
1112

1213
/**
1314
* This component manages the attachments sub-tab for assets tab of event details modal
@@ -94,8 +95,8 @@ const EventDetailsAssetAttachments = ({
9495
: null}
9596
</td>
9697
<td>
97-
<button
98-
className="button-like-anchor details-link"
98+
<ButtonLikeAnchor
99+
extraClassName="details-link"
99100
onClick={() =>
100101
openSubTab("attachment-details", item.id)
101102
}
@@ -105,7 +106,7 @@ const EventDetailsAssetAttachments = ({
105106
"EVENTS.EVENTS.DETAILS.ASSETS.DETAILS"
106107
) /* Details */
107108
}
108-
</button>
109+
</ButtonLikeAnchor>
109110
</td>
110111
</tr>
111112
))}

‎src/components/events/partials/ModalTabsAndPages/EventDetailsAssetCatalogs.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { useAppDispatch, useAppSelector } from "../../../../store";
88
import { fetchAssetCatalogDetails, setModalAssetsTabHierarchy } from "../../../../slices/eventDetailsSlice";
99
import { AssetTabHierarchy } from "../modals/EventDetails";
1010
import { useTranslation } from "react-i18next";
11+
import ButtonLikeAnchor from "../../../shared/ButtonLikeAnchor";
1112

1213
/**
1314
* This component manages the catalogs sub-tab for assets tab of event details modal
@@ -90,8 +91,8 @@ const EventDetailsAssetCatalogs = ({
9091
: null}
9192
</td>
9293
<td>
93-
<button
94-
className="button-like-anchor details-link"
94+
<ButtonLikeAnchor
95+
extraClassName="details-link"
9596
onClick={() =>
9697
openSubTab("catalog-details", item.id)
9798
}
@@ -101,7 +102,7 @@ const EventDetailsAssetCatalogs = ({
101102
"EVENTS.EVENTS.DETAILS.ASSETS.DETAILS"
102103
) /* Details */
103104
}
104-
</button>
105+
</ButtonLikeAnchor>
105106
</td>
106107
</tr>
107108
))}

‎src/components/events/partials/ModalTabsAndPages/EventDetailsAssetMedia.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { useAppDispatch, useAppSelector } from "../../../../store";
88
import { fetchAssetMediaDetails, setModalAssetsTabHierarchy } from "../../../../slices/eventDetailsSlice";
99
import { AssetTabHierarchy } from "../modals/EventDetails";
1010
import { useTranslation } from "react-i18next";
11+
import ButtonLikeAnchor from "../../../shared/ButtonLikeAnchor";
1112

1213
/**
1314
* This component manages the media sub-tab for assets tab of event details modal
@@ -80,16 +81,16 @@ const EventDetailsAssetMedia = ({
8081
: null}
8182
</td>
8283
<td>
83-
<button
84-
className="button-like-anchor details-link"
84+
<ButtonLikeAnchor
85+
extraClassName="details-link"
8586
onClick={() => openSubTab("media-details", item.id)}
8687
>
8788
{
8889
t(
8990
"EVENTS.EVENTS.DETAILS.ASSETS.DETAILS"
9091
) /* Details */
9192
}
92-
</button>
93+
</ButtonLikeAnchor>
9394
</td>
9495
</tr>
9596
))}

‎src/components/events/partials/ModalTabsAndPages/EventDetailsAssetPublications.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { useAppDispatch, useAppSelector } from "../../../../store";
88
import { fetchAssetPublicationDetails, setModalAssetsTabHierarchy } from "../../../../slices/eventDetailsSlice";
99
import { AssetTabHierarchy } from "../modals/EventDetails";
1010
import { useTranslation } from "react-i18next";
11+
import ButtonLikeAnchor from "../../../shared/ButtonLikeAnchor";
1112

1213
/**
1314
* This component manages the publications sub-tab for assets tab of event details modal
@@ -86,8 +87,8 @@ const EventDetailsAssetPublications = ({
8687
: null}
8788
</td>
8889
<td>
89-
<button
90-
className="button-like-anchor details-link"
90+
<ButtonLikeAnchor
91+
extraClassName="details-link"
9192
onClick={() =>
9293
openSubTab("publication-details", item.id)
9394
}
@@ -97,7 +98,7 @@ const EventDetailsAssetPublications = ({
9798
"EVENTS.EVENTS.DETAILS.ASSETS.DETAILS"
9899
) /* Details */
99100
}
100-
</button>
101+
</ButtonLikeAnchor>
101102
</td>
102103
</tr>
103104
))}

‎src/components/events/partials/ModalTabsAndPages/EventDetailsAssetsAddAsset.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { useAppDispatch, useAppSelector } from "../../../../store";
99
import { setModalAssetsTabHierarchy, updateAssets } from "../../../../slices/eventDetailsSlice";
1010
import { AssetTabHierarchy } from "../modals/EventDetails";
1111
import { useTranslation } from "react-i18next";
12+
import ButtonLikeAnchor from "../../../shared/ButtonLikeAnchor";
1213

1314
/**
1415
* This component manages the add asset sub-tab for assets tab of event details modal
@@ -117,8 +118,8 @@ const EventDetailsAssetsAddAsset = ({
117118
</td>
118119
{/*Button to remove asset*/}
119120
<td className="fit">
120-
<button
121-
className="button-like-anchor remove"
121+
<ButtonLikeAnchor
122+
className="remove"
122123
onClick={() => {
123124
formik.setFieldValue(asset.id, null);
124125
const element = document.getElementById(asset.id) as HTMLInputElement;

0 commit comments

Comments
 (0)