From d727ab0f579958b51acfad4134e519dc511d2fca Mon Sep 17 00:00:00 2001
From: Michael Krasnov <mihalKrasnov@gmail.com>
Date: Tue, 17 Dec 2024 07:23:05 -0500
Subject: [PATCH] BACKLOG-23323 Improvements to the background jobs page

---
 .github/workflows/on-code-change.yml          |  2 +-
 package.json                                  |  4 +-
 .../backgroundJobs/BackgroundJobsTable.jsx    | 14 ++-
 .../HistoryBackgroundJobsTable.jsx            | 11 ++-
 .../ScheduledBackgroundJobsTable.jsx          |  9 +-
 .../serverSettings/backgroundJobs/hooks.js    |  6 +-
 .../serverSettings/backgroundJobs/index.jsx   | 36 +++++--
 .../serverSettings/backgroundJobs/styles.css  |  7 ++
 .../serverSettings/backgroundJobs/utils.jsx   | 10 +-
 .../systemHealth/registerRoutes.js            |  1 +
 webpack.config.js                             | 18 +++-
 yarn.lock                                     | 96 ++++++++++++++++++-
 12 files changed, 185 insertions(+), 29 deletions(-)
 create mode 100644 src/javascript/serverSettings/backgroundJobs/styles.css

diff --git a/.github/workflows/on-code-change.yml b/.github/workflows/on-code-change.yml
index 0ebefb22..95240a17 100644
--- a/.github/workflows/on-code-change.yml
+++ b/.github/workflows/on-code-change.yml
@@ -26,7 +26,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: Jahia/jahia-modules-action/static-analysis@v2
         with:
-          node_version: 14
+          node_version: 18
           auditci_level: high
 
   build:
