bump dependencies and migrate to ui5v2

kyma-project · Nov 22, 2024 · 719e0e0 · 719e0e0
1 parent de47eb3
commit 719e0e0
Show file tree

Hide file tree

Showing 31 changed files with 573 additions and 751 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -4,21 +4,21 @@
   "private": true,
   "homepage": "https://kyma-project.github.io/price-calculator",
   "dependencies": {
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^13.5.0",
-    "@types/jest": "^29.5.1",
-    "@types/node": "^20.1.4",
-    "@types/react": "^18.2.6",
-    "@types/react-dom": "^18.2.4",
-    "@ui5/webcomponents": "^1.13.2",
-    "@ui5/webcomponents-fiori": "^1.13.2",
-    "@ui5/webcomponents-icons": "^1.12.2",
-    "@ui5/webcomponents-react": "^1.15.1",
-    "@ui5/webcomponents-react-charts": "^1.15.0",
-    "react": "^18.2.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/jest": "^29.5.14",
+    "@types/node": "^22.9.1",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@ui5/webcomponents": "^2.4.0",
+    "@ui5/webcomponents-fiori": "^2.4.0",
+    "@ui5/webcomponents-icons": "^2.4.0",
+    "@ui5/webcomponents-react": "^2.4.0",
+    "@ui5/webcomponents-react-charts": "^2.4.0",
+    "react": "^18.3.1",
     "react-csv": "^2.2.2",
-    "react-dom": "^18.2.0",
+    "react-dom": "^18.3.1",
     "react-scripts": "5.0.1",
     "recoil": "^0.7.7",
     "xlsx": "^0.19.3"
@@ -52,9 +52,9 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@types/react-csv": "^1.1.3",
-    "gh-pages": "^5.0.0",
-    "prettier": "^2.8.8",
-    "typescript": "^5.0.1"
+    "@types/react-csv": "^1.1.10",
+    "gh-pages": "^6.2.0",
+    "prettier": "^3.3.3",
+    "typescript": "^5.6.3"
   }
 }
diff --git a/src/App.tsx b/src/App.tsx
@@ -10,8 +10,8 @@ export default function App() {
 
   return (
     <div className="App">
-      <Navbar/>
-      <MainContentContainer/>
+      <Navbar />
+      <MainContentContainer />
     </div>
   );
 }
diff --git a/src/calculatorFunctions/baseConfigCosts/calculateBaseConfigCosts.test.ts b/src/calculatorFunctions/baseConfigCosts/calculateBaseConfigCosts.test.ts
@@ -9,7 +9,7 @@ test('costs of minAutoscaler', () => {
     timeConsumption,
     vmMultiplier,
     minAutoscaler,
-    machineTypeFactor
+    machineTypeFactor,
   });
 
   expect(baseConfigCosts).toBe(2833);

diff --git a/src/calculatorFunctions/baseConfigCosts/calculateBaseConfigCosts.ts b/src/calculatorFunctions/baseConfigCosts/calculateBaseConfigCosts.ts
@@ -8,13 +8,15 @@ interface Props {
 }
 
 export default function calculateBaseConfigCosts(props: Props): number {
-  const { timeConsumption, minAutoscaler, vmMultiplier, machineTypeFactor } = props;
+  const { timeConsumption, minAutoscaler, vmMultiplier, machineTypeFactor } =
+    props;
 
   const PPU: number = config.baseConfig.PricePerUnit;
   const BaseStorageEventsPPU: number =
     config.baseConfig.BaseStorageEventsPricePerUnit;
 
   return (
-    minAutoscaler * timeConsumption * PPU * vmMultiplier * machineTypeFactor + BaseStorageEventsPPU
+    minAutoscaler * timeConsumption * PPU * vmMultiplier * machineTypeFactor +
+    BaseStorageEventsPPU
   );
 }
