From 25d500052fccaf749494eae96d0828f048b17f55 Mon Sep 17 00:00:00 2001 From: Julian Kniephoff <kniephoff@elan-ev.de> Date: Thu, 23 May 2024 10:06:25 +0200 Subject: [PATCH 1/6] Fix a build warning Specifically: > One of your dependencies, babel-preset-react-app, is importing the > "@babel/plugin-proposal-private-property-in-object" package without > declaring it in its dependencies. This is currently working because > "@babel/plugin-proposal-private-property-in-object" is already in your > node_modules folder for unrelated reasons, but it may break at any time. > babel-preset-react-app is part of the create-react-app project, which > is not maintianed anymore. It is thus unlikely that this bug will > ever be fixed. Add "@babel/plugin-proposal-private-property-in-object" to > your devDependencies to work around this error. This will make this message > go away. --- package-lock.json | 26 +++++++++++++++++++++++--- package.json | 1 + 2 files changed, 24 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 86bc7f2432..7d4be868a2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -54,6 +54,7 @@ "devDependencies": { "@babel/core": "^7.23.7", "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6", + "@babel/plugin-proposal-private-property-in-object": "^7.21.11", "@babel/plugin-syntax-optional-chaining": "^7.8.3", "@babel/preset-env": "^7.23.8", "@babel/preset-react": "^7.24.1", @@ -645,9 +646,17 @@ } }, "node_modules/@babel/plugin-proposal-private-property-in-object": { - "version": "7.21.0-placeholder-for-preset-env.2", - "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz", - "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==", + "version": "7.21.11", + "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.11.tgz", + "integrity": "sha512-0QZ8qP/3RLDVBwBFoWAwCtgcDZJVwA5LUJRZU8x2YFfKNuFq161wK3cuGrALu5yiPu+vzwTAg/sMWVNeWeNyaw==", + "deprecated": "This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-property-in-object instead.", + "dev": true, + "dependencies": { + "@babel/helper-annotate-as-pure": "^7.18.6", + "@babel/helper-create-class-features-plugin": "^7.21.0", + "@babel/helper-plugin-utils": "^7.20.2", + "@babel/plugin-syntax-private-property-in-object": "^7.14.5" + }, "engines": { "node": ">=6.9.0" }, @@ -1897,6 +1906,17 @@ "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0" } }, + "node_modules/@babel/preset-env/node_modules/@babel/plugin-proposal-private-property-in-object": { + "version": "7.21.0-placeholder-for-preset-env.2", + "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz", + "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==", + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, "node_modules/@babel/preset-env/node_modules/babel-plugin-polyfill-corejs2": { "version": "0.4.7", "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.7.tgz", diff --git a/package.json b/package.json index 558c004c2d..172d12fdb1 100644 --- a/package.json +++ b/package.json @@ -72,6 +72,7 @@ "@babel/core": "^7.23.7", "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6", "@babel/plugin-syntax-optional-chaining": "^7.8.3", + "@babel/plugin-proposal-private-property-in-object": "^7.21.11", "@babel/preset-env": "^7.23.8", "@babel/preset-react": "^7.24.1", "@types/lodash": "^4.14.202", From 701480c6c64ea55fe2ab1adb8e957a982dbad6be Mon Sep 17 00:00:00 2001 From: Julian Kniephoff <kniephoff@elan-ev.de> Date: Thu, 23 May 2024 10:22:43 +0200 Subject: [PATCH 2/6] Fix `autoprefixer` warnings --- src/styles/components/_statistics-graph.scss | 2 +- src/styles/components/_steps.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/styles/components/_statistics-graph.scss b/src/styles/components/_statistics-graph.scss index 4e29018b1d..ae23052581 100644 --- a/src/styles/components/_statistics-graph.scss +++ b/src/styles/components/_statistics-graph.scss @@ -63,7 +63,7 @@ text-align: center; display: flex; justify-content: center; - align-items:start; + align-items:flex-start; .navigation { diff --git a/src/styles/components/_steps.scss b/src/styles/components/_steps.scss index f4d34402b3..dddea0cd2a 100644 --- a/src/styles/components/_steps.scss +++ b/src/styles/components/_steps.scss @@ -46,7 +46,7 @@ height: 1px; background: $main-border-color; background: linear-gradient( - left, + to left, rgba($modal-nav-border-color, 0) 5%, rgba($modal-nav-border-color, 1) 25%, rgba($modal-nav-border-color, 1) 75%, From 954a7eb28dc91ebee8eefbf7d1f2f98da93db50e Mon Sep 17 00:00:00 2001 From: Julian Kniephoff <kniephoff@elan-ev.de> Date: Thu, 23 May 2024 10:24:55 +0200 Subject: [PATCH 3/6] Remove some empty CSS rulesets --- src/styles/components/video/_video-editor.scss | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/styles/components/video/_video-editor.scss b/src/styles/components/video/_video-editor.scss index 7722e4cbba..ab37f67d79 100644 --- a/src/styles/components/video/_video-editor.scss +++ b/src/styles/components/video/_video-editor.scss @@ -752,12 +752,6 @@ $segment-deleted-selected: saturate(darken($segment-deleted, 25%), 5%); padding: 6px; } - .segment-start { - } - - .segment-end { - } - .segment-remove { float: left; } From bbd7bc4646005b36735f20706052819bb46d169b Mon Sep 17 00:00:00 2001 From: Julian Kniephoff <kniephoff@elan-ev.de> Date: Thu, 23 May 2024 10:28:28 +0200 Subject: [PATCH 4/6] Fix some indentation in the CSS --- src/styles/components/_statistics-graph.scss | 6 +- .../components/video/_video-editor.scss | 401 +++++++++--------- 2 files changed, 206 insertions(+), 201 deletions(-) diff --git a/src/styles/components/_statistics-graph.scss b/src/styles/components/_statistics-graph.scss index ae23052581..ee2db262d8 100644 --- a/src/styles/components/_statistics-graph.scss +++ b/src/styles/components/_statistics-graph.scss @@ -63,10 +63,10 @@ text-align: center; display: flex; justify-content: center; - align-items:flex-start; - + align-items: flex-start; + .navigation { - + @include btn($white); &.prev { diff --git a/src/styles/components/video/_video-editor.scss b/src/styles/components/video/_video-editor.scss index ab37f67d79..9bb552e3f3 100644 --- a/src/styles/components/video/_video-editor.scss +++ b/src/styles/components/video/_video-editor.scss @@ -488,27 +488,27 @@ $segment-deleted-selected: saturate(darken($segment-deleted, 25%), 5%); } .arrow_box:after, .arrow_box:before { - bottom: 100%; - left: 50%; - border: solid transparent; - content: " "; - height: 0; - width: 0; - position: absolute; - pointer-events: none; + bottom: 100%; + left: 50%; + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; } .arrow_box:after { - border-color: rgba(238, 238, 238, 0); - border-bottom-color: #eee; - border-width: 4px; - margin-left: -4px; + border-color: rgba(238, 238, 238, 0); + border-bottom-color: #eee; + border-width: 4px; + margin-left: -4px; } .arrow_box:before { - border-color: rgba(204, 204, 204, 0); - border-bottom-color: #ccc; - border-width: 5px; - margin-left: -5px; + border-color: rgba(204, 204, 204, 0); + border-bottom-color: #ccc; + border-width: 5px; + margin-left: -5px; } a.split { @@ -686,88 +686,89 @@ $segment-deleted-selected: saturate(darken($segment-deleted, 25%), 5%); .segment-list { - .segment-list-entry { - margin: 8px auto; - margin-left: 0; - width: 98%; - height: $segment-list-element-height; - color: $dark-prim-color; - padding-right: 5px; - padding-left: 5px; - text-align: right; - //background: $off-white; - background: rgba($segment-normal, 0.5); - border: $thin-border-stroke $segment-normal; - transition-property: background-color, background, border; - transition-duration: 250ms; - transition-timing-function: ease; - - a { - display: inline-block; - color: lighten($black, 10%); - padding: 9px; - - &:before { - width: 1em; - text-align: center; - } + .segment-list-entry { + margin: 8px auto; + margin-left: 0; + width: 98%; + height: $segment-list-element-height; + color: $dark-prim-color; + padding-right: 5px; + padding-left: 5px; + text-align: right; + //background: $off-white; + background: rgba($segment-normal, 0.5); + border: $thin-border-stroke $segment-normal; + transition-property: background-color, background, border; + transition-duration: 250ms; + transition-timing-function: ease; + + a { + display: inline-block; + color: lighten($black, 10%); + padding: 9px; + + &:before { + width: 1em; + text-align: center; + } - &:hover, &:active { - &:before { - color: $black !important; // force this for mouseover - } - } + &:hover, + &:active { + &:before { + color: $black !important; // force this for mouseover + } + } - &.unused { - @include fa-icon($fa-var-eye-slash , before, inline-block, 0 0 0 0, 0, lighten($black, 10%), 1em); - } + &.unused { + @include fa-icon($fa-var-eye-slash , before, inline-block, 0 0 0 0, 0, lighten($black, 10%), 1em); + } - &.used { - @include fa-icon($fa-var-eye, before, inline-block, 0 0 0 0, 0, lighten($black, 10%), 1em); - } + &.used { + @include fa-icon($fa-var-eye, before, inline-block, 0 0 0 0, 0, lighten($black, 10%), 1em); + } - &.remove { - @include fa-icon($fa-var-times, before, inline-block, 0 0 0 0, 0, lighten($black, 10%), 1em); - } - } + &.remove { + @include fa-icon($fa-var-times, before, inline-block, 0 0 0 0, 0, lighten($black, 10%), 1em); + } + } - &.selected { - background: rgba($segment-selected, 0.5); - border: $thin-border-stroke darken($segment-selected, 10%); + &.selected { + background: rgba($segment-selected, 0.5); + border: $thin-border-stroke darken($segment-selected, 10%); - &.deleted { - background-color: rgba($segment-deleted-selected, 0.5); - border: $thin-border-stroke $segment-deleted-selected; - } - } + &.deleted { + background-color: rgba($segment-deleted-selected, 0.5); + border: $thin-border-stroke $segment-deleted-selected; + } + } - &.deleted { - background-color: rgba($segment-deleted, 0.5); - border: $thin-border-stroke $segment-deleted; - } + &.deleted { + background-color: rgba($segment-deleted, 0.5); + border: $thin-border-stroke $segment-deleted; + } - .segment-start-end { - float: left; - padding: 6px; - } + .segment-start-end { + float: left; + padding: 6px; + } - .segment-remove { - float: left; - } + .segment-remove { + float: left; + } - input[type="text"] { - height: auto; - width: 90px; - padding: 0 5px; + input[type="text"] { + height: auto; + width: 90px; + padding: 0 5px; - &:disabled { - color: $light-prim-color; - background-color: darken(#FFFFFF, 5%); + &:disabled { + color: $light-prim-color; + background-color: darken(#FFFFFF, 5%); + } } - } - } + } } } @@ -781,124 +782,128 @@ $segment-deleted-selected: saturate(darken($segment-deleted, 25%), 5%); // ---------------------------------------- .editor-thumbnail { - .content-wrapper { - display: flex; - } - - form { - display: inline; - margin-left: 6px; - } - - .controls { - position: relative; - padding-right: 20px; - margin: 20px 0 20px 0; - color: $medium-prim-color; - font-size: 12px; - - .description { - line-height: 20px; - margin-bottom: 20px; + .content-wrapper { + display: flex; + } + + form { + display: inline; + margin-left: 6px; + } + + .controls { + position: relative; + padding-right: 20px; + margin: 20px 0 20px 0; + color: $medium-prim-color; + font-size: 12px; + + .description { + line-height: 20px; + margin-bottom: 20px; + } + } + + .thumbnail-canvas { + margin: 20px; + width: 320px; + height: 180px; + min-width: 320px; + background-size: contain; + background-repeat: no-repeat; + background-position: center center; + background-origin: border-box; + border: $thin-border-stroke $main-border-color; + text-align: center; + } + + .thumbnail-canvas>div { + background-color: rgba($black, .4); + width: 320px; + height: 180px; + display: table-cell; + vertical-align: middle; + color: $off-white; + } + + .spinner, + .error { + font-size: 3em; + } + + .hidden { + display: none; } - } - - .thumbnail-canvas { - margin: 20px; - width: 320px; - height: 180px; - min-width: 320px; - background-size: contain; - background-repeat: no-repeat; - background-position: center center; - background-origin: border-box; - border: $thin-border-stroke $main-border-color; - text-align: center; - } - - .thumbnail-canvas>div { - background-color: rgba( $black, .4 ); - width: 320px; - height: 180px; - display: table-cell; - vertical-align: middle; - color: $off-white; - } - - .spinner, .error { - font-size: 3em; - } - - .hidden { - display: none; - } } .editor-tracks { - .audio-canvas, .video-canvas { - background-size: contain; - background-repeat: no-repeat; - background-position: center center; - background-origin: border-box; - text-align: center; - border: $thin-border-stroke $main-border-color; + .audio-canvas, + .video-canvas { + background-size: contain; + background-repeat: no-repeat; + background-position: center center; + background-origin: border-box; + text-align: center; + border: $thin-border-stroke $main-border-color; + + cursor: pointer; + + } + + .audio-canvas { + background-color: rgba(28, 131, 236, 0.5); + border: 1px solid #1169c5; + width: 690px; + height: 60px; + } + + .video-canvas { + position: relative; + width: 160px; + height: 90px; + } - cursor: pointer; - - } - - .audio-canvas { - background-color: rgba(28, 131, 236, 0.5); - border: 1px solid #1169c5; - width: 690px; - height: 60px; - } - - .video-canvas { - position: relative; - width: 160px; - height: 90px; - } - - .track-name { - text-transform: capitalize; - } - - .track, .track-hidden { - position: relative; - width: 100%; - height: 100%; - display: flex; - align-items: center; - justify-content: center; - } - - .track-hidden { - background-color: rgba( $red, .4 ); - } - - .audio-track-hidden-icon, .video-track-hidden-icon { - position: absolute; - height: 100%; - text-align: center ; - } - - .video-track-hidden-icon { - line-height: 120px; - @include fa-icon($fa-var-eye-slash, before, inline-block, 0 0 0 0, 0, lighten($black, 90%), 60px); - } - - .audio-track-hidden-icon { - line-height: 80px; - @include fa-icon($fa-var-microphone-slash, before, inline-block, 0 0 0 0, 0, lighten($black, 90%), 60px); - } - - .track-hidden:hover { - background-color: rgba( $red, .6 ); - } - - .track:hover { - background-color: rgba( $black, .2 ); - } + .track-name { + text-transform: capitalize; + } + + .track, + .track-hidden { + position: relative; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .track-hidden { + background-color: rgba($red, .4); + } + + .audio-track-hidden-icon, + .video-track-hidden-icon { + position: absolute; + height: 100%; + text-align: center; + } + + .video-track-hidden-icon { + line-height: 120px; + @include fa-icon($fa-var-eye-slash, before, inline-block, 0 0 0 0, 0, lighten($black, 90%), 60px); + } + + .audio-track-hidden-icon { + line-height: 80px; + @include fa-icon($fa-var-microphone-slash, before, inline-block, 0 0 0 0, 0, lighten($black, 90%), 60px); + } + + .track-hidden:hover { + background-color: rgba($red, .6); + } + + .track:hover { + background-color: rgba($black, .2); + } } From 0ccb3202a0578370fd236b5c2926c148c07a2b4d Mon Sep 17 00:00:00 2001 From: Julian Kniephoff <kniephoff@elan-ev.de> Date: Thu, 23 May 2024 12:05:06 +0200 Subject: [PATCH 5/6] Get rid of ESLint warnings in the build Either by fixing them or by adding them to the long list of locally disabled ones, when fixing them is too complicated for now. May contain traces of formatting related nitpicks. --- .../partials/wizard/NewThemeWizard.tsx | 2 +- .../ModalTabsAndPages/DetailsMetadataTab.tsx | 4 +- .../EventDetailsAssetAttachmentDetails.tsx | 1 + .../EventDetailsAssetCatalogDetails.tsx | 1 + .../EventDetailsAssetPublicationDetails.tsx | 1 + .../EventDetailsAssetsAddAsset.tsx | 4 +- .../EventDetailsPublicationTab.tsx | 1 + .../events/partials/modals/StartTaskModal.tsx | 1 + .../partials/wizards/NewEventSummary.tsx | 8 +- src/components/shared/TableFilterProfiles.tsx | 2 +- src/components/shared/TableFilters.tsx | 65 ++++++++-------- .../shared/TimeSeriesStatistics.tsx | 11 +-- src/components/shared/wizard/RenderField.tsx | 76 +++++++++---------- .../shared/wizard/SelectContainer.tsx | 3 +- .../users/partials/wizard/NewUserWizard.tsx | 1 + src/utils/bulkActionUtils.ts | 1 - 16 files changed, 86 insertions(+), 96 deletions(-) diff --git a/src/components/configuration/partials/wizard/NewThemeWizard.tsx b/src/components/configuration/partials/wizard/NewThemeWizard.tsx index 9bfa1fb148..bfa72db1ae 100644 --- a/src/components/configuration/partials/wizard/NewThemeWizard.tsx +++ b/src/components/configuration/partials/wizard/NewThemeWizard.tsx @@ -10,7 +10,7 @@ import { initialFormValuesNewThemes } from "../../../../configs/modalConfig"; import { usePageFunctions } from "../../../../hooks/wizardHooks"; import { NewThemeSchema } from "../../../../utils/validate"; import { useAppDispatch } from "../../../../store"; -import { Details, postNewTheme } from "../../../../slices/themeSlice"; +import { postNewTheme } from "../../../../slices/themeSlice"; /** * This component manages the pages of the new theme wizard and the submission of values diff --git a/src/components/events/partials/ModalTabsAndPages/DetailsMetadataTab.tsx b/src/components/events/partials/ModalTabsAndPages/DetailsMetadataTab.tsx index 17ac05e8da..d2130541e5 100644 --- a/src/components/events/partials/ModalTabsAndPages/DetailsMetadataTab.tsx +++ b/src/components/events/partials/ModalTabsAndPages/DetailsMetadataTab.tsx @@ -8,7 +8,7 @@ import RenderDate from "../../../shared/RenderDate"; import RenderMultiField from "../../../shared/wizard/RenderMultiField"; import RenderField from "../../../shared/wizard/RenderField"; import { getUserInformation } from "../../../../selectors/userInfoSelectors"; -import { getCurrentLanguageInformation, hasAccess, isJson } from "../../../../utils/utils"; +import { hasAccess, isJson } from "../../../../utils/utils"; import { getMetadataCollectionFieldName } from "../../../../utils/resourceUtils"; import { useAppSelector } from "../../../../store"; @@ -31,8 +31,6 @@ const DetailsMetadataTab: React.FC<{ const { t } = useTranslation(); const user = useAppSelector(state => getUserInformation(state)); - // Get info about the current language and its date locale - const currentLanguage = getCurrentLanguageInformation(); // @ts-expect-error TS(7006): Parameter 'values' implicitly has an 'any' type. const handleSubmit = (values) => { diff --git a/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetAttachmentDetails.tsx b/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetAttachmentDetails.tsx index 018c363339..5f9c470bec 100644 --- a/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetAttachmentDetails.tsx +++ b/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetAttachmentDetails.tsx @@ -144,6 +144,7 @@ const EventDetailsAssetAttachmentDetails = ({ } </td> <td> + {/* eslint-disable-next-line jsx-a11y/anchor-has-content */} <a className="fa fa-external-link" href={attachment.url} diff --git a/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetCatalogDetails.tsx b/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetCatalogDetails.tsx index 8f871f6edf..4121436fb1 100644 --- a/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetCatalogDetails.tsx +++ b/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetCatalogDetails.tsx @@ -142,6 +142,7 @@ const EventDetailsAssetCatalogDetails = ({ } </td> <td> + {/* eslint-disable-next-line jsx-a11y/anchor-has-content */} <a className="fa fa-external-link" href={catalog.url} /> </td> </tr> diff --git a/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetPublicationDetails.tsx b/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetPublicationDetails.tsx index 6faeabe01f..06d020b4f7 100644 --- a/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetPublicationDetails.tsx +++ b/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetPublicationDetails.tsx @@ -144,6 +144,7 @@ const EventDetailsAssetPublicationDetails = ({ } </td> <td> + {/* eslint-disable-next-line jsx-a11y/anchor-has-content */} <a className="fa fa-external-link" href={publication.url} diff --git a/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetsAddAsset.tsx b/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetsAddAsset.tsx index 709f8e67dc..8d63b5fa76 100644 --- a/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetsAddAsset.tsx +++ b/src/components/events/partials/ModalTabsAndPages/EventDetailsAssetsAddAsset.tsx @@ -90,8 +90,8 @@ const EventDetailsAssetsAddAsset = ({ {" "} {translateOverrideFallback(asset, t)} <span className="ui-helper-hidden"> - { // eslint-disable-next-line react/jsx-no-comment-textnodes - } ({asset.type} "{asset.flavorType}// + {/* eslint-disable-next-line react/jsx-no-comment-textnodes */} + ({asset.type} "{asset.flavorType}// {asset.flavorSubType}") </span> </td> diff --git a/src/components/events/partials/ModalTabsAndPages/EventDetailsPublicationTab.tsx b/src/components/events/partials/ModalTabsAndPages/EventDetailsPublicationTab.tsx index 7702b632d0..3cfd19a63d 100644 --- a/src/components/events/partials/ModalTabsAndPages/EventDetailsPublicationTab.tsx +++ b/src/components/events/partials/ModalTabsAndPages/EventDetailsPublicationTab.tsx @@ -69,6 +69,7 @@ const EventDetailsPublicationTab = ({ </div> {publication.enabled ? ( + // eslint-disable-next-line jsx-a11y/anchor-has-content <a className="play" href={publication.url} /> ) : ( <span style={styleSpan}> diff --git a/src/components/events/partials/modals/StartTaskModal.tsx b/src/components/events/partials/modals/StartTaskModal.tsx index f8f0a55d5a..d32f6fc1e2 100644 --- a/src/components/events/partials/modals/StartTaskModal.tsx +++ b/src/components/events/partials/modals/StartTaskModal.tsx @@ -93,6 +93,7 @@ const StartTaskModal = ({ // eslint-disable-next-line react-hooks/rules-of-hooks useEffect(() => { formik.validateForm().then(); + // eslint-disable-next-line react-hooks/exhaustive-deps }, [page]); return ( diff --git a/src/components/events/partials/wizards/NewEventSummary.tsx b/src/components/events/partials/wizards/NewEventSummary.tsx index 52e7367a37..a8156a5fe5 100644 --- a/src/components/events/partials/wizards/NewEventSummary.tsx +++ b/src/components/events/partials/wizards/NewEventSummary.tsx @@ -133,8 +133,8 @@ const NewEventSummary = <T extends RequiredFormProps>({ <td> {asset.translate} <span className="ui-helper-hidden"> - { // eslint-disable-next-line react/jsx-no-comment-textnodes - } ({asset.type} "{asset.flavorType}// + {/* eslint-disable-next-line react/jsx-no-comment-textnodes */} + ({asset.type} "{asset.flavorType}// {asset.flavorSubType}") </span> </td> @@ -165,8 +165,8 @@ const NewEventSummary = <T extends RequiredFormProps>({ <td> {translateOverrideFallback(asset, t, "SHORT")} <span className="ui-helper-hidden"> - { // eslint-disable-next-line react/jsx-no-comment-textnodes - } ({asset.type} "{asset.flavorType}// + {/* eslint-disable-next-line react/jsx-no-comment-textnodes */} + ({asset.type} "{asset.flavorType}// {asset.flavorSubType}") </span> </td> diff --git a/src/components/shared/TableFilterProfiles.tsx b/src/components/shared/TableFilterProfiles.tsx index 133ee0ed67..a8c166359b 100644 --- a/src/components/shared/TableFilterProfiles.tsx +++ b/src/components/shared/TableFilterProfiles.tsx @@ -38,7 +38,7 @@ const TableFiltersProfiles = ({ // State for helping saving and editing profiles const [profileName, setProfileName] = useState(""); const [profileDescription, setProfileDescription] = useState(""); - const [currentlyEditing, setCurrentlyEditing] = useState(""); + const [, setCurrentlyEditing] = useState(""); const [validName, setValidName] = useState(false); const { t } = useTranslation(); diff --git a/src/components/shared/TableFilters.tsx b/src/components/shared/TableFilters.tsx index b0b24630f8..cfcc04fc1e 100644 --- a/src/components/shared/TableFilters.tsx +++ b/src/components/shared/TableFilters.tsx @@ -1,4 +1,4 @@ -import React, { createRef, useRef, useState } from "react"; +import React, { useRef, useState } from "react"; import { useTranslation } from "react-i18next"; import { connect } from "react-redux"; import { DatePicker } from "@mui/x-date-pickers/DatePicker"; @@ -297,41 +297,39 @@ const TableFilters = ({ {/* Show for each selected filter a blue label containing its name and option */} {filterMap.map((filter, key) => { - if (!!filter.value) { - return ( - <span className="ng-multi-value" key={key}> - <span> - { - // Use different representation of name and value depending on type of filter - filter.type === "select" ? ( - renderBlueBox(filter) - ) : filter.type === "period" ? ( + return filter.value && ( + <span className="ng-multi-value" key={key}> + <span> + { + // Use different representation of name and value depending on type of filter + filter.type === "select" ? ( + renderBlueBox(filter) + ) : filter.type === "period" ? ( + <span> <span> - <span> - {t(filter.label).substr(0, 40)}: - {t("dateFormats.date.short", { - date: new Date(filter.value.split("/")[0]), - })} - - - {t("dateFormats.date.short", { - date: new Date(filter.value.split("/")[1]), - })} - </span> + {t(filter.label).substr(0, 40)}: + {t("dateFormats.date.short", { + date: new Date(filter.value.split("/")[0]), + })} + - + {t("dateFormats.date.short", { + date: new Date(filter.value.split("/")[1]), + })} </span> - ) : null - } - </span> - {/* Remove icon in blue area around filter */} - <button - title={t("TABLE_FILTERS.REMOVE")} - onClick={() => removeFilter(filter)} - className="button-like-anchor" - > - <i className="fa fa-times" /> - </button> + </span> + ) : null + } </span> - ); - } + {/* Remove icon in blue area around filter */} + <button + title={t("TABLE_FILTERS.REMOVE")} + onClick={() => removeFilter(filter)} + className="button-like-anchor" + > + <i className="fa fa-times" /> + </button> + </span> + ); })} </div> @@ -517,7 +515,6 @@ const FilterSwitch = ({ // This should never happen default: return null; - } }; diff --git a/src/components/shared/TimeSeriesStatistics.tsx b/src/components/shared/TimeSeriesStatistics.tsx index b457e8e460..575a6c8fa1 100644 --- a/src/components/shared/TimeSeriesStatistics.tsx +++ b/src/components/shared/TimeSeriesStatistics.tsx @@ -50,14 +50,6 @@ const TimeSeriesStatistics = ({ // @ts-expect-error TS(7031): Binding element 'chartOptions' implicitly has an '... Remove this comment to see the full error message chartOptions, }) => { - // Style for date picker - const datePickerStyle = { - border: "1px solid #dedddd", - borderRadius: "4px", - marginLeft: "3px", - marginRight: "5px", - }; - // Style for radio buttons const radioButtonStyle = { backgroundColor: "whitesmoke", @@ -212,6 +204,7 @@ const TimeSeriesStatistics = ({ <div className="statistics-graph"> {/* download link for a statistic file */} <div className="download"> + {/* eslint-disable-next-line jsx-a11y/anchor-has-content */} <a className="download-icon" href={exportUrl} @@ -265,6 +258,7 @@ const TimeSeriesStatistics = ({ formik.values.timeMode === "month") && ( /* year/month selection for statistic via previous and next buttons */ <span className="preset"> + {/* eslint-disable-next-line jsx-a11y/anchor-has-content, jsx-a11y/anchor-is-valid */} <a className="navigation prev" onClick={() => @@ -282,6 +276,7 @@ const TimeSeriesStatistics = ({ formik.values.timeMode )} </div> + {/* eslint-disable-next-line jsx-a11y/anchor-has-content, jsx-a11y/anchor-is-valid */} <a className="navigation next" onClick={() => diff --git a/src/components/shared/wizard/RenderField.tsx b/src/components/shared/wizard/RenderField.tsx index d02545f4e2..8f7c3500fc 100644 --- a/src/components/shared/wizard/RenderField.tsx +++ b/src/components/shared/wizard/RenderField.tsx @@ -183,49 +183,45 @@ const EditableDateValue = ({ showCheck, // @ts-expect-error TS(7031): handleKeyDown -}) => { - const { t } = useTranslation(); - - return editMode ? ( - <div> - <DateTimePicker - name={field.name} - value={typeof field.value === "string" ? parseISO(field.value) : field.value} - onChange={(value) => setFieldValue(field.name, value)} - onClose={() => setEditMode(false)} - slotProps={{ - textField: { - fullWidth: true, - onKeyDown: (event) => { - if (event.key === "Enter") { - handleKeyDown(event, "date") - } - }, - onBlur: (event) => { - setEditMode(false) +}) => editMode ? ( + <div> + <DateTimePicker + name={field.name} + value={typeof field.value === "string" ? parseISO(field.value) : field.value} + onChange={(value) => setFieldValue(field.name, value)} + onClose={() => setEditMode(false)} + slotProps={{ + textField: { + fullWidth: true, + onKeyDown: (event) => { + if (event.key === "Enter") { + handleKeyDown(event, "date") } + }, + onBlur: (event) => { + setEditMode(false) } - }} - /> - </div> - ) : ( - <div onClick={() => setEditMode(true)} className="show-edit"> - <span className="editable preserve-newlines"> - <RenderDate date={text} /> - </span> - <div> - <i className="edit fa fa-pencil-square" /> - {showCheck && ( - <i - className={cn("saved fa fa-check", { - active: initialValues[field.name] !== field.value, - })} - /> - )} - </div> + } + }} + /> + </div> +) : ( + <div onClick={() => setEditMode(true)} className="show-edit"> + <span className="editable preserve-newlines"> + <RenderDate date={text} /> + </span> + <div> + <i className="edit fa fa-pencil-square" /> + {showCheck && ( + <i + className={cn("saved fa fa-check", { + active: initialValues[field.name] !== field.value, + })} + /> + )} </div> - ); -}; + </div> +); // renders editable field for selecting value via dropdown const EditableSingleSelect = ({ diff --git a/src/components/shared/wizard/SelectContainer.tsx b/src/components/shared/wizard/SelectContainer.tsx index ccf2751270..a2e83e3607 100644 --- a/src/components/shared/wizard/SelectContainer.tsx +++ b/src/components/shared/wizard/SelectContainer.tsx @@ -15,8 +15,7 @@ const SelectContainer = ({ // Formik hook for getting data of specific form field // DON'T delete field and meta, hook works with indices not variable names - // eslint-disable-next-line no-unused-vars - const [field, meta, helpers] = useField(formikField); + const [field, , helpers] = useField(formikField); // Search field for filter options/items const [searchField, setSearchField] = useState(""); diff --git a/src/components/users/partials/wizard/NewUserWizard.tsx b/src/components/users/partials/wizard/NewUserWizard.tsx index 7625e92e26..9fa6c29e18 100644 --- a/src/components/users/partials/wizard/NewUserWizard.tsx +++ b/src/components/users/partials/wizard/NewUserWizard.tsx @@ -72,6 +72,7 @@ const NewUserWizard = ({ // eslint-disable-next-line react-hooks/rules-of-hooks useEffect(() => { formik.validateForm(); + // eslint-disable-next-line react-hooks/exhaustive-deps }, [tab]); return ( diff --git a/src/utils/bulkActionUtils.ts b/src/utils/bulkActionUtils.ts index 602da52ae6..ef386988ad 100644 --- a/src/utils/bulkActionUtils.ts +++ b/src/utils/bulkActionUtils.ts @@ -1,7 +1,6 @@ // Check if an event is scheduled and therefore editable import { hasDeviceAccess } from "./resourceUtils"; import { NOTIFICATION_CONTEXT } from "../configs/modalConfig"; -import { useAppDispatch } from "../store"; import { addNotification } from "../slices/notificationSlice"; // Check if event is scheduled and therefore the schedule is editable From 2fce570837a6ecc12adcc133fb2651d350c55a5d Mon Sep 17 00:00:00 2001 From: Julian Kniephoff <kniephoff@elan-ev.de> Date: Thu, 23 May 2024 15:19:42 +0200 Subject: [PATCH 6/6] Fix SCSS deprecation warnings This also touches our vendored copy of fontawesome. See #429. --- src/styles/base/fontawesome/_core.scss | 4 +++- src/styles/base/fontawesome/_fixed-width.scss | 4 +++- src/styles/base/fontawesome/_larger.scss | 6 ++++-- src/styles/base/fontawesome/_list.scss | 6 ++++-- src/styles/base/fontawesome/_mixins.scss | 4 +++- src/styles/base/fontawesome/_variables.scss | 4 +++- src/styles/components/_stats.scss | 4 +++- src/styles/components/modals/_modal-base.scss | 4 ++-- src/styles/components/modals/_nav.scss | 2 +- src/styles/components/video/_video-editor.scss | 16 ++++++++-------- src/styles/mixins/_mixins-config.scss | 2 +- 11 files changed, 35 insertions(+), 21 deletions(-) diff --git a/src/styles/base/fontawesome/_core.scss b/src/styles/base/fontawesome/_core.scss index 7425ef85fc..bb0c29187c 100644 --- a/src/styles/base/fontawesome/_core.scss +++ b/src/styles/base/fontawesome/_core.scss @@ -1,9 +1,11 @@ +@use "sass:list"; + // Base Class Definition // ------------------------- .#{$fa-css-prefix} { display: inline-block; - font: normal normal normal #{$fa-font-size-base}/#{$fa-line-height-base} FontAwesome; // shortening font declaration + font: normal normal normal list.slash($fa-font-size-base, $fa-line-height-base) FontAwesome; // shortening font declaration font-size: inherit; // can't have font-size inherit on line above, so need to override text-rendering: auto; // optimizelegibility throws things off #1094 -webkit-font-smoothing: antialiased; diff --git a/src/styles/base/fontawesome/_fixed-width.scss b/src/styles/base/fontawesome/_fixed-width.scss index b221c98133..aec43ec593 100644 --- a/src/styles/base/fontawesome/_fixed-width.scss +++ b/src/styles/base/fontawesome/_fixed-width.scss @@ -1,6 +1,8 @@ +@use "sass:math"; + // Fixed Width Icons // ------------------------- .#{$fa-css-prefix}-fw { - width: (18em / 14); + width: math.div(18em, 14); text-align: center; } diff --git a/src/styles/base/fontawesome/_larger.scss b/src/styles/base/fontawesome/_larger.scss index 41e9a8184a..a20ddf578d 100644 --- a/src/styles/base/fontawesome/_larger.scss +++ b/src/styles/base/fontawesome/_larger.scss @@ -1,10 +1,12 @@ +@use "sass:math"; + // Icon Sizes // ------------------------- /* makes the font 33% larger relative to the icon container */ .#{$fa-css-prefix}-lg { - font-size: (4em / 3); - line-height: (3em / 4); + font-size: math.div(4em, 3); + line-height: (3em * 0.25); vertical-align: -15%; } .#{$fa-css-prefix}-2x { font-size: 2em; } diff --git a/src/styles/base/fontawesome/_list.scss b/src/styles/base/fontawesome/_list.scss index 7d1e4d54d6..887901c1ee 100644 --- a/src/styles/base/fontawesome/_list.scss +++ b/src/styles/base/fontawesome/_list.scss @@ -1,3 +1,5 @@ +@use "sass:math"; + // List Icons // ------------------------- @@ -11,9 +13,9 @@ position: absolute; left: -$fa-li-width; width: $fa-li-width; - top: (2em / 14); + top: math.div(2em, 14); text-align: center; &.#{$fa-css-prefix}-lg { - left: -$fa-li-width + (4em / 14); + left: -$fa-li-width + math.div(4em, 14); } } diff --git a/src/styles/base/fontawesome/_mixins.scss b/src/styles/base/fontawesome/_mixins.scss index c3bbd5745d..0c1aa771ec 100644 --- a/src/styles/base/fontawesome/_mixins.scss +++ b/src/styles/base/fontawesome/_mixins.scss @@ -1,9 +1,11 @@ +@use "sass:list"; + // Mixins // -------------------------- @mixin fa-icon() { display: inline-block; - font: normal normal normal #{$fa-font-size-base}/#{$fa-line-height-base} FontAwesome; // shortening font declaration + font: normal normal normal list.slash($fa-font-size-base, $fa-line-height-base) FontAwesome; // shortening font declaration font-size: inherit; // can't have font-size inherit on line above, so need to override text-rendering: auto; // optimizelegibility throws things off #1094 -webkit-font-smoothing: antialiased; diff --git a/src/styles/base/fontawesome/_variables.scss b/src/styles/base/fontawesome/_variables.scss index 6840f96ee9..115ca61968 100644 --- a/src/styles/base/fontawesome/_variables.scss +++ b/src/styles/base/fontawesome/_variables.scss @@ -1,3 +1,5 @@ +@use "sass:math"; + // Variables // -------------------------- @@ -9,7 +11,7 @@ $fa-css-prefix: fa !default; $fa-version: "4.6.3" !default; $fa-border-color: #eee !default; $fa-inverse: #fff !default; -$fa-li-width: (30em / 14) !default; +$fa-li-width: math.div(30em, 14) !default; $fa-var-500px: "\f26e"; $fa-var-adjust: "\f042"; diff --git a/src/styles/components/_stats.scss b/src/styles/components/_stats.scss index e38ab7c0be..4a07be1601 100644 --- a/src/styles/components/_stats.scss +++ b/src/styles/components/_stats.scss @@ -18,6 +18,8 @@ * the License. * */ +@use "sass:math"; + .stats-container { text-align: right; @@ -28,7 +30,7 @@ box-sizing: border-box; display: inline-block; vertical-align: top; - min-width: (40% / $num-cols); + min-width: math.div(40%, $num-cols); margin-bottom: 20px; margin-top: 12px; padding: 0 5px; diff --git a/src/styles/components/modals/_modal-base.scss b/src/styles/components/modals/_modal-base.scss index 94815dec1d..913b803506 100644 --- a/src/styles/components/modals/_modal-base.scss +++ b/src/styles/components/modals/_modal-base.scss @@ -35,7 +35,7 @@ .medium-modal { width: $modal-width; - margin-left: -($modal-width / 2); + margin-left: -($modal-width * 0.5); } .large-modal { @@ -62,7 +62,7 @@ position: absolute; top: 100px; left: 50%; - margin-left: -($modal-width / 2); + margin-left: -($modal-width * 0.5); background: $body-background; border-radius: $main-border-radius; box-shadow: 0 0 20px 2px rgba($black, 0.3); diff --git a/src/styles/components/modals/_nav.scss b/src/styles/components/modals/_nav.scss index a43464aa50..3ee845e684 100644 --- a/src/styles/components/modals/_nav.scss +++ b/src/styles/components/modals/_nav.scss @@ -61,7 +61,7 @@ font-weight: 600; $size: 8px; - $position-from-right: ($width/2) - $size; + $position-from-right: ($width*0.5) - $size; @include triangle-point(bottom, $size, $size, $position-from-right, $off-white, 1px, $modal-nav-border-color, -8px); } diff --git a/src/styles/components/video/_video-editor.scss b/src/styles/components/video/_video-editor.scss index 9bb552e3f3..b8cb752608 100644 --- a/src/styles/components/video/_video-editor.scss +++ b/src/styles/components/video/_video-editor.scss @@ -18,7 +18,7 @@ * the License. * */ - +@use "sass:math"; // Timeline styles // ---------------------------------------- @@ -171,14 +171,14 @@ $segment-deleted-selected: saturate(darken($segment-deleted, 25%), 5%); $sliver-active-stops: (); $sliver-deleted-stops: (); - @for $j from 0 through floor($segment-sliver-vert-length/$num-colors) { + @for $j from 0 through floor(math.div($segment-sliver-vert-length, $num-colors)) { @for $i from 1 through $num-colors { $active-color: nth($segment-sliver-active-colors, $i); $deleted-color: nth($segment-sliver-deleted-colors, $i); - $new-active-stops: $active-color percentage(($i - 1) / $segment-sliver-vert-length + $j * $num-colors / $segment-sliver-vert-length), - $active-color percentage($i / $segment-sliver-vert-length + $j * $num-colors / $segment-sliver-vert-length); - $new-deleted-stops: $deleted-color percentage(($i - 1) / $segment-sliver-vert-length + $j * $num-colors / $segment-sliver-vert-length), - $deleted-color percentage($i / $segment-sliver-vert-length + $j * $num-colors / $segment-sliver-vert-length); + $new-active-stops: $active-color percentage(math.div($i - 1, $segment-sliver-vert-length) + math.div($j * $num-colors, $segment-sliver-vert-length)), + $active-color percentage(math.div($i, $segment-sliver-vert-length) + math.div($j * $num-colors, $segment-sliver-vert-length)); + $new-deleted-stops: $deleted-color percentage(math.div($i - 1, $segment-sliver-vert-length) + math.div($j * $num-colors, $segment-sliver-vert-length)), + $deleted-color percentage(math.div($i, $segment-sliver-vert-length) + math.div($j * $num-colors, $segment-sliver-vert-length)); $sliver-active-stops: join($sliver-active-stops, $new-active-stops, comma); $sliver-deleted-stops: join($sliver-deleted-stops, $new-deleted-stops, comma); } @@ -465,8 +465,8 @@ $segment-deleted-selected: saturate(darken($segment-deleted, 25%), 5%); $handle-size: 14px; .handle { - bottom: ($handle-size/-2) + 1; - left: ($handle-size/-2); + bottom: math.div($handle-size, -2) + 1; + left: math.div($handle-size, -2); width: $handle-size; height: $handle-size; border-radius: $handle-size; diff --git a/src/styles/mixins/_mixins-config.scss b/src/styles/mixins/_mixins-config.scss index c1490874d1..146bd7bbc8 100644 --- a/src/styles/mixins/_mixins-config.scss +++ b/src/styles/mixins/_mixins-config.scss @@ -99,7 +99,7 @@ // Base styles position: absolute; top: 52px; - left: -($width / 2 - 20); + left: -($width * 0.5 - 20); z-index: $max-z - 9; visibility: hidden; opacity: 0;