Skip to content

Commit

Permalink
chore: improve integration wizard
Browse files Browse the repository at this point in the history
  • Loading branch information
@moshloop
moshloop committed Jun 17, 2024
1 parent 8d2f603 commit 529b835
Show file tree
Hide file tree
Showing 2 changed files with 78 additions and 56 deletions.
13 changes: 6 additions & 7 deletions src/components/Integrations/Add/steps/MissionControlRegistryOptions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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: {}
}}
Expand All @@ -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"
Expand All @@ -89,7 +89,6 @@ export default function MissionControlRegistryOptions({
name="createRepository"
/>


<FormikCodeEditor
fieldName="chartValues"
label="Values"
Expand Down
121 changes: 72 additions & 49 deletions src/ui/Modal/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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!);
Expand Down Expand Up @@ -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({
Expand All @@ -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,
Expand All @@ -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}
Expand All @@ -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
Expand All @@ -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>

Expand Down

0 comments on commit 529b835

Please sign in to comment.