feat(installation): add install feature

web/src/features/basicGen/index.tsx

@@ -10,11 +10,11 @@ import { ApiRequestBasicGen, BasicGenFormData } from "../models";
 
 import { IoSendOutline } from "react-icons/io5";
 
-import useFormHandler from "../../hooks/useFormHandler";
+import useAiChat from "../../hooks/useAiChat";
 import { basicGenMapper } from "../../utils/mapperFunctions";
 
 const BasicGen = () => {
-  const { formMethods, handleSubmit, onSubmit, request } = useFormHandler<
+  const { formMethods, handleSubmit, onSubmit, request } = useAiChat<
     BasicGenFormData,
     ApiRequestBasicGen
   >(basicGenDefaultValues);

web/src/features/bugFix/index.tsx

@@ -3,14 +3,14 @@ import { FormProvider } from "react-hook-form";
 import { IoSendOutline } from "react-icons/io5";
 import ChatBox from "../../components/internal-ui/ChatBox";
 import Input from "../../components/internal-ui/Input";
-import useFormHandler from "../../hooks/useFormHandler";
+import useAiChat from "../../hooks/useAiChat";
 import { bugFixMapper } from "../../utils/mapperFunctions";
 import useGptStore from "../../utils/store";
 import { bugFixDefaultValues, BugFixFields, Endpoints } from "../constants";
 import { ApiRequestBugFix, BugFixFormData } from "../models";
 
 const BugFix = () => {
-  const { request, handleSubmit, onSubmit, formMethods } = useFormHandler<
+  const { request, handleSubmit, onSubmit, formMethods } = useAiChat<
     BugFixFormData,
     ApiRequestBugFix
   >(bugFixDefaultValues);

web/src/features/constants.ts

@@ -2,6 +2,7 @@ import {
   BasicGenFormData,
   BugFixFormData,
   HelmFormData,
+  InstallFormData,
   TerraformArgocdFormData,
   TerraformDockerFormData,
   TerraformEc2FormData,
@@ -98,6 +99,11 @@ export enum HelmFields {
   HOST = "host",
 }
 
+export enum InstallFields {
+  OS = "os",
+  SERVICE = "service",
+}
+
 export enum UserType {
   USER = "user",
   BOT = "bot",
@@ -164,3 +170,8 @@ export const helmDefaultValues: HelmFormData = {
   targetPort: 80,
   value: "Hi",
 };
+
+export const installDefaultValues: InstallFormData = {
+  os: "",
+  service: "",
+};

web/src/features/install/index.tsx

@@ -0,0 +1,89 @@
+import { FormProvider } from "react-hook-form";
+import { Endpoints, installDefaultValues, InstallFields } from "../constants";
+import {
+  ApiRequestInstall,
+  ApiResponseDownload,
+  InstallFormData,
+} from "../models";
+import useGenerator from "../../hooks/useGenerator";
+import Input from "../../components/internal-ui/Input";
+import { useCallback, useEffect, useRef } from "react";
+
+const Install = () => {
+  const {
+    formMethods,
+    data,
+    handleSubmit,
+    onSubmit,
+    isError,
+    isSuccess,
+    status,
+    request,
+  } = useGenerator<InstallFormData, ApiRequestInstall>(
+    installDefaultValues,
+    Endpoints.POST_INSTALL
+  );
+
+  const downloadRef = useRef<HTMLAnchorElement>(null);
+
+  const downloadFile = useCallback(
+    (formData: ApiRequestInstall) => {
+      if (downloadRef.current) {
+        const response = data as ApiResponseDownload;
+        const blob = new Blob([response.data.output], {
+          type: "text/x-shellscript",
+        });
+        const url = URL.createObjectURL(blob);
+        downloadRef.current.href = url;
+        downloadRef.current.download = `Installation_${formData.os}_${formData.service}.sh`;
+        downloadRef.current.click();
+        URL.revokeObjectURL(url);
+      }
+    },
+    [isSuccess, data, downloadRef]
+  );
+
+  useEffect(() => {
+    if (isSuccess && data && request) {
+      downloadFile(request);
+    }
+  }, [request, isError, data]);
+
+  return (
+    <>
+      <FormProvider {...formMethods}>
+        <form onSubmit={(e) => handleSubmit(onSubmit)(e)}>
+          <div className="flex flex-col items-center mt-5 gap-y-4">
+            <Input
+              fieldName={InstallFields.OS}
+              label="OS"
+              placeholder="ex: ubuntu"
+            />
+            <Input
+              fieldName={InstallFields.SERVICE}
+              label="Service"
+              placeholder="terraform"
+            />
+            <button
+              type="submit"
+              className="bg-orange-600 w-32 h-12 rounded-sm mt-5"
+              disabled={status === "pending" && !data}
+            >
+              {status === "pending" ? (
+                <span className="loading loading-ring loading-lg "></span>
+              ) : (
+                <p>Generate</p>
+              )}
+            </button>
+            {isSuccess && (
+              <p className="text-green-500">Generated Successfully</p>
+            )}
+            {isError && <p className="text-red-600">Operation failed</p>}
+          </div>
+        </form>
+      </FormProvider>
+      <a ref={downloadRef} style={{ display: "none" }} />
+    </>
+  );
+};
+export default Install;

web/src/features/models.ts

@@ -149,6 +149,18 @@ export interface ApiRequestHelm {
   ];
 }
 
+export interface InstallFormData {
+  os: string;
+  service: string;
+}
+
+export interface ApiRequestInstall {
+  os: string;
+  service: string;
+}
+
 export interface ApiResponseDownload {
-  detail: [{ loc: [string, 0]; msg: string; type: string }];
+  data: {
+    output: string;
+  };
 }

web/src/hooks/useFormHandler.ts → web/src/hooks/useAiChat.ts

@@ -4,7 +4,7 @@ import { v4 as uuid } from "uuid";
 import { UserType } from "../features/constants";
 import useGptStore from "../utils/store";
 
-const useFormHandler = <T extends FieldValues, K>(
+const useAiChat = <T extends FieldValues, K>(
   defaultValues: UseFormProps<T>["defaultValues"]
 ) => {
   const [request, setRequest] = useState<K & { requestId: string }>();
@@ -21,4 +21,4 @@ const useFormHandler = <T extends FieldValues, K>(
   return { formMethods, request, handleSubmit, onSubmit };
 };
 
-export default useFormHandler;
+export default useAiChat;

web/src/hooks/useGenerator.ts

@@ -37,6 +37,7 @@ const useGenerator = <T extends FieldValues, K>(
     isSuccess,
     isError,
     status,
+    request,
     data,
   };
 };

web/src/router.tsx

@@ -11,6 +11,7 @@ import S3 from "./features/terraform/components/S3";
 import IAM from "./features/terraform/components/IAM";
 import Argocd from "./features/terraform/components/Argocd";
 import Helm from "./features/helm";
+import Install from "./features/install";
 export const router = createBrowserRouter([
   {
     path: "/",
@@ -20,6 +21,7 @@ export const router = createBrowserRouter([
       { index: true, element: <BasicGen /> },
       { path: routes.bugFix, element: <BugFix /> },
       { path: routes.helm, element: <Helm /> },
+      { path: routes.install, element: <Install /> },
       {
         path: routes.terraformTemplate,
         element: <Terraform />,

web/src/utils/formValidator.tsx

@@ -1,5 +1,9 @@
 import { RegisterOptions } from "react-hook-form";
-import { BasicGenFields, BugFixFields } from "../features/constants";
+import {
+  BasicGenFields,
+  BugFixFields,
+  InstallFields,
+} from "../features/constants";
 
 export const validateForm = (fieldName: string) => {
   let validationRules: RegisterOptions = {};
@@ -30,6 +34,8 @@ export const validateForm = (fieldName: string) => {
       break;
     case BugFixFields.VERSION:
     case BugFixFields.BUG_DESCRIPTION:
+    case InstallFields.OS:
+    case InstallFields.SERVICE:
     case BasicGenFields.INPUT:
       validationRules = {
         required: {

web/src/utils/routing.ts

@@ -1,18 +1,17 @@
-import { Endpoints } from "../features/constants";
-
 export const routes = {
   basicGen: "/",
   bugFix: "/IaC-bugfix",
   terraformTemplate: "/terraform-template",
   helm: "/helm",
+  install: "/install",
 };
 
 export const btnMappings = [
   { label: "Basic", route: routes.basicGen },
   { label: "Bug fix", route: routes.bugFix },
   { label: "Terraform template", route: routes.terraformTemplate },
   { label: "Helm Template", route: routes.helm },
-  { label: "Installation", route: Endpoints.POST_INSTALL },
+  { label: "Installation", route: routes.install },
 ];
 
 export const terraformRoutes = {