diff --git a/src/calculatorFunctions/storageCosts/calculateStorageCosts.test.ts b/src/calculatorFunctions/storageCosts/calculateStorageCosts.test.ts
@@ -5,7 +5,11 @@ test('total costs', () => {
   const premiumGBQuantity = 1056;
   const timeConsumption = 516;
 
-  const nodeCosts = calculateStorageCosts({ GBQuantity, premiumGBQuantity, timeConsumption });
+  const nodeCosts = calculateStorageCosts({
+    GBQuantity,
+    premiumGBQuantity,
+    timeConsumption,
+  });
 
   expect(nodeCosts).toBe(1229.8);
 });
diff --git a/src/calculatorFunctions/storageCosts/calculateStorageCosts.ts b/src/calculatorFunctions/storageCosts/calculateStorageCosts.ts
@@ -15,5 +15,10 @@ export default function calculateStorageCosts(props: Props): number {
   const premiumPPUdivider: number = config.PremiumStorage.PricePerUnitDivider;
   const premiumPPUdivider2: number = config.PremiumStorage.PricePerUnitDivider2;
 
-  return ((PPU / PPUdivider / PPUdivider2) * timeConsumption * GBQuantity) + ((premiumPPU / premiumPPUdivider / premiumPPUdivider2) * timeConsumption * premiumGBQuantity);
+  return (
+    (PPU / PPUdivider / PPUdivider2) * timeConsumption * GBQuantity +
+    (premiumPPU / premiumPPUdivider / premiumPPUdivider2) *
+      timeConsumption *
+      premiumGBQuantity
+  );
 }
diff --git a/src/calculatorFunctions/totalCosts/calculateTotalCosts.test.ts b/src/calculatorFunctions/totalCosts/calculateTotalCosts.test.ts
@@ -19,15 +19,19 @@ test('total costs', () => {
     timeConsumption,
     vmMultiplier,
     minAutoscaler,
-    machineTypeFactor
+    machineTypeFactor,
+  });
+  const storageCosts = calculateStorageCosts({
+    GBQuantity,
+    premiumGBQuantity,
+    timeConsumption,
   });
-  const storageCosts = calculateStorageCosts({ GBQuantity, premiumGBQuantity, timeConsumption });
 
   const totalCosts = calculateTotalCosts({
     baseConfigCosts,
     storageCosts,
     additionalCosts,
-    conversionRatio
+    conversionRatio,
   });
 
   expect(totalCosts.CU).toBe(3701);

diff --git a/src/calculatorFunctions/totalCosts/calculateTotalCosts.ts b/src/calculatorFunctions/totalCosts/calculateTotalCosts.ts
@@ -2,16 +2,17 @@ interface Props {
   baseConfigCosts: number;
   storageCosts: number;
   additionalCosts: number;
-  conversionRatio:number;
+  conversionRatio: number;
 }
 
 interface Costs {
   CU: number;
   CC: number;
 }
 
