@rh-support/manage 2.4.10-beta.6 → 2.5.1

package/lib/esm/reducers/TopContentReducer.js

@@ -9,6 +9,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import { pcm } from '@cee-eng/hydrajs';
 import { getApiResourceObject, getVersion } from '@rh-support/utils';
+import { isEmpty } from 'lodash';
 import cloneDeep from 'lodash/cloneDeep';
 import { intialTopContentContext } from '../context/TopContentProvider';
 import { getContentUrls } from './TopContentHelpers';
@@ -38,9 +39,10 @@ export var TopContentReducerConstants;
     TopContentReducerConstants["resetDuplicatUrls"] = "resetDuplicatUrls";
     TopContentReducerConstants["getTopContentResourceUsage"] = "getTopContentResourceUsage";
     TopContentReducerConstants["setTopContentSuggestions"] = "setTopContentSuggestions";
+    TopContentReducerConstants["updateFilteredTags"] = "updateFilteredTags";
 })(TopContentReducerConstants || (TopContentReducerConstants = {}));
 export const TopContentReducer = (pState, action) => {
-    var _a, _b;
+    var _a, _b, _c;
     switch (action.type) {
         case TopContentReducerConstants.resetContentWithSelectedProduct: {
             return Object.assign(Object.assign({}, intialTopContentContext), { selectedProduct: Object.assign({}, action.payload.selectedProduct) });
@@ -78,6 +80,9 @@ export const TopContentReducer = (pState, action) => {
         case TopContentReducerConstants.setTopContentSuggestions: {
             return Object.assign(Object.assign({}, pState), { suggestion: (_b = action.payload) === null || _b === void 0 ? void 0 : _b.suggestion });
         }
+        case TopContentReducerConstants.updateFilteredTags: {
+            return Object.assign(Object.assign({}, pState), { filteredTags: (_c = action.payload) === null || _c === void 0 ? void 0 : _c.filteredTags });
+        }
         default: {
             return pState;
         }
@@ -306,7 +311,7 @@ export const removeTopContent = (dispatch, topContentEditState, categoryId, i) =
         }
         else if (cat.id === categoryId) {
             // an added item in a category is removed
-            cat.content = cat.content.filter((item, index) => index !== i);
+            cat.content = cat.content.filter((item) => item.mode !== ContentMode.ADD);
         }
     });
     dispatch({
@@ -314,7 +319,7 @@ export const removeTopContent = (dispatch, topContentEditState, categoryId, i) =
         payload: { topContentEditState },
     });
 };
