chore: improve integration wizard

Author: moshloop

src/components/Integrations/Add/steps/MissionControlRegistryOptions.tsx

@@ -34,7 +34,7 @@ export default function MissionControlRegistryOptions({
   onBack,
   selectedOption,
   footerClassName = "bg-gray-100 p-4",
-  onSuccess = () => { }
+  onSuccess = () => {}
 }: TopologyResourceFormProps) {
   const { height } = useWindowSize();
   var lines = 6;
@@ -47,8 +47,11 @@ export default function MissionControlRegistryOptions({
       <Formik
         initialValues={{
           id: "",
-          name: selectedOption,
+          name: selectedOption.name,
           namespace: "mission-control",
+          createNamespace: true,
+          createRepository: true,
+
           interval: "30m",
           labels: {}
         }}
@@ -61,13 +64,10 @@ export default function MissionControlRegistryOptions({
             onSubmit={handleSubmit}
             className="flex flex-col flex-1 h-full justify-between"
           >
-
             <div className="flex flex-col gap-4 p-4 overflow-y-auto mb-auto h-full flex-1">
               {selectedOption.dependencies &&
                 selectedOption.dependencies.length > 0 && (
-                  <Admonition
-                    text={selectedOption.dependencies[0]}
-                  />
+                  <Admonition text={selectedOption.dependencies[0]} />
                 )}
               <FormikTextInput
                 label="Namespace"
@@ -89,7 +89,6 @@ export default function MissionControlRegistryOptions({
                 name="createRepository"
               />
 
-
               <FormikCodeEditor
                 fieldName="chartValues"
                 label="Values"

src/ui/Modal/index.tsx

@@ -2,7 +2,13 @@ import { Dialog, Transition } from "@headlessui/react";
 import { XIcon } from "@heroicons/react/solid";
 import clsx from "clsx";
 import { atom, useAtom } from "jotai";
-import React, { Fragment, createContext, useContext, useMemo, useState } from "react";
+import React, {
+  Fragment,
+  createContext,
+  useContext,
+  useMemo,
+  useState
+} from "react";
 import HelpLink from "../Buttons/HelpLink";
 import { BsArrowsFullscreen, BsFullscreenExit } from "react-icons/bs";
 import { useWindowSize } from "react-use-size";
@@ -11,10 +17,10 @@ import DialogButton from "../Buttons/DialogButton";
 export type ModalContextProps = {
   props: IModalProps;
   setProps: (props: IModalProps) => void;
-}
+};
 
 export function useModal() {
-  return useContext(ModalContext)
+  return useContext(ModalContext);
 }
 
 export const ModalContext = createContext<ModalContextProps>(undefined!);
@@ -50,34 +56,37 @@ export interface IModalProps {
 
 export function useDialogSize(size?: string) {
   const { height, width } = useWindowSize();
-  return useMemo(() => clsx(
-    size === 'full' && {
-      'min-w-[1240px] w-[1240px]': width >= 1280,
-      'w-[1000px]': width < 1280 && width >= 1024,
-      'w-[90vw]': width < 1024 && width >= 768,
-      'w-[95vw]': width < 768,
-      'h-[90vh]': height < 1000,
-      'h-[1000px]': height > 1000,
-    },
-    size === 'small' && 'max-w-[800px] max-h-[50vh]',
-    size === 'medium' && {
-      'w-[1000px]': width >= 1280,
-      'w-[850px]': width < 1280 && width >= 1024,
-      'w-[500vw]': width < 1024 && width >= 768,
-      'w-[95vw]': width < 768,
-      'h-[70vh]': height < 1000,
-      'h-[800px]': height > 1000,
-    },
-    size === 'large' && {
-      'min-w-[1240px] w-[1240px]': width >= 1280,
-      'w-[1000px]': width < 1280 && width >= 1024,
-      'w-[600px]': width < 1024 && width >= 768,
-      'w-[95vw]': width < 768,
-      'h-[80vh]': height < 1000,
-      'h-[1000px]': height > 1000,
-
-    },
-  ), [height, width, size]);
+  return useMemo(
+    () =>
+      clsx(
+        size === "full" && {
+          "min-w-[1240px] w-[1240px]": width >= 1280,
+          "w-[1000px]": width < 1280 && width >= 1024,
+          "w-[90vw]": width < 1024 && width >= 768,
+          "w-[95vw]": width < 768,
+          "h-[90vh]": height < 1000,
+          "h-[1000px]": height > 1000
+        },
+        size === "small" && "max-w-[800px] max-h-[50vh]",
+        size === "medium" && {
+          "w-[1000px]": width >= 1280,
+          "w-[850px]": width < 1280 && width >= 1024,
+          "w-[500vw]": width < 1024 && width >= 768,
+          "w-[95vw]": width < 768,
+          "h-[70vh]": height < 1000,
+          "h-[800px]": height > 1000
+        },
+        size === "large" && {
+          "min-w-[1240px] w-[1240px]": width >= 1280,
+          "w-[1000px]": width < 1280 && width >= 1024,
+          "w-[600px]": width < 1024 && width >= 768,
+          "w-[95vw]": width < 768,
+          "h-[80vh]": height < 1000,
+          "h-[1000px]": height > 1000
+        }
+      ),
+    [height, width, size]
+  );
 }
 
 export function Modal({
@@ -88,9 +97,9 @@ export function Modal({
   footerClassName = "flex my-2 px-8 justify-end",
   actions,
   open,
-  onClose = () => { },
-  childClassName,
-  allowBackgroundClose,
+  onClose = () => {},
+  childClassName = "w-full h-full",
+  allowBackgroundClose = true,
   hideCloseButton,
   size,
   children,
@@ -100,19 +109,23 @@ export function Modal({
 }: IModalProps) {
   const [helpLink] = useAtom(modalHelpLinkAtom);
   const [_size, setSize] = useState(size);
-  const sizeClass = useDialogSize(size);
+  const sizeClass = useDialogSize(_size);
 
   return (
     <Transition.Root show={open} as={Fragment}>
       <Dialog
         as="div"
         auto-reopen="true"
         className={dialogClassName}
-        onClose={allowBackgroundClose ? () => onClose() : () => { }}
+        onClose={allowBackgroundClose ? () => onClose() : () => {}}
         {...rest}
       >
         <div
-          className={clsx("flex items-center justify-center mx-auto my-auto", sizeClass)}        >
+          className={clsx(
+            "flex items-center justify-center mx-auto my-auto",
+            sizeClass
+          )}
+        >
           {/* @ts-ignore */}
           <Transition.Child
             as={Fragment as any}
@@ -135,9 +148,11 @@ export function Modal({
             leaveFrom="opacity-100 translate-y-0 sm:scale-100"
             leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
           >
-            <div className={clsx(
-              _size !== "small" && childClassName,
-              "mt-20 mb-10 justify-between overflow-auto  bg-white rounded-lg text-left shadow-xl transform transition-all  flex flex-col")}
+            <div
+              className={clsx(
+                _size !== "small" && childClassName,
+                "mt-20 mb-10 justify-between overflow-auto  bg-white rounded-lg text-left shadow-xl transform transition-all  flex flex-col"
+              )}
             >
               <div className="py-4 px-4 gap-2 flex item-center rounded-t-lg justify-between bg-gray-100">
                 <h1
@@ -153,19 +168,27 @@ export function Modal({
                 corner of the modal that links to the documentation for the modal.
                 */}
                 {helpLink && <HelpLink link={helpLink} />}
-                {showExpand && _size !== 'full' && size !== 'small' &&
-                  <DialogButton icon={BsArrowsFullscreen} onClick={() => setSize('full')} />}
-
-
-                {showExpand && _size === 'full' && <DialogButton icon={BsFullscreenExit} onClick={() => setSize('medium')} />}
-
-
+                {showExpand && _size !== "full" && size !== "small" && (
+                  <DialogButton
+                    icon={BsArrowsFullscreen}
+                    onClick={() => setSize("full")}
+                  />
+                )}
+
+                {showExpand && _size === "full" && (
+                  <DialogButton
+                    icon={BsFullscreenExit}
+                    onClick={() => setSize("medium")}
+                  />
+                )}
 
                 {/* top-right close button */}
-                {!hideCloseButton && <DialogButton icon={XIcon} onClick={onClose} />}
+                {!hideCloseButton && (
+                  <DialogButton icon={XIcon} onClick={onClose} />
+                )}
               </div>
 
-              <div className={clsx("flex flex-col flex-1 mb-auto ", bodyClass)} >
+              <div className={clsx("flex flex-col flex-1 mb-auto ", bodyClass)}>
                 {children}
               </div>