-export default function calculateTotalCosts(props: Props) : Costs {
-  const { baseConfigCosts, storageCosts, additionalCosts, conversionRatio} = props;
+export default function calculateTotalCosts(props: Props): Costs {
+  const { baseConfigCosts, storageCosts, additionalCosts, conversionRatio } =
+    props;
   const costInCU = baseConfigCosts + storageCosts + additionalCosts;
-  return { CU: costInCU, CC: costInCU * conversionRatio};
+  return { CU: costInCU, CC: costInCU * conversionRatio };
 }
diff --git a/src/components/CostWizard/CostWizard.css b/src/components/CostWizard/CostWizard.css
@@ -1,5 +1,6 @@
 #CostWizard {
   height: 600px;
+  overflow-x: hidden;
 }
 
 .ButtonContainer {

diff --git a/src/components/CostWizard/Functions/exportCSV.ts b/src/components/CostWizard/Functions/exportCSV.ts
@@ -25,34 +25,34 @@ export default function exportCSV(props: Props) {
     totalCosts,
   } = props;
 
-    const csvData = [
-      ['Base Configuration'],
-      ['Virtual Machine Size', baseVMSize],
-      ['Autoscaler Min', baseMinAutoscaler],
-      ['Time Consumption', baseTime],
-      [''],
-      ['Storage'],
-      ['Additional Storage', storageQuantity],
-      ['Time Consumption', storageTime],
-      [''],
-      ['Base Configuration costs', roundDecimals(baseCosts, true) + ' CU'],
-      ['Storage costs', roundDecimals(storageCosts, true) + ' CU'],
-      ['Additional costs', roundDecimals(additionalCosts, true) + ' CU'],
-      ['Total costs', roundDecimals(totalCosts, true) + ' CU'],
-    ];
+  const csvData = [
+    ['Base Configuration'],
+    ['Virtual Machine Size', baseVMSize],
+    ['Autoscaler Min', baseMinAutoscaler],
+    ['Time Consumption', baseTime],
+    [''],
+    ['Storage'],
+    ['Additional Storage', storageQuantity],
+    ['Time Consumption', storageTime],
+    [''],
+    ['Base Configuration costs', roundDecimals(baseCosts, true) + ' CU'],
+    ['Storage costs', roundDecimals(storageCosts, true) + ' CU'],
+    ['Additional costs', roundDecimals(additionalCosts, true) + ' CU'],
+    ['Total costs', roundDecimals(totalCosts, true) + ' CU'],
+  ];
 
-    const csvString = csvData.map(row => row.join(': ')).join('\n');
-    const blob = new Blob([csvString], { type: 'text/csv;charset=utf-8;' });
-    const url = URL.createObjectURL(blob);
+  const csvString = csvData.map((row) => row.join(': ')).join('\n');
+  const blob = new Blob([csvString], { type: 'text/csv;charset=utf-8;' });
+  const url = URL.createObjectURL(blob);
 
-    const link = document.createElement('a');
-    link.href = url;
-    link.setAttribute('download', 'Kyma-Price-Calculations.csv');
-    link.style.display = 'none';
+  const link = document.createElement('a');
+  link.href = url;
+  link.setAttribute('download', 'Kyma-Price-Calculations.csv');
+  link.style.display = 'none';
 
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
 
-    URL.revokeObjectURL(url);
+  URL.revokeObjectURL(url);
 }
diff --git a/src/components/CostWizard/Functions/exportXLSX.ts b/src/components/CostWizard/Functions/exportXLSX.ts
@@ -26,21 +26,21 @@ export default function exportCSV(props: Props) {
     totalCosts,
   } = props;
 
-    const dataArray = [
-      ['Base Configuration'],
-      ['Virtual Machine Size', baseVMSize],
-      ['Autoscaler Min', baseMinAutoscaler],
-      ['Time Consumption', baseTime],
-      [''],
-      ['Storage'],
-      ['Additional Storage', storageQuantity],
-      ['Time Consumption', storageTime],
-      [''],
-      ['Base Configuration costs', roundDecimals(baseCosts, true) + ' CU'],
-      ['Storage costs', roundDecimals(storageCosts, true) + ' CU'],
-      ['Additional costs', roundDecimals(additionalCosts, true) + ' CU'],
-      ['Total costs', roundDecimals(totalCosts, true) + ' CU'],
-    ];
+  const dataArray = [
+    ['Base Configuration'],
+    ['Virtual Machine Size', baseVMSize],
+    ['Autoscaler Min', baseMinAutoscaler],
+    ['Time Consumption', baseTime],
+    [''],
+    ['Storage'],
+    ['Additional Storage', storageQuantity],
+    ['Time Consumption', storageTime],
+    [''],
+    ['Base Configuration costs', roundDecimals(baseCosts, true) + ' CU'],
+    ['Storage costs', roundDecimals(storageCosts, true) + ' CU'],
+    ['Additional costs', roundDecimals(additionalCosts, true) + ' CU'],
+    ['Total costs', roundDecimals(totalCosts, true) + ' CU'],
+  ];
   const worksheet: WorkSheet = utils.aoa_to_sheet(dataArray);
   const workbook: WorkBook = utils.book_new();
   utils.book_append_sheet(workbook, worksheet, 'Sheet 1');

diff --git a/src/components/CostWizard/WizardSteps/AdditionalConfig.tsx b/src/components/CostWizard/WizardSteps/AdditionalConfig.tsx
@@ -2,25 +2,25 @@ import React from 'react';
 import { Title, WizardStep } from '@ui5/webcomponents-react';
 import InfoField from '../common/InfoField';
 import PreviousStepButton from '../Buttons/PreviousStepButton';
