Various fixes

project-koku · Jun 3, 2023 · faa59da · faa59da
1 parent c1be859
commit faa59da
Show file tree

Hide file tree

Showing 20 changed files with 63 additions and 62 deletions.
diff --git a/fec.config.js b/fec.config.js
@@ -36,9 +36,9 @@ module.exports = {
   debug: true,
   interceptChromeConfig: false, // Change to false after your app is registered in configuration files
   proxyVerbose: true,
-  // sassPrefix: `.${moduleName}`,
-  sassPrefix: 'body', // For PF v5 testing only
-  bundlePfModules: true, // For PF v5 testing only
+  sassPrefix: `.${moduleName}`,
+  // sassPrefix: 'body', // For PF v5 testing only
+  // bundlePfModules: true, // For PF v5 testing only
   stats,
   standalone: process.env.LOCAL_API_PORT ? true : false,
   useCache: true,

diff --git a/src/appEntry.tsx b/src/appEntry.tsx
@@ -13,7 +13,6 @@ import { configureStore } from './store';
 
 // Todo: Uncomment for use with non-shared PatternFly packages
 require.resolve('@patternfly/patternfly/patternfly.css');
-require.resolve('@patternfly/patternfly/patternfly-base.css');
 require.resolve('@patternfly/patternfly/patternfly-addons.css');
 
 import './styles/global.css';

diff --git a/src/components/drawers/commonDrawer/commonDrawer.tsx b/src/components/drawers/commonDrawer/commonDrawer.tsx
@@ -57,7 +57,9 @@ class CommonDrawerBase extends React.Component<CommonDrawerProps> {
     return (
       <Drawer className="drawerOverride" isExpanded={isExpanded} onExpand={this.handleExpand}>
         <DrawerContent panelContent={this.getPanelContent()}>
-          <DrawerContentBody className="pf-u-display-flex pf-u-flex-direction-column">{children}</DrawerContentBody>
+          <DrawerContentBody className="pf-v5-u-display-flex pf-v5-u-flex-direction-column">
+            {children}
+          </DrawerContentBody>
         </DrawerContent>
       </Drawer>
     );

diff --git a/src/routes/components/export/exportModal.tsx b/src/routes/components/export/exportModal.tsx
@@ -239,7 +239,7 @@ export class ExportModalBase extends React.Component<ExportModalProps, ExportMod
                     onChange={this.handleNameChange}
                     validated={validated}
                   />
-                  {helpText && (
+                  {validated === 'error' && (
                     <HelperText>
                       <HelperTextItem variant="error">{intl.formatMessage(helpText)}</HelperTextItem>
                     </HelperText>

diff --git a/src/routes/costModels/components/inputs/rateInput.tsx b/src/routes/costModels/components/inputs/rateInput.tsx
@@ -72,13 +72,13 @@ const RateInputBase: React.FC<RateInputBaseProps> = ({
             onKeyDown={handleOnKeyDown}
             validated={validated}
           />
-          {helpText !== null && typeof helpText === 'object' && (
-            <HelperText>
-              <HelperTextItem variant="error">{intl.formatMessage(helpText)}</HelperTextItem>
-            </HelperText>
-          )}
         </InputGroupItem>
       </InputGroup>
+      {validated === 'error' && typeof helpText === 'object' && (
+        <HelperText>
+          <HelperTextItem variant="error">{intl.formatMessage(helpText)}</HelperTextItem>
+        </HelperText>
+      )}
     </FormGroup>
   );
 };

diff --git a/src/routes/costModels/components/inputs/selector.tsx b/src/routes/costModels/components/inputs/selector.tsx
@@ -99,9 +99,9 @@ const SelectorBase: React.FC<SelectorProps> = ({
         menuAppendTo={appendMenuTo}
         isOpen={isOpen}
         onToggle={() => setIsOpen(!isOpen)}
-        onSelect={(event: React.MouseEvent, sel: SelectOptionObject) => {
+        onSelect={(event: React.MouseEvent, sel: SelectorOption) => {
           setSelection(sel);
-          onChange(null, sel.toString());
+          onChange(null, sel.value);
           setIsOpen(false);
         }}
         selections={selection}
@@ -111,7 +111,7 @@ const SelectorBase: React.FC<SelectorProps> = ({
           <SelectOption key={`${opt.value}`} value={opt} description={opt.description} />
         ))}
       </Select>
-      {helpText !== null && typeof helpText === 'object' && (
+      {isInvalid && typeof helpText === 'object' && (
         <HelperText>
           <HelperTextItem variant="error">{intl.formatMessage(helpText)}</HelperTextItem>
         </HelperText>

diff --git a/src/routes/costModels/components/inputs/simpleInput.tsx b/src/routes/costModels/components/inputs/simpleInput.tsx
@@ -45,7 +45,7 @@ const SimpleInputBase: React.FC<SimpleInputProps> = ({
         isRequired={isRequired}
         placeholder={placeholder}
       />
-      {helpText !== null && typeof helpText === 'object' && (
+      {validated === 'error' && typeof helpText === 'object' && (
         <HelperText>
           <HelperTextItem variant="error">{intl.formatMessage(helpText)}</HelperTextItem>
         </HelperText>

diff --git a/src/routes/costModels/costModel/updateMarkupDialog.tsx b/src/routes/costModels/costModel/updateMarkupDialog.tsx
@@ -212,18 +212,18 @@ class UpdateMarkupDialogBase extends React.Component<UpdateMarkupDialogProps, Up
                             validated={validated}
                             value={this.state.markup}
                           />
-                          {helpText && (
-                            <HelperText>
-                              <HelperTextItem variant="error">{intl.formatMessage(helpText)}</HelperTextItem>
-                            </HelperText>
-                          )}
                         </InputGroupItem>
                         <InputGroupItem isBox>
                           <InputGroupText style={styles.percent}>
                             {intl.formatMessage(messages.percentSymbol)}
                           </InputGroupText>
                         </InputGroupItem>
                       </InputGroup>
+                      {validated === 'error' && (
+                        <HelperText>
+                          <HelperTextItem variant="error">{intl.formatMessage(helpText)}</HelperTextItem>
+                        </HelperText>
+                      )}
                     </FormGroup>
                   </Form>
                 </FlexItem>

diff --git a/src/routes/costModels/costModelWizard/costModelWizard.tsx b/src/routes/costModels/costModelWizard/costModelWizard.tsx
@@ -438,11 +438,11 @@ class CostModelWizardBase extends React.Component<CostModelWizardProps, CostMode
             loading: this.state.loading,
             metricsHash,
             onClose: () => this.setState({ ...this.defaultState }, this.props.closeWizard),
-            onCurrencyChange: value =>
+            onCurrencyChange: (_evt, value) =>
               this.setState({ currencyUnits: value, tiers: updateTiersCurrency(this.state.tiers, value) }),
-            onDescChange: value => this.setState({ description: value }),
-            onFilterChange: value => this.setState({ filterName: value }),
-            onNameChange: value => this.setState({ name: value, dirtyName: true }),
+            onDescChange: (_evt, value) => this.setState({ description: value }),
+            onFilterChange: (_evt, value) => this.setState({ filterName: value }),
+            onNameChange: (_evt, value) => this.setState({ name: value, dirtyName: true }),
             onPageChange: (_evt, page) => this.setState({ page }),
             onPerPageChange: (_evt, perPage) => this.setState({ page: 1, perPage }),
             onSourceSelect: (rowId, isSelected) => {
@@ -465,7 +465,7 @@ class CostModelWizardBase extends React.Component<CostModelWizardProps, CostMode
               };
               return this.setState({ checked: newState });
             },
-            onTypeChange: value => this.setState({ type: value, dataFetched: false, loading: false }),
+            onTypeChange: (_evt, value) => this.setState({ type: value, dataFetched: false, loading: false }),
             page: this.state.page,
             priceListPagination: {
               page: this.state.priceListPagination.page,

diff --git a/src/routes/costModels/costModelWizard/generalInformation.tsx b/src/routes/costModels/costModelWizard/generalInformation.tsx
@@ -101,7 +101,7 @@ class GeneralInformation extends React.Component<GeneralInformationProps, any> {
                     value={name}
                     onChange={onNameChange}
                   />
-                  {nameErrors(name) && (
+                  {dirtyName && nameErrors(name) && (
                     <HelperText>
                       <HelperTextItem variant="error">{intl.formatMessage(nameErrors(name))}</HelperTextItem>
                     </HelperText>

diff --git a/src/routes/costModels/costModelWizard/markup.tsx b/src/routes/costModels/costModelWizard/markup.tsx
@@ -139,18 +139,18 @@ class MarkupWithDistributionBase extends React.Component<MarkupWithDistributionP
                                 validated={validated}
                                 value={markup}
                               />
-                              {helpText && (
-                                <HelperText>
-                                  <HelperTextItem variant="error">{intl.formatMessage(helpText)}</HelperTextItem>
-                                </HelperText>
-                              )}
                             </InputGroupItem>
                             <InputGroupItem isBox>
                               <InputGroupText style={costCalcStyles.percent}>
                                 {intl.formatMessage(messages.percentSymbol)}
                               </InputGroupText>
                             </InputGroupItem>
                           </InputGroup>
+                          {validated === 'error' && (
+                            <HelperText>
+                              <HelperTextItem variant="error">{intl.formatMessage(helpText)}</HelperTextItem>
+                            </HelperText>
+                          )}
                         </FormGroup>
                       </Form>
                     </FlexItem>

diff --git a/src/routes/settings/costModels/components/inputs/rateInput.tsx b/src/routes/settings/costModels/components/inputs/rateInput.tsx
@@ -72,13 +72,13 @@ const RateInputBase: React.FC<RateInputBaseProps> = ({
             onKeyDown={handleOnKeyDown}
             validated={validated}
           />
-          {helpText !== null && typeof helpText === 'object' && (
-            <HelperText>
-              <HelperTextItem variant="error">{intl.formatMessage(helpText)}</HelperTextItem>
-            </HelperText>
-          )}
         </InputGroupItem>
       </InputGroup>
+      {validated === 'error' && typeof helpText === 'object' && (
+        <HelperText>
+          <HelperTextItem variant="error">{intl.formatMessage(helpText)}</HelperTextItem>
+        </HelperText>
+      )}
     </FormGroup>
   );
 };

diff --git a/src/routes/settings/costModels/components/inputs/selector.tsx b/src/routes/settings/costModels/components/inputs/selector.tsx
@@ -99,9 +99,9 @@ const SelectorBase: React.FC<SelectorProps> = ({
         menuAppendTo={appendMenuTo}
         isOpen={isOpen}
         onToggle={() => setIsOpen(!isOpen)}
-        onSelect={(e, sel: SelectOptionObject) => {
+        onSelect={(e, sel: SelectorOption) => {
           setSelection(sel);
-          onChange(null, sel.toString());
+          onChange(null, sel.value);
           setIsOpen(false);
         }}
         selections={selection}
@@ -111,7 +111,7 @@ const SelectorBase: React.FC<SelectorProps> = ({
           <SelectOption key={`${opt.value}`} value={opt} description={opt.description} />
         ))}
       </Select>
-      {helpText !== null && typeof helpText === 'object' && (
+      {isInvalid && typeof helpText === 'object' && (
         <HelperText>
           <HelperTextItem variant="error">{intl.formatMessage(helpText)}</HelperTextItem>
         </HelperText>

diff --git a/src/routes/settings/costModels/components/inputs/simpleInput.tsx b/src/routes/settings/costModels/components/inputs/simpleInput.tsx
@@ -46,7 +46,7 @@ const SimpleInputBase: React.FC<SimpleInputProps> = ({
         isRequired={isRequired}
         placeholder={placeholder}
       />
-      {helpText !== null && typeof helpText === 'object' && (
+      {validated === 'error' && typeof helpText === 'object' && (
         <HelperText>
           <HelperTextItem variant="error">{intl.formatMessage(helpText)}</HelperTextItem>
         </HelperText>

diff --git a/src/routes/settings/costModels/costModel/updateMarkupDialog.tsx b/src/routes/settings/costModels/costModel/updateMarkupDialog.tsx
@@ -212,18 +212,18 @@ class UpdateMarkupDialogBase extends React.Component<UpdateMarkupDialogProps, Up
                             validated={validated}
                             value={this.state.markup}
                           />
-                          {helpText && (
-                            <HelperText>
-                              <HelperTextItem variant="error">{intl.formatMessage(helpText)}</HelperTextItem>
-                            </HelperText>
-                          )}
                         </InputGroupItem>
                         <InputGroupItem isBox>
                           <InputGroupText style={styles.percent}>
                             {intl.formatMessage(messages.percentSymbol)}
                           </InputGroupText>
                         </InputGroupItem>
                       </InputGroup>
+                      {validated === 'error' && (
+                        <HelperText>
+                          <HelperTextItem variant="error">{intl.formatMessage(helpText)}</HelperTextItem>
+                        </HelperText>
+                      )}
                     </FormGroup>
                   </Form>
                 </FlexItem>

diff --git a/src/routes/settings/costModels/costModelWizard/costModelWizard.tsx b/src/routes/settings/costModels/costModelWizard/costModelWizard.tsx
@@ -438,11 +438,11 @@ class CostModelWizardBase extends React.Component<CostModelWizardProps, CostMode
             loading: this.state.loading,
             metricsHash,
             onClose: () => this.setState({ ...this.defaultState }, this.props.closeWizard),
-            onCurrencyChange: value =>
+            onCurrencyChange: (_evt, value) =>
               this.setState({ currencyUnits: value, tiers: updateTiersCurrency(this.state.tiers, value) }),
-            onDescChange: value => this.setState({ description: value }),
-            onFilterChange: value => this.setState({ filterName: value }),
-            onNameChange: value => this.setState({ name: value, dirtyName: true }),
+            onDescChange: (_evt, value) => this.setState({ description: value }),
+            onFilterChange: (_evt, value) => this.setState({ filterName: value }),
+            onNameChange: (_evt, value) => this.setState({ name: value, dirtyName: true }),
             onPageChange: (_evt, page) => this.setState({ page }),
             onPerPageChange: (_evt, perPage) => this.setState({ page: 1, perPage }),
             onSourceSelect: (rowId, isSelected) => {
@@ -465,7 +465,7 @@ class CostModelWizardBase extends React.Component<CostModelWizardProps, CostMode
               };
               return this.setState({ checked: newState });
             },
-            onTypeChange: value => this.setState({ type: value, dataFetched: false, loading: false }),
+            onTypeChange: (_evt, value) => this.setState({ type: value, dataFetched: false, loading: false }),
             page: this.state.page,
             priceListPagination: {
               page: this.state.priceListPagination.page,

diff --git a/src/routes/settings/costModels/costModelWizard/generalInformation.tsx b/src/routes/settings/costModels/costModelWizard/generalInformation.tsx
@@ -101,7 +101,7 @@ class GeneralInformation extends React.Component<GeneralInformationProps, any> {
                     value={name}
                     onChange={onNameChange}
                   />
-                  {nameErrors(name) && (
+                  {dirtyName && nameErrors(name) && (
                     <HelperText>
                       <HelperTextItem variant="error">{intl.formatMessage(nameErrors(name))}</HelperTextItem>
                     </HelperText>

diff --git a/src/routes/settings/costModels/costModelWizard/markup.tsx b/src/routes/settings/costModels/costModelWizard/markup.tsx
@@ -139,18 +139,18 @@ class MarkupWithDistributionBase extends React.Component<MarkupWithDistributionP
                                 validated={validated}
                                 value={markup}
                               />
-                              {helpText && (
-                                <HelperText>
-                                  <HelperTextItem variant="error">{intl.formatMessage(helpText)}</HelperTextItem>
-                                </HelperText>
-                              )}
                             </InputGroupItem>
                             <InputGroupItem isBox>
                               <InputGroupText style={costCalcStyles.percent}>
                                 {intl.formatMessage(messages.percentSymbol)}
                               </InputGroupText>
                             </InputGroupItem>
                           </InputGroup>
+                          {validated === 'error' && (
+                            <HelperText>
+                              <HelperTextItem variant="error">{intl.formatMessage(helpText)}</HelperTextItem>
+                            </HelperText>
+                          )}
                         </FormGroup>
                       </Form>
                     </FlexItem>

diff --git a/src/styles/global.css b/src/styles/global.css
@@ -8,8 +8,8 @@ body {
   display: flex;
 }
 
-.pf-l-grid > *,
-.pf-l-grid .pf-l-grid__item {
+.pf-v5-l-grid > *,
+.pf-v5-l-grid .pf-v5-l-grid__item {
   min-height: 0;
   min-width: 0;
 }

diff --git a/src/styles/revert.css b/src/styles/revert.css
@@ -2,9 +2,9 @@
 /* https://developer.mozilla.org/en-US/docs/Web/CSS/revert */
 [class*="pf-v5-c"],
 [class*="pf-v5-c"] *,
-[class*="pf-l"],
-[class*="pf-l"] *,
-[class*="pf-u"],
-[class*="pf-u"] * {
+[class*="pf-v5-l"],
+[class*="pf-v5-l"] *,
+[class*="pf-v5-u"],
+[class*="pf-v5-u"] * {
   all: revert;
 }