From 37557126f078d2ffc773fd451c119da28f93cc29 Mon Sep 17 00:00:00 2001
From: Tamir Abutbul <1tamir198@gmail.com>
Date: Sun, 7 Jan 2024 12:03:35 +0200
Subject: [PATCH] Extract modal title to components (#496)

---
 .../InstallReleaseChartModal.tsx              | 12 +++++-----
 .../InstallRepoChartModal.tsx                 |  9 ++++---
 .../InstallChartModal/InstallUpgradeTitle.tsx | 24 +++++++++++++++++++
 3 files changed, 36 insertions(+), 9 deletions(-)
 create mode 100644 frontend/src/components/modal/InstallChartModal/InstallUpgradeTitle.tsx

diff --git a/frontend/src/components/modal/InstallChartModal/InstallReleaseChartModal.tsx b/frontend/src/components/modal/InstallChartModal/InstallReleaseChartModal.tsx
index ce34868..c718afe 100644
--- a/frontend/src/components/modal/InstallChartModal/InstallReleaseChartModal.tsx
+++ b/frontend/src/components/modal/InstallChartModal/InstallReleaseChartModal.tsx
@@ -19,6 +19,7 @@ import { useDiffData } from "../../../API/shared";
 import { InstallChartModalProps } from "../../../data/types";
 import { DefinedValues } from "./DefinedValues";
 import apiService from "../../../API/apiService";
+import { InstallUpgradeTitle } from "./InstallUpgradeTitle";
 
 export const InstallReleaseChartModal = ({
   isOpen,
@@ -186,12 +187,11 @@ export const InstallReleaseChartModal = ({
         onClose();
       }}
       title={
-        <div className="font-bold">
-          {`${isUpgrade ? "Upgrade" : "Install"} `}
-          {(isUpgrade || releaseValues) && (
-            <span className="text-green-700 ">{chartName}</span>
-          )}
-        </div>
+        <InstallUpgradeTitle
+          isUpgrade={isUpgrade}
+          releaseValues={isUpgrade || releaseValues}
+          chartName={chartName}
+        />
       }
       containerClassNames="w-full text-2xl h-2/3"
       actions={[
diff --git a/frontend/src/components/modal/InstallChartModal/InstallRepoChartModal.tsx b/frontend/src/components/modal/InstallChartModal/InstallRepoChartModal.tsx
index 2ce913f..76a7289 100644
--- a/frontend/src/components/modal/InstallChartModal/InstallRepoChartModal.tsx
+++ b/frontend/src/components/modal/InstallChartModal/InstallRepoChartModal.tsx
@@ -13,6 +13,7 @@ import { useDiffData } from "../../../API/shared";
 import { InstallChartModalProps } from "../../../data/types";
 import { DefinedValues } from "./DefinedValues";
 import apiService from "../../../API/apiService";
+import { InstallUpgradeTitle } from "./InstallUpgradeTitle";
 
 export const InstallRepoChartModal = ({
   isOpen,
@@ -159,9 +160,11 @@ export const InstallRepoChartModal = ({
         onClose();
       }}
       title={
-        <div className="font-bold">
-          Install <span className="text-green-700 ">{chartName}</span>
-        </div>
+        <InstallUpgradeTitle
+          isUpgrade={false}
+          releaseValues={false}
+          chartName={chartName}
+        />
       }
       containerClassNames="w-full text-2xl h-2/3"
       actions={[
diff --git a/frontend/src/components/modal/InstallChartModal/InstallUpgradeTitle.tsx b/frontend/src/components/modal/InstallChartModal/InstallUpgradeTitle.tsx
new file mode 100644
index 0000000..397d6ab
--- /dev/null
+++ b/frontend/src/components/modal/InstallChartModal/InstallUpgradeTitle.tsx
@@ -0,0 +1,24 @@
+import { FC } from "react";
+
+interface InstallUpgradeProps {
+  isUpgrade: boolean;
+  releaseValues: boolean;
+  chartName: string;
+}
+
+export const InstallUpgradeTitle: FC<InstallUpgradeProps> = ({
+  isUpgrade,
+  releaseValues,
+  chartName,
+}) => {
+  const text = isUpgrade ? "Upgrade" : "Install";
+
+  return (
+    <div className="font-bold">
+      {`${text}`}
+      {(isUpgrade || releaseValues) && (
+        <span className="text-green-700">{chartName}</span>
+      )}
+    </div>
+  );
+};