-export const saveAddedNewSectionContents = (dispatch, topContentEditState, selectedCategory, selectedProduct, selectedVersion, isCatOnlyForMajorVersion, newContent, isCreatingNewSet = false) => __awaiter(void 0, void 0, void 0, function* () {
+export const saveAddedNewSectionContents = (dispatch_1, topContentEditState_1, selectedCategory_1, selectedProduct_1, selectedVersion_1, isCatOnlyForMajorVersion_1, newContent_1, ...args_1) => __awaiter(void 0, [dispatch_1, topContentEditState_1, selectedCategory_1, selectedProduct_1, selectedVersion_1, isCatOnlyForMajorVersion_1, newContent_1, ...args_1], void 0, function* (dispatch, topContentEditState, selectedCategory, selectedProduct, selectedVersion, isCatOnlyForMajorVersion, newContent, isCreatingNewSet = false) {
     const versionObj = getVersion(selectedVersion);
     const createMasterIdParam = {
         productId: selectedProduct.id,
@@ -322,19 +327,25 @@ export const saveAddedNewSectionContents = (dispatch, topContentEditState, selec
         minorVersion: isCatOnlyForMajorVersion ? null : versionObj.minor,
         isActive: 1,
     };
-    // create the category for version (major/minor)
-    const result = yield pcm.topContent.postTopContentMaster([createMasterIdParam]);
-    const topContentMasterDataId = result.topContentMasters[0].id;
-    const toAdd = {
-        topContentMasterDataId,
-        contentTitle: newContent.contentTitle,
-        contentUrl: newContent.contentUrl,
-        categoryName: selectedCategory.categoryName,
-        categoryId: selectedCategory.id,
-        isActive: 1,
-    };
     try {
+        // create the category for version (major/minor)
+        const result = yield pcm.topContent.postTopContentMaster([createMasterIdParam]);
+        const topContentMasterDataId = result.topContentMasters[0].id;
+        const toAdd = {
+            topContentMasterDataId,
+            contentTitle: newContent.contentTitle,
+            contentUrl: newContent.contentUrl,
+            expiryDate: newContent.expiryDate,
+            categoryName: selectedCategory.categoryName,
+            categoryId: selectedCategory.id,
+            isActive: 1,
+        };
         const res = yield pcm.topContent.postTopContent({ topContents: [toAdd] });
+        if (!isEmpty(newContent.tagList)) {
+            yield pcm.topContentTag.updateTagsOfTopContent({
+                topContents: [{ id: res.topContents[0].id, tagList: newContent.tagList }],
+            });
+        }
         const newSavedContent = res.topContents[0];
         const oldCat = {
             id: -1,
@@ -359,6 +370,7 @@ export const saveAddedNewSectionContents = (dispatch, topContentEditState, selec
                 contentUrls: getContentUrls(topContentEditState),
             },
         });
+        return res;
     }
     catch (e) {
         console.log(e);
@@ -372,14 +384,21 @@ export const saveAddToTopContent = (dispatch, topContentEditState, id, categoryI
         const toAdd = {
             categoryName: categoryToBeSave.categoryName,
             categoryId,
-            topContentMasterDataId: categoryToBeSave.topContentMasterDataId,
+            topContentMasterDataId: categoryToBeSave === null || categoryToBeSave === void 0 ? void 0 : categoryToBeSave.topContentMasterDataId,
             contentTitle: content.contentTitle,
             contentUrl: content.contentUrl,
             contentRank: index,
+            expiryDate: content.expiryDate,
             isActive: 1,
         };
         const res = yield pcm.topContent.postTopContent({ topContents: [toAdd] });
-        topContentEditState.forEach((cat) => {
+        if (!isEmpty(content.tagList)) {
+            yield pcm.topContentTag.updateTagsOfTopContent({
+                topContents: [{ id: res.topContents[0].id, tagList: content.tagList }],
+            });
+        }
+        const newTopContentEditState = [...topContentEditState];
+        newTopContentEditState.forEach((cat) => {
             var _a, _b, _c, _d, _e, _f;
             if (cat.id === id) {
                 if (index === -1) {
@@ -389,7 +408,11 @@ export const saveAddToTopContent = (dispatch, topContentEditState, id, categoryI
                 }
                 else {
                     // creating a new top content
-                    cat.content[index] = Object.assign(Object.assign({}, cat.content[index]), { mode: ContentMode.INITIAL, contentTitle: content.contentTitle, contentUrl: content.contentUrl, topContentId: (_d = res === null || res === void 0 ? void 0 : res.topContents[0]) === null || _d === void 0 ? void 0 : _d.id, createdBy: (_e = res === null || res === void 0 ? void 0 : res.topContents[0]) === null || _e === void 0 ? void 0 : _e.createdBy, createdOn: (_f = res === null || res === void 0 ? void 0 : res.topContents[0]) === null || _f === void 0 ? void 0 : _f.createdOn });
+                    const newContent = cat.content.find((content) => content.mode === ContentMode.ADD);
+                    if (!isEmpty(newContent)) {
+                        const newContentIndex = cat.content.findIndex((content) => content.mode === ContentMode.ADD);
+                        cat.content[newContentIndex] = Object.assign(Object.assign({}, newContent), { mode: ContentMode.INITIAL, contentTitle: content.contentTitle, contentUrl: content.contentUrl, topContentId: (_d = res === null || res === void 0 ? void 0 : res.topContents[0]) === null || _d === void 0 ? void 0 : _d.id, createdBy: (_e = res === null || res === void 0 ? void 0 : res.topContents[0]) === null || _e === void 0 ? void 0 : _e.createdBy, createdOn: (_f = res === null || res === void 0 ? void 0 : res.topContents[0]) === null || _f === void 0 ? void 0 : _f.createdOn, tags: content.tags });
+                    }
                 }
             }
         });
@@ -397,11 +420,12 @@ export const saveAddToTopContent = (dispatch, topContentEditState, id, categoryI
         dispatch({
             type: TopContentReducerConstants.changeTopContentStateOnSave,
             payload: {
-                topContentEditState,
+                topContentEditState: newTopContentEditState,
                 topContentResponse: getApiResourceObject(cloneDeep(topContentEditState)),
                 contentUrls: getContentUrls(topContentEditState),
             },
         });
+        return res;
     }
     catch (e) {
         console.log(e);
@@ -409,19 +433,27 @@ export const saveAddToTopContent = (dispatch, topContentEditState, id, categoryI
     }
 });
 // user saves content updates
-export const saveChangeInCategoryContent = (dispatch, topContentEditState, categoryId, content, index) => __awaiter(void 0, void 0, void 0, function* () {
+export const saveChangeInCategoryContent = (dispatch, topContentEditState, categoryId, content, deletedTags) => __awaiter(void 0, void 0, void 0, function* () {
     const toUpdate = {
         id: content.topContentId,
         contentTitle: content.contentTitle,
         contentUrl: content.contentUrl,
         contentRank: content.contentRank,
+        tagList: content.tagList, // list of new tagIds which needs to be added in content
+        expiryDate: content.expiryDate,
         isActive: 1,
     };
     try {
+        if (deletedTags && !isEmpty(deletedTags)) {
+            yield Promise.all(deletedTags.map((t) => pcm.topContentTag.deleteTagFromTopContent(content.topContentId, t)));
+        }
         const updatedContent = yield pcm.topContent.patchTopContent({ topContents: [toUpdate] });
         topContentEditState.forEach((cat) => {
             if (cat.categoryId === categoryId) {
-                cat.content[index] = Object.assign(Object.assign({}, cat.content[index]), { mode: ContentMode.INITIAL, contentTitle: content.contentTitle, contentUrl: content.contentUrl, updatedBy: updatedContent.topContents[0].updatedBy, updatedOn: updatedContent.topContents[0].updatedOn });
+                const index = cat.content.findIndex((c) => c.topContentId === content.topContentId);
+                if (index !== -1) {
+                    cat.content[index] = Object.assign(Object.assign({}, cat.content[index]), { mode: ContentMode.INITIAL, contentTitle: content.contentTitle, contentUrl: content.contentUrl, updatedBy: updatedContent.topContents[0].updatedBy, updatedOn: updatedContent.topContents[0].updatedOn, tags: content.tags, expiryDate: content.expiryDate });
+                }
             }
         });
         // We need to clone deep current state to re-render and re-calculate top content resource usage calculations
@@ -535,6 +567,12 @@ export const resetDuplicatUrls = (dispatch) => {
         payload: { contentUrls: {} },
     });
 };
+export const setFilteredTags = (dispatch, tags) => {
+    dispatch({
+        type: TopContentReducerConstants.updateFilteredTags,
+        payload: { filteredTags: tags },
+    });
+};
 /**
  * This function is used for to get top content suggestions from server
  * @param dispatch TopContentReducerDispatchType
@@ -570,11 +608,11 @@ export const fetchTopContentSuggestions = (dispatch, productName, version) => __
  * @param suggestionId number
  */
 export const deleteTopContentSuggestion = (dispatch, suggestion, suggestionId) => __awaiter(void 0, void 0, void 0, function* () {
-    var _b, _c;
+    var _a, _b;
     try {
         yield pcm.topContent.deleteTopContentSuggestion(suggestionId);
-        suggestion.linkedResources = (_b = suggestion.linkedResources) === null || _b === void 0 ? void 0 : _b.filter((resource) => resource.id !== suggestionId);
-        suggestion.linkedResourcesCount = (_c = suggestion.linkedResources) === null || _c === void 0 ? void 0 : _c.length;
+        suggestion.linkedResources = (_a = suggestion.linkedResources) === null || _a === void 0 ? void 0 : _a.filter((resource) => resource.id !== suggestionId);
+        suggestion.linkedResourcesCount = (_b = suggestion.linkedResources) === null || _b === void 0 ? void 0 : _b.length;
         dispatch({
             type: TopContentReducerConstants.setTopContentSuggestions,
             payload: { suggestion },

package/lib/esm/scss/_main.scss

@@ -8,15 +8,11 @@
     }
 }
 
-.pf-c-accordion .pf-m-expanded ul {
-    list-style-type: disc;
-}
-
-.pf-c-accordion .pf-c-accordion-footer {
+.pf-v5-c-accordion .pf-v5-c-accordion-footer {
     padding: 16px 32px;
 }
 
-.pf-c-accordion .pf-c-accordion__expanded-content-body {
+.pf-v5-c-accordion .pf-v5-c-accordion__expanded-content-body {
     .edit-solution {
         margin-bottom: 2rem;
     }
@@ -29,33 +25,12 @@
             flex-direction: row;
         }
 
-        button {
-            margin-left: 1rem;
-        }
-
         &.add-new-category {
             margin-bottom: 2rem;
         }
     }
 }
 
-.pf-c-accordion .pf-c-accordion__expanded-content-body .pf-c-accordion__expanded-content-footer {
-    display: flex;
-    flex-direction: row;
-
-    .content-actions {
-        margin-left: auto;
-
-        & > * {
-            margin-right: 0.5rem;
-        }
-
-        & > *:last-child {
-            margin-right: 0;
-        }
-    }
-}
-
 .manage {
     header {
         margin-bottom: 1.3rem;
@@ -66,10 +41,15 @@
         display: flex;
         -ms-flex-direction: column;
         flex-direction: column;
+        flex-wrap: wrap;
         padding: 1rem 1.2rem;
         background-color: #f0f0f0;
         border: 1px solid #d2d2d2;
 
+        .toolbar-content {
+            width: 49%;
+        }
+
         label {
             font-size: 14px;
             margin-bottom: 0;
@@ -90,6 +70,20 @@
                 width: 100%;
                 // max-width: 440px;
             }
+
+            .group-name-select {
+                display: flex;
+                flex-direction: column;
+                width: 100%;
+
+                .group-name-buttons {
+                    display: flex;
+                }
+
+                .form-instructions.form-invalid {
+                    margin: 0 !important;
+                }
+            }
         }
 
         .toolbar-right {
@@ -146,10 +140,6 @@
         }
     }
 
-    .panels {
-        width: 100%;
-    }
-
     .create-category-link {
         padding: 0;
     }
@@ -158,14 +148,6 @@
         margin-bottom: 1rem;
     }
 
-    [role='tabpanel'] {
-        background-color: #fff !important;
-
-        & > * {
-            padding: 0 0.5rem 1rem;
-        }
-    }
-
     .table-wrapper {
         margin-bottom: 2rem;
         border: 1px solid #ccc;
@@ -175,8 +157,8 @@
             border-top: none;
         }
 
-        .pf-c-table__action {
-            .pf-c-dropdown__menu button.pf-m-disabled:hover {
+        .pf-v5-c-table__action {
+            .pf-v5-c-dropdown__menu button.pf-m-disabled:hover {
                 cursor: not-allowed;
             }
         }
@@ -186,14 +168,14 @@
             padding: 0.5rem 1.2rem;
             background-color: #f0f0f0;
 
-            .pf-c-pagination {
+            .pf-v5-c-pagination {
                 padding: 0;
                 background-color: transparent;
 
-                .pf-c-pagination__nav {
+                .pf-v5-c-pagination__nav {
                     align-items: baseline;
 
-                    .pf-c-pagination__nav-page-select {
+                    .pf-v5-c-pagination__nav-page-select {
                         display: flex;
                         align-items: baseline;
                     }
@@ -201,6 +183,27 @@
             }
         }
     }
+    .pf-v5-c-tabs__item {
+        white-space: nowrap;
+        a {
+            color: gray;
+        }
+        a:hover {
+            color: black;
+        }
+    }
+
+    .pf-v5-c-tabs__item.pf-m-current {
+        background-color: white;
+        min-width: 200px;
+        a {
+            color: black;
+        }
+    }
+
+    .pf-v5-c-tab-content {
+        flex: 1;
+    }
 }
 
 #manage-top-content {
@@ -221,27 +224,49 @@
         border-top: none;
     }
     .top-content-needs-attention {
-        color: var(--pf-global--danger-color--100);
+        color: var(--pf-v5-global--danger-color--100);
     }
     .top-content-tooltip {
-        color: var(--pf-global--danger-color--100);
+        color: var(--pf-v5-global--danger-color--100);
         padding: 2px;
     }
 }
 
+#manage-expired-content {
+    .expired-content-manage-wrapper {
+        border: 1px solid #ccc;
+        border-top: none;
+
+        dt {
+            margin: 0;
+        }
+    }
+}
+
+#tags-manager-content {
+    .tags-manager-wrapper {
+        border: 1px solid #ccc;
+        border-top: none;
+
+        dt {
+            margin: 0;
+        }
+    }
+}
+
 // specific overrides under manage because of a different implementation
-.pf-c-select {
-    .pf-c-select__toggle-wrapper > form:first-child {
+.pf-v5-c-select {
+    .pf-v5-c-select__toggle-wrapper > form:first-child {
         width: 100%;
     }
 
-    .pf-c-select__toggle-wrapper {
-        .pf-c-select__toggle-icon {
+    .pf-v5-c-select__toggle-wrapper {
+        .pf-v5-c-select__toggle-icon {
             margin-left: 4px;
             margin-right: 0;
         }
 
-        .pf-c-select__toggle-typeahead {
+        .pf-v5-c-select__toggle-typeahead {
             border-left: none;
             border-right: none;
         }
@@ -252,7 +277,7 @@
     }
 }
 
-.pf-c-button {
+.pf-v5-c-button {
     font-size: 14px;
 }
 
@@ -275,12 +300,12 @@
     width: -webkit-fill-available;
 }
 
-.pf-c-table__action li:hover button:not(.pf-m-disabled) {
+.pf-v5-c-table__action li:hover button:not(.pf-m-disabled) {
     color: #06c;
 }
 
-.pf-c-table__action li:nth-child(2) button:hover,
-.pf-c-table__action li:nth-child(3) button:hover {
+.pf-v5-c-table__action li:nth-child(2) button:hover,
+.pf-v5-c-table__action li:nth-child(3) button:hover {
     color: #a30000;
 }
 
@@ -319,3 +344,10 @@ svg.hostnameSpinner {
 #requests-detached-toggle-content thead {
     display: none;
 }
+
+.top-content-single-item-footer {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}

package/lib/esm/scss/_pf-overrides.scss

@@ -0,0 +1,181 @@
+// Patternfly overrides
+
+div#top-content-performance-metric.pf-v5-c-modal-box {
+    .pf-v5-c-modal-box__body {
+        .pf-v5-c-title {
+            margin-bottom: unset;
+        }
+        .top-content-tooltip-view-metric-label {
+            color: var(--pf-v5-global--primary-color--100);
+        }
+        .pf-v5-c-toggle-group__button {
+            /* Somehow below style is getting added by Patternfly which is overriding default button padding  
+            * [class*="pf-v5-c-"], [class*="pf-v5-c-"]::before, [class*="pf-v5-c-"]::after {
+                padding: 0;
+                margin: 0;
+                background-color: transparent;
+            */
+            padding: var(--pf-v5-c-toggle-group__button--PaddingTop) var(--pf-v5-c-toggle-group__button--PaddingRight)
+                var(--pf-v5-c-toggle-group__button--PaddingBottom) var(--pf-v5-c-toggle-group__button--PaddingLeft);
+        }
+    }
+}
+
+div#top-content-category-limit-guidelines.pf-v5-c-modal-box {
+    .pf-v5-c-modal-box__body {
+        .pf-v5-c-title {
+            margin-bottom: unset;
+        }
+    }
+}
+
+div#top-content-major-version-performance-metric.pf-v5-c-modal-box {
+    .pf-v5-c-modal-box__body {
+        overflow-x: unset;
+        overflow-y: unset;
+        .pf-v5-c-title {
+            margin-bottom: unset;
+        }
+        .pf-v5-c-toggle-group__button {
+            /* Somehow below style is getting added by Patternfly which is overriding default button padding  
+            * [class*="pf-v5-c-"], [class*="pf-v5-c-"]::before, [class*="pf-v5-c-"]::after {
+                padding: 0;
+                margin: 0;
+                background-color: transparent;
+            */
+            padding: var(--pf-v5-c-toggle-group__button--PaddingTop) var(--pf-v5-c-toggle-group__button--PaddingRight)
+                var(--pf-v5-c-toggle-group__button--PaddingBottom) var(--pf-v5-c-toggle-group__button--PaddingLeft);
+        }
+        .sticky-header {
+            position: sticky;
+            top: 0;
+            background: var(--pf-v5-c-modal-box--BackgroundColor);
+            z-index: 89; // As .pf-v5-c-toggle-group__button is having z-index: var(--pf-v5-c-toggle-group__button--ZIndex)
+            padding-bottom: var(--pf-v5-global--spacer--sm);
+        }
+        .content {
+            height: 30vh;
+            overflow: auto;
+        }
+        .panel-body {
+            padding: var(--pf-v5-global--spacer--md);
+        }
+    }
+}
+
+// Overrides performance metrics modal font weight
+div.performance-metrics-modal {
+    div.pf-v5-c-modal-box__body {
+        div.sticky-header {
+            div.pf-v5-l-flex.pf-m-justify-content-space-between {
+                // For versions dropdown
+                div.pf-v5-u-w-50.pf-v5-u-pr-md {
+                    div.pf-v5-u-font-weight-bold {
+                        font-weight: 600 !important;
+                    }
+                }
+                // For categories dropdown
+                div.pf-v5-u-w-50.pf-v5-u-pl-md {
+                    div.pf-v5-u-font-weight-bold {
+                        font-weight: 600 !important;
+                    }
+                }
+            }
+        }
+
+        // To override font weight on the accordion text in performance metrics modal - PCM-11644
+        div.content {
+            div.pf-v5-c-panel.pf-m-bordered {
+                div.pf-v5-c-panel__main {
+                    div.pf-v5-c-panel__main-body {
+                        dl.pf-v5-c-accordion.pf-m-bordered {
+                            dt {
+                                button {
+                                    span.pf-v5-c-accordion__toggle-text {
+                                        span {
+                                            font-weight: 500 !important;
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+#top-content-suggestion {
+    .pf-v5-c-expandable-section__content {
+        border: unset;
+    }
+    .card-hint {
+        background-color: var(--pf-v5-global--BackgroundColor--200);
+    }
+    .card-body {
+        padding: var(--pf-v5-global--spacer--md);
+    }
+    .hint-title {
+        color: var(--pf-v5-global--primary-color--100);
+    }
+    .accordion_title {
+        color: var(--pf-v5-global--Color--100);
+        margin: 0;
+    }
+}
+
+.top-content-panel {
+    z-index: 9;
+}
+
+.pf-v5-c-accordion__expandable-content {
+    margin: 0;
+}
+
+div.pf-v5-c-pagination__nav-page-select {
+    span.pf-v5-c-form-control {
+        background-color: white;
+    }
+}
+
+.pf-v5-c-select__menu {
+    padding: 0;
+}
+
+.pf-v5-c-form-control.pf-m-disabled {
+    background-color: #e0e0e0;
+    border-bottom: 1px solid black;
+}
+
+.pf-v5-c-form-control.pf-m-disabled.issue-title-disabled {
+    border: none !important;
+}
+
+.pf-v5-c-chip {
+    .pf-v5-svg {
+        font-size: 12px;
+    }
+}
+
+.pf-v5-c-switch__label {
+    color: black !important;
+    font-size: 16px;
+    font-weight: 400;
+    outline: none !important;
+}
+
+.pf-v5-c-menu__content {
+    width: 100%;
+}
+
+.pf-v5-c-accordion .pf-v5-c-accordion__toggle {
+    padding: 1rem !important;
+}
+
+.pf-v5-c-chip-group__list {
+    padding: 0;
+    .pf-v5-c-chip-group__list-item {
+        margin: 0;
+    }
+}

package/lib/esm/scss/index.scss

@@ -13,21 +13,21 @@
             min-width: 0;
             background-color: #ededed;
 
-            section {
-                padding: 2rem;
+            & > section.pf-v5-c-tab-content {
+                padding: 3rem;
                 background-color: #fff;
             }
         }
     }
-    .pf-c-popover {
-        .pf-c-popover__content {
-            .pf-c-popover__body {
+    .pf-v5-c-popover {
+        .pf-v5-c-popover__content {
+            .pf-v5-c-popover__body {
                 .top-content-tooltip-view-metric-label {
-                    color: var(--pf-global--primary-color--100);
+                    color: var(--pf-v5-global--primary-color--100);
                 }
             }
         }
     }
 }
 
-@import './pf4-overrides';
+@import './pf-overrides';