ISPN-15081 PF5 CSS update

infinispan · Sep 2, 2023 · 26d7bef · 26d7bef
1 parent 048a14b
commit 26d7bef
Show file tree

Hide file tree

Showing 19 changed files with 71 additions and 72 deletions.
diff --git 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
diff --git 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
@@ -99,7 +99,7 @@
                   <goal>npm</goal>
                 </goals>
                 <configuration>
-                  <arguments>install cypress@^12.17.3 --verbose</arguments>
+                  <arguments>install cypress@^12.17.4 --verbose</arguments>
                 </configuration>
               </execution>
               <execution>
@@ -146,7 +146,7 @@
                   <goal>npm</goal>
                 </goals>
                 <configuration>
-                  <arguments>install cypress@^12.17.3 --verbose</arguments>
+                  <arguments>install cypress@^12.17.4 --verbose</arguments>
                 </configuration>
               </execution>
               <execution>

diff --git 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
@@ -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}
     >
       <Stack>
         <StackItem style={{ paddingBottom: global_spacer_lg.value }}>

diff --git 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
@@ -98,7 +98,7 @@ const CreateCache = () => {
             </TextContent>
           </ToolbarContent>
           {!canCreateCache && (
-            <ToolbarContent style={{ paddingLeft: 0}}>
+            <ToolbarContent style={{ paddingLeft: 0 }}>
               <Alert
                 title={t('caches.setup.page-title-description', { brandname: brandname })}
                 variant={AlertVariant.info}

diff --git a/src/app/Caches/DetailCache.tsx b/src/app/Caches/DetailCache.tsx
@@ -130,13 +130,7 @@ const DetailCache = (props: { cacheName: string }) => {
           {encodingMessageDisplay()}
           <CacheEntries cacheName={cacheName} />
         </Tab>
-        <Tab
-          eventKey={13}
-          data-cy="queriesTab"
-          title={
-            <TabTitleText>{t('caches.tabs.query-values')}</TabTitleText>
-          }
-        >
+        <Tab eventKey={13} data-cy="queriesTab" title={<TabTitleText>{t('caches.tabs.query-values')}</TabTitleText>}>
           <QueryEntries cacheName={cacheName} indexed={cache?.features.indexed} changeTab={() => setActiveTabKey1(2)} />
         </Tab>
       </Tabs>

diff --git 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
@@ -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={<HelpIcon />}
             />
           </Popover>

diff --git 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
@@ -4,6 +4,7 @@ import lg from '!!url-loader!@app/assets/images/infinispanbg_1200.png';
 import './ConsoleBackground.css';
 
 const ConsoleBackground = () => {
-  return <BackgroundImage src={lg} className={'background-img'} />;
+  return <BackgroundImage src={lg} />;
 };
+
 export { ConsoleBackground };
diff --git 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
             <Text>{props.text}</Text>
           </TextContent>
         </FlexItem>
-        <FlexItem>
-          {popOver}
-        </FlexItem>
+        <FlexItem>{popOver}</FlexItem>
       </Flex>
     );
   }

diff --git a/src/app/ConnectedClients/ConnectedClients.tsx b/src/app/ConnectedClients/ConnectedClients.tsx
@@ -241,7 +241,7 @@ const ConnectedClients = () => {
         <Button
           variant="plain"
           onClick={(e) => e.preventDefault()}
-          className="pf-c-form__group-label-help"
+          className="pf-v5-c-form__group-label-help"
           icon={<InfoCircleIcon />}
         />
       </Popover>

diff --git a/src/app/GlobalStats/ClusterDistributionChart.tsx b/src/app/GlobalStats/ClusterDistributionChart.tsx
@@ -11,7 +11,7 @@ import {
   ToolbarItemVariant,
   Pagination
 } from '@patternfly/react-core';
-import { Table /* data-codemods */, Thead, Tr, Th, Tbody, Td, TableVariant } from '@patternfly/react-table';
+import { Table, Thead, Tr, Th, Tbody, Td, TableVariant } from '@patternfly/react-table';
 import {
   Chart,
   ChartAxis,

diff --git a/src/app/ProtoSchema/ProtobufSchemasDisplay.css b/src/app/ProtoSchema/ProtobufSchemasDisplay.css
@@ -1,6 +1,6 @@
 .app-prefix--m-scroll-content {
-  --pf-c-table--cell--MinWidth: var(--pf-c-table--m-truncate--cell--MinWidth);
-  --pf-c-table--cell--MaxWidth: var(--pf-c-table--m-truncate--cell--MaxWidth);
-  --pf-c-table--cell--Overflow: auto;
-  --pf-c-table--cell--WhiteSpace: nowrap;
+  --pf-v5-c-table--cell--MinWidth: var(--pf-v5-c-table--m-truncate--cell--MinWidth);
+  --pf-v5-c-table--cell--MaxWidth: var(--pf-v5-c-table--m-truncate--cell--MaxWidth);
+  --pf-v5-c-table--cell--Overflow: auto;
+  --pf-v5-c-table--cell--WhiteSpace: nowrap;
 }
diff --git a/src/app/Welcome/Welcome.css b/src/app/Welcome/Welcome.css
@@ -51,7 +51,7 @@
 }
 
 .version-text {
-  font-weight: var(--pf-global--FontWeight--bold);
+  font-weight: var(--pf-v5-global--FontWeight--bold);
   margin: 0 0 0.2rem;
 }
 
@@ -72,11 +72,11 @@
 }
 
 .card::before {
-  content: "";
+  content: '';
   position: absolute;
   width: 100%;
   height: 3px;
-  background-color: rgb(60 149 184 );
+  background-color: rgb(60 149 184);
   bottom: 0;
   left: 0;
   transform: scaleX(0); /* Initially hidden */
@@ -85,7 +85,7 @@
 
 .card:hover {
   background-color: rgb(28, 27, 27);
-/*   transform: translateY(-5px); */
+  /*   transform: translateY(-5px); */
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   cursor: pointer;
 }

diff --git a/src/app/app.css b/src/app/app.css
@@ -7,43 +7,43 @@ body,
 .caches-table {
 }
 
-.pf-c-brand {
+.pf-v5-c-brand {
 }
-.pf-c-nav {
-  /*--pf-c-nav--m-dark__item--m-current--BackgroundColor: #004B95;*/
+.pf-v5-c-nav {
+  /*--pf-v5-c-nav--m-dark__item--m-current--BackgroundColor: #004B95;*/
 }
 
 .status-label {
-  padding-bottom: var(--pf-global--spacer--sm);
+  padding-bottom: var(--pf-v5-global--spacer--sm);
 }
 
 .status-icon {
-  padding-left: var(--pf-global--spacer--md);
-  padding-right: var(--pf-global--spacer--sm);
-  padding-bottom: var(--pf-global--spacer--sm);
+  padding-left: var(--pf-v5-global--spacer--md);
+  padding-right: var(--pf-v5-global--spacer--sm);
+  padding-bottom: var(--pf-v5-global--spacer--sm);
 }
 
-.pf-c-dropdown__menu-item {
+.pf-v5-c-dropdown__menu-item {
   cursor: pointer;
 }
 
-.alert-message.pf-c-alert.pf-m-inline {
-  --pf-c-alert--BackgroundColor: var(--pf-global--BackgroundColor--100);
-  --pf-c-alert--BorderTopWidth: 0;
-  --pf-c-alert--PaddingTop: 0;
+.alert-message.pf-v5-c-alert.pf-m-inline {
+  --pf-v5-c-alert--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
+  --pf-v5-c-alert--BorderTopWidth: 0;
+  --pf-v5-c-alert--PaddingTop: 0;
 }
 
-.failed-link.pf-c-button {
-  --pf-c-button--m-link--Color: var(--pf-global--danger-color--100);
-  --pf-c-button--m-link--hover--Color: var(--pf-global--danger-color--200);
-  --pf-c-button--m-link--focus--Color: var(--pf-global--danger-color--200);
-  --pf-c-button--m-link--active--Color: var(--pf-global--danger-color--200);
+.failed-link.pf-v5-c-button {
+  --pf-v5-c-button--m-link--Color: var(--pf-v5-global--danger-color--100);
+  --pf-v5-c-button--m-link--hover--Color: var(--pf-v5-global--danger-color--200);
+  --pf-v5-c-button--m-link--focus--Color: var(--pf-v5-global--danger-color--200);
+  --pf-v5-c-button--m-link--active--Color: var(--pf-v5-global--danger-color--200);
 }
 
-.pf-c-toolbar {
+.pf-v5-c-toolbar {
   padding-bottom: 0;
 }
 
-.pf-c-table__action {
+.pf-v5-c-table__action {
   text-align: right;
 }