-import XlsxDownloadButton from '../Buttons/XlsxDownloadButton'
+import XlsxDownloadButton from '../Buttons/XlsxDownloadButton';
 import CSVDownloadButton from '../Buttons/CSVDownloadButton';
 import ApplyConversionRate from '../../UserInputs/additionalConfig/applyConversionRate';
 
 export default function NodeStep() {
   return (
     <WizardStep disabled titleText="Additional Configuration">
-      <Title wrappingType="Normal" level="H2">
+      <Title wrappingType="Normal" level="H2" size="H2">
         3. Additional Configuration
       </Title>
       <div className="StepContent">
         <InfoField info="The 'conversion rate' will help you to calculate eventual discounts." />
         <ApplyConversionRate />
       </div>
       <div className="ButtonContainer">
-        <PreviousStepButton/>
-        <div className='DownloadButtonContainer'>
-        <CSVDownloadButton/>
-        <XlsxDownloadButton />
+        <PreviousStepButton />
+        <div className="DownloadButtonContainer">
+          <CSVDownloadButton />
+          <XlsxDownloadButton />
         </div>
       </div>
     </WizardStep>

diff --git a/src/components/CostWizard/WizardSteps/BaseConfigStep.tsx b/src/components/CostWizard/WizardSteps/BaseConfigStep.tsx
@@ -9,7 +9,7 @@ import MachineTypeSelect from '../../UserInputs/baseConfig/MachineTypeSelect';
 export default function BaseConfigStep() {
   return (
     <WizardStep selected titleText="Base Configuration">
-      <Title wrappingType="Normal" level="H2">
+      <Title wrappingType="Normal" level="H2" size="H2">
         1. Choose the Base Configuration
       </Title>
       <div className="StepContent">

diff --git a/src/components/CostWizard/WizardSteps/StorageStep.tsx b/src/components/CostWizard/WizardSteps/StorageStep.tsx
@@ -8,7 +8,7 @@ import PremiumGBQuantyInputField from '../../UserInputs/storage/PremiumGBQuantyI
 export default function StorageStep() {
   return (
     <WizardStep disabled titleText="Additional Storage">
-      <Title wrappingType="Normal" level="H2">
+      <Title wrappingType="Normal" level="H2" size="H2">
         2. Additional storage for the Kyma cluster
       </Title>
       <div className="StepContent">

diff --git a/src/components/CostWizard/common/HeaderWithInfo.tsx b/src/components/CostWizard/common/HeaderWithInfo.tsx
@@ -12,7 +12,9 @@ export default function HeaderWithInfo(props: Props) {
 
   return (
     <div className="HeaderWithInfo wizard-subheader">
-      <Title level="H5">{header}</Title>
+      <Title level="H5" size="H5">
+        {header}
+      </Title>
       <Text>({info})</Text>
     </div>
   );

diff --git a/src/components/Navigation/Navbar.css b/src/components/Navigation/Navbar.css
@@ -2,6 +2,7 @@ ui5-shellbar::part(root) {
   padding-left: 0.5rem;
   min-height: 7.5vh;
   border-bottom: 2.5px solid rgb(41, 114, 234);
+  background-color: white;
   position: fixed;
   top: 0;
   left: 0;

diff --git a/src/components/Navigation/Navbar.tsx b/src/components/Navigation/Navbar.tsx
@@ -8,7 +8,6 @@ export default function Navbar() {
       logo={<img alt="Kyma Logo" src={require('../../assets/kyma.png')} />}
       primaryTitle="SAP Business Technology Platform, Kyma runtime"
       secondaryTitle="Cost Estimator"
-      waitForDefine={true}
     />
   );
 }
diff --git a/src/components/PageLayout/DetailsTable.css b/src/components/PageLayout/DetailsTable.css
@@ -2,6 +2,15 @@
   margin-top: 7.5vh;
 }
 
+#module-sizing-like {
+  margin: 0 5px;
+}
+
+ui5-table-header-row,
+ui5-table-row {
+  padding: 0 20px;
+}
+
 @media (max-width: 960px) {
   #DetailsTable {
     margin-top: 40px;