From 26d7befe112ed91369072aa2318f1b90808687cb Mon Sep 17 00:00:00 2001 From: Dipanshu Gupta Date: Fri, 11 Aug 2023 22:16:06 +0530 Subject: [PATCH] ISPN-15081 PF5 CSS update --- cypress/e2e/cluster-welcome.cy.js | 4 +- package-lock.json | 30 +++++++++------ package.json | 2 +- pom.xml | 4 +- src/app/About/About.css | 7 ++-- src/app/About/About.tsx | 3 +- src/app/CacheManagers/CacheTableDisplay.tsx | 2 +- src/app/Caches/CreateCache.tsx | 2 +- src/app/Caches/DetailCache.tsx | 8 +--- src/app/Caches/Entries/CacheEntries.tsx | 2 +- src/app/Caches/Query/QueryEntries.tsx | 2 +- .../ConsoleBackground/ConsoleBackground.css | 6 +-- .../ConsoleBackground/ConsoleBackground.tsx | 3 +- src/app/Common/PopoverHelp.tsx | 10 ++--- src/app/ConnectedClients/ConnectedClients.tsx | 2 +- .../GlobalStats/ClusterDistributionChart.tsx | 2 +- .../ProtoSchema/ProtobufSchemasDisplay.css | 8 ++-- src/app/Welcome/Welcome.css | 8 ++-- src/app/app.css | 38 +++++++++---------- 19 files changed, 71 insertions(+), 72 deletions(-) diff --git a/cypress/e2e/cluster-welcome.cy.js b/cypress/e2e/cluster-welcome.cy.js index 17ba9535..cd661350 100644 --- a/cypress/e2e/cluster-welcome.cy.js +++ b/cypress/e2e/cluster-welcome.cy.js @@ -58,8 +58,8 @@ describe('Welcome page', () => { //Clicks the Global statistics link and should go to Global statistics page cy.contains('Global Statistics').click(); cy.contains('Global statistics').should('be.visible'); - cy.contains('Cluster-wide statistics '); - cy.contains('Cache Manager lifecycle values '); + cy.contains('Cluster-wide statistics'); + cy.contains('Cache Manager lifecycle values'); //Clicks the Data Container link and should go to Data Container page cy.contains('Data Container').click(); diff --git a/package-lock.json b/package-lock.json index 9a53daaf..2abf1778 100644 --- a/package-lock.json +++ b/package-lock.json @@ -44,7 +44,7 @@ "copy-webpack-plugin": "^11.0.0", "css-loader": "^5.2.6", "css-minimizer-webpack-plugin": "^5.0.1", - "cypress": "^12.17.3", + "cypress": "^12.17.4", "dotenv-webpack": "^8.0.1", "eslint": "^8.46.0", "eslint-plugin-i18n-json": "^4.0.0", @@ -2243,8 +2243,7 @@ "node_modules/@types/prop-types": { "version": "15.7.5", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", - "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==", - "dev": true + "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==" }, "node_modules/@types/qs": { "version": "6.9.7", @@ -2262,7 +2261,6 @@ "version": "18.2.20", "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.20.tgz", "integrity": "sha512-WKNtmsLWJM/3D5mG4U84cysVY31ivmyw85dE84fOCk5Hx78wezB/XEjVPWl2JTZ5FkEeaTJf+VgUAUn3PE7Isw==", - "dev": true, "dependencies": { "@types/prop-types": "*", "@types/scheduler": "*", @@ -2308,8 +2306,7 @@ "node_modules/@types/scheduler": { "version": "0.16.3", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz", - "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==", - "dev": true + "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==" }, "node_modules/@types/semver": { "version": "7.5.0", @@ -4619,17 +4616,16 @@ "node_modules/csstype": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", - "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==", - "dev": true + "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==" }, "node_modules/cypress": { - "version": "12.17.3", - "resolved": "https://registry.npmjs.org/cypress/-/cypress-12.17.3.tgz", - "integrity": "sha512-/R4+xdIDjUSLYkiQfwJd630S81KIgicmQOLXotFxVXkl+eTeVO+3bHXxdi5KBh/OgC33HWN33kHX+0tQR/ZWpg==", + "version": "12.17.4", + "resolved": "https://registry.npmjs.org/cypress/-/cypress-12.17.4.tgz", + "integrity": "sha512-gAN8Pmns9MA5eCDFSDJXWKUpaL3IDd89N9TtIupjYnzLSmlpVr+ZR+vb4U/qaMp+lB6tBvAmt7504c3Z4RU5KQ==", "dev": true, "hasInstallScript": true, "dependencies": { - "@cypress/request": "^2.88.11", + "@cypress/request": "2.88.12", "@cypress/xvfb": "^1.2.4", "@types/node": "^16.18.39", "@types/sinonjs__fake-timers": "8.1.1", @@ -4664,6 +4660,7 @@ "minimist": "^1.2.8", "ospath": "^1.2.2", "pretty-bytes": "^5.6.0", + "process": "^0.11.10", "proxy-from-env": "1.0.0", "request-progress": "^3.0.0", "semver": "^7.5.3", @@ -11789,6 +11786,15 @@ "node": ">=6" } }, + "node_modules/process": { + "version": "0.11.10", + "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz", + "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==", + "dev": true, + "engines": { + "node": ">= 0.6.0" + } + }, "node_modules/process-nextick-args": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz", diff --git a/package.json b/package.json index 0cebc02a..493a8754 100644 --- a/package.json +++ b/package.json @@ -42,7 +42,7 @@ "copy-webpack-plugin": "^11.0.0", "css-loader": "^5.2.6", "css-minimizer-webpack-plugin": "^5.0.1", - "cypress": "^12.17.3", + "cypress": "^12.17.4", "dotenv-webpack": "^8.0.1", "eslint": "^8.46.0", "eslint-plugin-i18n-json": "^4.0.0", diff --git a/pom.xml b/pom.xml index 9a440346..0848076a 100644 --- a/pom.xml +++ b/pom.xml @@ -99,7 +99,7 @@ npm - install cypress@^12.17.3 --verbose + install cypress@^12.17.4 --verbose @@ -146,7 +146,7 @@ npm - install cypress@^12.17.3 --verbose + install cypress@^12.17.4 --verbose diff --git a/src/app/About/About.css b/src/app/About/About.css index 9cf0b7cd..cd058dff 100644 --- a/src/app/About/About.css +++ b/src/app/About/About.css @@ -1,5 +1,4 @@ -.about-bg { - background-image: url('!!url-loader!@app/assets/images/infinispanbg_1200.png'); - background-position: right; - background-size: 23vw 100%; +.pf-v5-c-about-modal-box { + --pf-v5-c-about-modal-box--BackgroundPosition: right; + --pf-v5-c-about-modal-box--BackgroundSize: 23vw 100%; } diff --git a/src/app/About/About.tsx b/src/app/About/About.tsx index da351159..92555e0e 100644 --- a/src/app/About/About.tsx +++ b/src/app/About/About.tsx @@ -17,6 +17,7 @@ import { TextListVariants } from '@patternfly/react-core'; import icon from '!!url-loader!@app/assets/favicons/ms-icon-310x310.png'; +import backgroundImage from '!!url-loader!@app/assets/images/infinispanbg_1200.png'; import { FacebookIcon, GithubIcon, @@ -53,7 +54,7 @@ const About = (props: { isModalOpen: boolean; closeModal: () => void }) => { brandImageSrc={icon} brandImageAlt={brandname + ' Logo'} productName={brandname} - className="about-bg" + backgroundImageSrc={backgroundImage} > diff --git a/src/app/CacheManagers/CacheTableDisplay.tsx b/src/app/CacheManagers/CacheTableDisplay.tsx index e6a6e1ca..32a54c19 100644 --- a/src/app/CacheManagers/CacheTableDisplay.tsx +++ b/src/app/CacheManagers/CacheTableDisplay.tsx @@ -35,7 +35,7 @@ import { EmptyStateHeader, EmptyStateFooter } from '@patternfly/react-core'; -import { Table /* data-codemods */, Thead, Tr, Th, Tbody, Td, IAction, ActionsColumn } from '@patternfly/react-table'; +import { Table, Thead, Tr, Th, Tbody, Td, IAction, ActionsColumn } from '@patternfly/react-table'; import { useTranslation } from 'react-i18next'; import { useCaches, useDataContainer } from '@app/services/dataContainerHooks'; import { FilterIcon, SearchIcon } from '@patternfly/react-icons'; diff --git a/src/app/Caches/CreateCache.tsx b/src/app/Caches/CreateCache.tsx index bff81931..4abf4793 100644 --- a/src/app/Caches/CreateCache.tsx +++ b/src/app/Caches/CreateCache.tsx @@ -98,7 +98,7 @@ const CreateCache = () => { {!canCreateCache && ( - + { {encodingMessageDisplay()} - {t('caches.tabs.query-values')} - } - > + {t('caches.tabs.query-values')}}> setActiveTabKey1(2)} /> diff --git a/src/app/Caches/Entries/CacheEntries.tsx b/src/app/Caches/Entries/CacheEntries.tsx index 6695a141..6237c8e3 100644 --- a/src/app/Caches/Entries/CacheEntries.tsx +++ b/src/app/Caches/Entries/CacheEntries.tsx @@ -24,7 +24,7 @@ import { EmptyStateFooter } from '@patternfly/react-core'; import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated'; -import { Table /* data-codemods */, Thead, Tr, Th, Tbody, Td, IAction, ActionsColumn } from '@patternfly/react-table'; +import { Table, Thead, Tr, Th, Tbody, Td, IAction, ActionsColumn } from '@patternfly/react-table'; import { FilterIcon, SearchIcon, PlusCircleIcon, HelpIcon } from '@patternfly/react-icons'; import { global_spacer_sm, global_spacer_md } from '@patternfly/react-tokens'; import SyntaxHighlighter from 'react-syntax-highlighter'; diff --git a/src/app/Caches/Query/QueryEntries.tsx b/src/app/Caches/Query/QueryEntries.tsx index 3a9d5b04..b89c6325 100644 --- a/src/app/Caches/Query/QueryEntries.tsx +++ b/src/app/Caches/Query/QueryEntries.tsx @@ -170,7 +170,7 @@ const QueryEntries = (props: { cacheName: string; indexed: boolean; changeTab: ( aria-label={'more-info-ickle'} onClick={(e) => e.preventDefault()} aria-describedby={'helpickle'} - className="pf-c-form__group-label-help" + className="pf-v5-c-form__group-label-help" icon={} /> diff --git a/src/app/Common/ConsoleBackground/ConsoleBackground.css b/src/app/Common/ConsoleBackground/ConsoleBackground.css index e7a509b3..d04c89f6 100644 --- a/src/app/Common/ConsoleBackground/ConsoleBackground.css +++ b/src/app/Common/ConsoleBackground/ConsoleBackground.css @@ -1,4 +1,4 @@ -.background-img { - background-position: center; - background-size: cover; +.pf-v5-c-background-image { + --pf-v5-c-background-image--BackgroundPosition: center; + --pf-v5-c-background-image--BackgroundSize: cover; } diff --git a/src/app/Common/ConsoleBackground/ConsoleBackground.tsx b/src/app/Common/ConsoleBackground/ConsoleBackground.tsx index 30324d5b..d40765f1 100644 --- a/src/app/Common/ConsoleBackground/ConsoleBackground.tsx +++ b/src/app/Common/ConsoleBackground/ConsoleBackground.tsx @@ -4,6 +4,7 @@ import lg from '!!url-loader!@app/assets/images/infinispanbg_1200.png'; import './ConsoleBackground.css'; const ConsoleBackground = () => { - return ; + return ; }; + export { ConsoleBackground }; diff --git a/src/app/Common/PopoverHelp.tsx b/src/app/Common/PopoverHelp.tsx index a664bb9a..f72a1353 100644 --- a/src/app/Common/PopoverHelp.tsx +++ b/src/app/Common/PopoverHelp.tsx @@ -1,6 +1,6 @@ -import React, {ReactNode} from 'react'; -import {Button, Flex, FlexItem, Popover, Text, TextContent} from '@patternfly/react-core'; -import {HelpIcon} from '@patternfly/react-icons'; +import React, { ReactNode } from 'react'; +import { Button, Flex, FlexItem, Popover, Text, TextContent } from '@patternfly/react-core'; +import { HelpIcon } from '@patternfly/react-icons'; /** * This component is used to add pop over helps to forms @@ -27,9 +27,7 @@ const PopoverHelp = (props: { name: string; label: string; content: string | Rea {props.text} - - {popOver} - + {popOver} ); } diff --git a/src/app/ConnectedClients/ConnectedClients.tsx b/src/app/ConnectedClients/ConnectedClients.tsx index b9d96d75..9e3c16b6 100644 --- a/src/app/ConnectedClients/ConnectedClients.tsx +++ b/src/app/ConnectedClients/ConnectedClients.tsx @@ -241,7 +241,7 @@ const ConnectedClients = () => {