diff --git a/package.json b/package.json
index ca59b144..ae60da19 100644
--- a/package.json
+++ b/package.json
@@ -37,6 +37,7 @@
   "dependencies": {
     "@jahia/moonstone": "^2.9.1",
     "@jahia/ui-extender": "^1.0.6",
+    "css-loader": "^7.1.2",
     "graphql-tag": "^2.12.6",
     "i18next": "^19.1.0",
     "prop-types": "^15.7.2",
@@ -47,7 +48,8 @@
     "react-iframe": "^1.8.0",
     "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2",
-    "react-table": "^7.8.0"
+    "react-table": "^7.8.0",
+    "style-loader": "^4.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.6.2",
diff --git a/src/javascript/serverSettings/backgroundJobs/BackgroundJobsTable.jsx b/src/javascript/serverSettings/backgroundJobs/BackgroundJobsTable.jsx
index d2c27ea7..de1442ea 100644
--- a/src/javascript/serverSettings/backgroundJobs/BackgroundJobsTable.jsx
+++ b/src/javascript/serverSettings/backgroundJobs/BackgroundJobsTable.jsx
@@ -1,4 +1,4 @@
-import React, {useMemo} from 'react';
+import React, {useImperativeHandle, useMemo, forwardRef} from 'react';
 import {useTable, useSortBy} from 'react-table';
 import {
     Loader,
@@ -37,7 +37,7 @@ NothingToDisplay.propTypes = {
     isError: PropTypes.bool
 };
 
-const BackgroundJobsTable = ({tableProps, paginationProps, loading, error, ...props}) => {
+const BackgroundJobsTable = forwardRef(({tableProps, paginationProps, loading, error, refetch, ...props}, ref) => {
     const {
         limit,
         setLimit,
@@ -54,6 +54,10 @@ const BackgroundJobsTable = ({tableProps, paginationProps, loading, error, ...pr
         prepareRow
     } = useTable(tableProps, useSortBy);
 
+    useImperativeHandle(ref, () => ({
+        refetch
+    }));
+
     const content = useMemo(() => {
         if (rows.length === 0) {
             return <NothingToDisplay/>;
@@ -118,14 +122,14 @@ const BackgroundJobsTable = ({tableProps, paginationProps, loading, error, ...pr
             <TablePagination rowsPerPageOptions={[5, 10, 20]} currentPage={currentPage} totalNumberOfRows={totalCount} rowsPerPage={limit} onRowsPerPageChange={setLimit} onPageChange={setPage}/>
         </>
     );
-};
+});
 
 BackgroundJobsTable.propTypes = {
     tableProps: PropTypes.object.isRequired,
     paginationProps: PropTypes.object.isRequired,
-    // eslint-disable-next-line react/boolean-prop-naming
-    loading: PropTypes.bool,
 
+    loading: PropTypes.bool,
+    refetch: PropTypes.func,
     error: PropTypes.object,
     'data-testid': PropTypes.string
 };
diff --git a/src/javascript/serverSettings/backgroundJobs/HistoryBackgroundJobsTable.jsx b/src/javascript/serverSettings/backgroundJobs/HistoryBackgroundJobsTable.jsx
index 12e89f65..ec1caed8 100644
--- a/src/javascript/serverSettings/backgroundJobs/HistoryBackgroundJobsTable.jsx
+++ b/src/javascript/serverSettings/backgroundJobs/HistoryBackgroundJobsTable.jsx
@@ -1,11 +1,11 @@
-import React, {useMemo} from 'react';
+import React, {useMemo, forwardRef} from 'react';
 import {useHistoryBackgroundJobs} from './hooks';
 const {useTranslation} = require('react-i18next');
 import {parseUsername} from './utils';
 import BackgroundJobsTable from './BackgroundJobsTable';
 import JobStatusBadge from './JobStatusBadge';
 
-const HistoryBackgroundJobsTable = () => {
+const HistoryBackgroundJobsTable = forwardRef((_, ref) => {
     const {t} = useTranslation('serverSettings');
     const {
         jobs,
@@ -14,6 +14,7 @@ const HistoryBackgroundJobsTable = () => {
         totalCount,
         currentPage,
         setPage,
+        refetch,
         loading,
         error
     } = useHistoryBackgroundJobs();
@@ -52,7 +53,7 @@ const HistoryBackgroundJobsTable = () => {
                 Header: t('backgroundJobs.columns.duration'),
                 accessor: 'duration',
                 Cell: ({value}) => `${value} ms`,
-                customWidth: 80
+                customWidth: 105
             }
         ];
     }, [t]);
@@ -65,13 +66,15 @@ const HistoryBackgroundJobsTable = () => {
 
     return (
         <BackgroundJobsTable
+            ref={ref}
             tableProps={tableProps}
             paginationProps={{limit, setLimit, totalCount, currentPage, setPage}}
+            refetch={refetch}
             loading={loading}
             error={error}
             data-testid="history-background-jobs-table"
         />
     );
-};
+});
 
 export default HistoryBackgroundJobsTable;
diff --git a/src/javascript/serverSettings/backgroundJobs/ScheduledBackgroundJobsTable.jsx b/src/javascript/serverSettings/backgroundJobs/ScheduledBackgroundJobsTable.jsx
index e325f60e..e2bcea0a 100644
--- a/src/javascript/serverSettings/backgroundJobs/ScheduledBackgroundJobsTable.jsx
+++ b/src/javascript/serverSettings/backgroundJobs/ScheduledBackgroundJobsTable.jsx
@@ -1,9 +1,9 @@
-import React, {useMemo} from 'react';
+import React, {useMemo, forwardRef} from 'react';
 import {useTranslation} from 'react-i18next';
 import {useScheduledBackgroundJobs} from './hooks';
 import BackgroundJobsTable from './BackgroundJobsTable';
 
-const ScheduledBackgroundJobsTable = () => {
+const ScheduledBackgroundJobsTable = forwardRef((_, ref) => {
     const {t} = useTranslation('serverSettings');
     const {
         jobs,
@@ -12,6 +12,7 @@ const ScheduledBackgroundJobsTable = () => {
         totalCount,
         currentPage,
         setPage,
+        refetch,
         loading,
         error
     } = useScheduledBackgroundJobs();
@@ -37,13 +38,15 @@ const ScheduledBackgroundJobsTable = () => {
 
     return (
         <BackgroundJobsTable
+            ref={ref}
             tableProps={tableProps}
             paginationProps={{limit, setLimit, totalCount, currentPage, setPage}}
             loading={loading}
+            refetch={refetch}
             error={error}
             data-testid="scheduled-background-jobs-table"
         />
     );
-};
+});
 
 export default ScheduledBackgroundJobsTable;
diff --git a/src/javascript/serverSettings/backgroundJobs/hooks.js b/src/javascript/serverSettings/backgroundJobs/hooks.js
index 9b722122..60655e8f 100644
--- a/src/javascript/serverSettings/backgroundJobs/hooks.js
+++ b/src/javascript/serverSettings/backgroundJobs/hooks.js
@@ -6,7 +6,7 @@ export const useHistoryBackgroundJobs = () => {
     const [page, setPage] = useState(1);
     const [limit, setLimit] = useState(10);
     const offset = useMemo(() => (page - 1) * limit, [page, limit]);
-    const {data, loading, error} = useQuery(GET_BACKGROUND_JOBS, {
+    const {data, loading, error, refetch} = useQuery(GET_BACKGROUND_JOBS, {
         variables: {
             includeStatuses: null,
             excludeStatuses: ['SCHEDULED'],
@@ -23,6 +23,7 @@ export const useHistoryBackgroundJobs = () => {
         jobs,
         totalCount,
         currentPage: page,
+        refetch,
         setPage,
         limit,
         setLimit,
@@ -35,7 +36,7 @@ export const useScheduledBackgroundJobs = () => {
     const [page, setPage] = useState(1);
     const [limit, setLimit] = useState(10);
     const offset = useMemo(() => (page - 1) * limit, [page, limit]);
-    const {data, loading, error} = useQuery(GET_BACKGROUND_JOBS, {
+    const {data, loading, error, refetch} = useQuery(GET_BACKGROUND_JOBS, {
         variables: {
             includeStatuses: ['SCHEDULED'],
             excludeStatuses: null,
@@ -53,6 +54,7 @@ export const useScheduledBackgroundJobs = () => {
         totalCount,
         currentPage: page,
         setPage,
+        refetch,
         limit,
         setLimit,
         loading,
diff --git a/src/javascript/serverSettings/backgroundJobs/index.jsx b/src/javascript/serverSettings/backgroundJobs/index.jsx
index 561261bc..7dd4f484 100644
--- a/src/javascript/serverSettings/backgroundJobs/index.jsx
+++ b/src/javascript/serverSettings/backgroundJobs/index.jsx
@@ -1,24 +1,29 @@
-import React, {useState} from 'react';
-import {Header, LayoutContent, Paper, Tab, TabItem} from '@jahia/moonstone';
+import React, {useMemo, useRef, useState} from 'react';
+import {Button, Header, LayoutContent, Paper, Tab, TabItem} from '@jahia/moonstone';
 import HistoryBackgroundJobsTable from './HistoryBackgroundJobsTable';
 import ScheduledBackgroundJobsTable from './ScheduledBackgroundJobsTable';
 import {useTranslation} from 'react-i18next';
+import SvgReload from '@jahia/moonstone/dist/icons/components/Reload';
+import classes from './styles.css';
 
 const BackgroundJobsTabs = () => {
     const {t} = useTranslation('serverSettings');
     const [activeTab, setActiveTab] = useState('history');
+    const historyRef = useRef(null);
+    const historyTable = useMemo(() => <HistoryBackgroundJobsTable ref={historyRef}/>, []);
 
-    const content = activeTab === 'history' ? <HistoryBackgroundJobsTable/> : <ScheduledBackgroundJobsTable/>;
+    const scheduledRef = useRef(null);
+    const scheduledTable = useMemo(() => <ScheduledBackgroundJobsTable ref={scheduledRef}/>, []);
 
     return (
         <LayoutContent
             header={<Header title={t('backgroundJobs.title')}/>}
             content={(
                 <Paper>
-                    <Tab>
+                    <Tab className={classes.tabs}>
                         <TabItem
                             id="history"
-                            label={t('backgroundJobs.tabs.history').toUpperCase()}
+                            label={t('backgroundJobs.tabs.history')}
                             size="big"
                             isSelected={activeTab === 'history'}
                             data-testid="background-jobs-history-tab"
@@ -26,14 +31,31 @@ const BackgroundJobsTabs = () => {
                         />
                         <TabItem
                             id="scheduled"
-                            label={t('backgroundJobs.tabs.scheduled').toUpperCase()}
+                            label={t('backgroundJobs.tabs.scheduled')}
                             size="big"
                             isSelected={activeTab === 'scheduled'}
                             data-testid="background-jobs-scheduled-tab"
                             onClick={() => setActiveTab('scheduled')}
                         />
+                        <div className={classes.spacer}/>
+                        <Button
+                            variant="ghost"
+                            icon={<SvgReload/>}
+                            onClick={() => {
+                                if (activeTab === 'history') {
+                                    historyRef.current.refetch();
+                                } else {
+                                    scheduledRef.current.refetch();
+                                }
+                            }}
+                        />
                     </Tab>
-                    {content}
+                    <div style={activeTab === 'history' ? {} : {display: 'none'}}>
+                        {historyTable}
+                    </div>
+                    <div style={activeTab === 'scheduled' ? {} : {display: 'none'}}>
+                        {scheduledTable}
+                    </div>
                 </Paper>
             )}
         />
diff --git a/src/javascript/serverSettings/backgroundJobs/styles.css b/src/javascript/serverSettings/backgroundJobs/styles.css
new file mode 100644
index 00000000..61f24d10
--- /dev/null
+++ b/src/javascript/serverSettings/backgroundJobs/styles.css
@@ -0,0 +1,7 @@
+.tabs {
+    width: 100%;
+}
+
+.spacer {
+    flex: 1;
+}
diff --git a/src/javascript/serverSettings/backgroundJobs/utils.jsx b/src/javascript/serverSettings/backgroundJobs/utils.jsx
index 2cd0aa5c..cb833d1e 100644
--- a/src/javascript/serverSettings/backgroundJobs/utils.jsx
+++ b/src/javascript/serverSettings/backgroundJobs/utils.jsx
@@ -7,9 +7,13 @@ export const renderSortIndicator = (isSorted, isSortedDesc) => {
 };
 
 export const parseUsername = username => {
-    if (username.indexOf('/users/') !== -1) {
-        return username.split('/users/')[1];
+    if (!username) {
+        return 'Unknown user';
     }
 
-    return username;
+    if (username.indexOf('/') === -1) {
+        return username;
+    }
+
+    return username.split('/').pop();
 };
diff --git a/src/javascript/serverSettings/systemHealth/registerRoutes.js b/src/javascript/serverSettings/systemHealth/registerRoutes.js
index d545b6bb..db29835c 100644
--- a/src/javascript/serverSettings/systemHealth/registerRoutes.js
+++ b/src/javascript/serverSettings/systemHealth/registerRoutes.js
@@ -41,6 +41,7 @@ export const registerRoutes = function () {
 
     registry.add('adminRoute', 'backgroundJobs', {
         targets: ['administration-server-systemHealth:4'],
+        requiredPermission: 'view-all-jobs',
         icon: null,
         label: 'serverSettings:systemHealth.backgroundJobs',
         isSelectable: true,
diff --git a/webpack.config.js b/webpack.config.js
index c9450fad..c290f209 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -27,7 +27,7 @@ module.exports = (env, argv) => {
         },
         resolve: {
             mainFields: ['module', 'main'],
-            extensions: ['.mjs', '.js', '.jsx', 'json']
+            extensions: ['.mjs', '.js', '.jsx', '.json']
         },
         module: {
             rules: [
@@ -58,7 +58,21 @@ module.exports = (env, argv) => {
                     test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
                     type: 'asset/resource',
                     dependency: { not: ['url'] }
-                }
+                },
+                {
+                    test: /\.css$/,
+                    use: [
+                        'style-loader',
+                        {
+                            loader: 'css-loader',
+                            options: {
+                                modules: {
+                                    namedExport: false,
+                                },
+                            },
+                        },
+                    ],
+                },
             ]
         },
         plugins: [
diff --git a/yarn.lock b/yarn.lock
index b2d737fa..91a714ae 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2487,6 +2487,25 @@ cross-spawn@^7.0.2, cross-spawn@^7.0.3:
     shebang-command "^2.0.0"
     which "^2.0.1"
 
+css-loader@^7.1.2:
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-7.1.2.tgz#64671541c6efe06b0e22e750503106bdd86880f8"
+  integrity sha512-6WvYYn7l/XEGN8Xu2vWFt9nVzrCn39vKyTEFf/ExEyoksJjjSZV/0/35XPlMbpnr6VGhZIUg5yJrL8tGfes/FA==
+  dependencies:
+    icss-utils "^5.1.0"
+    postcss "^8.4.33"
+    postcss-modules-extract-imports "^3.1.0"
+    postcss-modules-local-by-default "^4.0.5"
+    postcss-modules-scope "^3.2.0"
+    postcss-modules-values "^4.0.0"
+    postcss-value-parser "^4.2.0"
+    semver "^7.5.4"
+
+cssesc@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
+  integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
+
 csstype@^3.0.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
@@ -3791,6 +3810,11 @@ iconv-lite@^0.4.24:
   dependencies:
     safer-buffer ">= 2.1.2 < 3"
 
+icss-utils@^5.0.0, icss-utils@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-5.1.0.tgz#c6be6858abd013d768e98366ae47e25d5887b1ae"
+  integrity sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==
+
 ignore@^4.0.6:
   version "4.0.6"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc"
@@ -4619,6 +4643,11 @@ nan@~2.17.0:
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.17.0.tgz#c0150a2368a182f033e9aa5195ec76ea41a199cb"
   integrity sha512-2ZTgtl0nJsO0KQCjEpxcIr5D+Yv90plTitZt9JBfQvVJDS5seMl3FOvsh3+9CoYWXf/1l5OaZzzF6nDm4cagaQ==
 
+nanoid@^3.3.7:
+  version "3.3.8"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.8.tgz#b1be3030bee36aaff18bacb375e5cce521684baf"
+  integrity sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==
+
 nanomatch@^1.2.9:
   version "1.2.13"
   resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
@@ -5026,6 +5055,11 @@ picocolors@^1.0.0:
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
   integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
 
+picocolors@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.1.tgz#3d321af3eab939b083c8f929a1d12cda81c26b6b"
+  integrity sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==
+
 picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
@@ -5065,6 +5099,56 @@ posix-character-classes@^0.1.0:
   resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
   integrity sha512-xTgYBc3fuo7Yt7JbiuFxSYGToMoz8fLoE6TC9Wx1P/u+LfeThMOAqmuyECnlBaaJb+u1m9hHiXUEtwW4OzfUJg==
 
+postcss-modules-extract-imports@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.1.0.tgz#b4497cb85a9c0c4b5aabeb759bb25e8d89f15002"
+  integrity sha512-k3kNe0aNFQDAZGbin48pL2VNidTF0w4/eASDsxlyspobzU3wZQLOGj7L9gfRe0Jo9/4uud09DsjFNH7winGv8Q==
+
+postcss-modules-local-by-default@^4.0.5:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.2.0.tgz#d150f43837831dae25e4085596e84f6f5d6ec368"
+  integrity sha512-5kcJm/zk+GJDSfw+V/42fJ5fhjL5YbFDl8nVdXkJPLLW+Vf9mTD5Xe0wqIaDnLuL2U6cDNpTr+UQ+v2HWIBhzw==
+  dependencies:
+    icss-utils "^5.0.0"
+    postcss-selector-parser "^7.0.0"
+    postcss-value-parser "^4.1.0"
+
+postcss-modules-scope@^3.2.0:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-3.2.1.tgz#1bbccddcb398f1d7a511e0a2d1d047718af4078c"
+  integrity sha512-m9jZstCVaqGjTAuny8MdgE88scJnCiQSlSrOWcTQgM2t32UBe+MUmFSO5t7VMSfAf/FJKImAxBav8ooCHJXCJA==
+  dependencies:
+    postcss-selector-parser "^7.0.0"
+
+postcss-modules-values@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz#d7c5e7e68c3bb3c9b27cbf48ca0bb3ffb4602c9c"
+  integrity sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==
+  dependencies:
+    icss-utils "^5.0.0"
+
+postcss-selector-parser@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-7.0.0.tgz#41bd8b56f177c093ca49435f65731befe25d6b9c"
+  integrity sha512-9RbEr1Y7FFfptd/1eEdntyjMwLeghW1bHX9GWjXo19vx4ytPQhANltvVxDggzJl7mnWM+dX28kb6cyS/4iQjlQ==
+  dependencies:
+    cssesc "^3.0.0"
+    util-deprecate "^1.0.2"
+
+postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
+  integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
+
+postcss@^8.4.33:
+  version "8.4.49"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.49.tgz#4ea479048ab059ab3ae61d082190fabfd994fe19"
+  integrity sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==
+  dependencies:
+    nanoid "^3.3.7"
+    picocolors "^1.1.1"
+    source-map-js "^1.2.1"
+
 prelude-ls@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
@@ -5835,6 +5919,11 @@ snapdragon@^0.8.1:
     source-map-resolve "^0.5.0"
     use "^3.1.0"
 
+source-map-js@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.1.tgz#1ce5650fddd87abc099eda37dcff024c2667ae46"
+  integrity sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==
+
 source-map-resolve@^0.5.0:
   version "0.5.3"
   resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.3.tgz#190866bece7553e1f8f267a2ee82c606b5509a1a"
@@ -6051,6 +6140,11 @@ strip-json-comments@^3.0.1, strip-json-comments@^3.1.0, strip-json-comments@^3.1
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
   integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
 
+style-loader@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-4.0.0.tgz#0ea96e468f43c69600011e0589cb05c44f3b17a5"
+  integrity sha512-1V4WqhhZZgjVAVJyt7TdDPZoPBPNHbekX4fWnCJL1yQukhCeZhJySUL+gL9y6sNdN95uEOS83Y55SqHcP7MzLA==
+
 supports-color@^5.3.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
@@ -6388,7 +6482,7 @@ use@^3.1.0:
   resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"
   integrity sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==
 
-util-deprecate@^1.0.1, util-deprecate@~1.0.1:
+util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
   integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==