+
+ Infisical September update
-
+
+ Improved RBAC, new integrations, dashboard remake, and more!
+
+
+
+
+
@@ -619,9 +652,10 @@ export const AppLayout = ({ children }: LayoutProps) => {
href="https://infisical.com/blog/infisical-update-september-2023"
target="_blank"
rel="noopener noreferrer"
- className="text-sm text-mineshaft-400 font-normal leading-[1.2rem] hover:text-mineshaft-100 duration-200"
+ className="text-sm font-normal leading-[1.2rem] text-mineshaft-400 duration-200 hover:text-mineshaft-100"
>
- Learn More
+ Learn More{" "}
+
@@ -780,6 +814,10 @@ export const AppLayout = ({ children }: LayoutProps) => {
onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
text="You have exceeded the number of projects allowed on the free plan."
/>
+
handlePopUpToggle("createOrg", false)}
+ />
{children}
diff --git a/frontend/src/views/Org/NonePage/NonePage.tsx b/frontend/src/views/Org/NonePage/NonePage.tsx
index ec7a768a3..26294a36b 100644
--- a/frontend/src/views/Org/NonePage/NonePage.tsx
+++ b/frontend/src/views/Org/NonePage/NonePage.tsx
@@ -1,112 +1,31 @@
import { useEffect } from "react";
-import { Controller, useForm } from "react-hook-form";
-import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
-import {
- Button,
- FormControl,
- Input,
- Modal,
- ModalContent} from "@app/components/v2";
-import { useCreateOrg } from "@app/hooks/api";
import { usePopUp } from "@app/hooks/usePopUp";
-const schema = yup.object({
- name: yup.string().required("Organization name is required"),
-}).required();
+import { CreateOrgModal } from "../components";
+
+const schema = yup
+ .object({
+ name: yup.string().required("Organization name is required")
+ })
+ .required();
export type FormData = yup.InferType;
export const NonePage = () => {
- const { createNotification } = useNotificationContext();
- const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp([
- "createOrg",
- ] as const);
-
- const { mutateAsync } = useCreateOrg();
-
- const {
- control,
- handleSubmit,
- reset,
- formState: { isSubmitting }
- } = useForm({
- resolver: yupResolver(schema),
- defaultValues: {
- name: ""
- }
- });
-
- useEffect(() => {
- handlePopUpOpen("createOrg");
- }, []);
-
- const onFormSubmit = async ({ name }: FormData) => {
- try {
-
- const organization = await mutateAsync({
- name
- });
+ const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp(["createOrg"] as const);
- createNotification({
- text: "Successfully created organization",
- type: "success"
- });
+ useEffect(() => {
+ handlePopUpOpen("createOrg");
+ }, []);
- window.location.href = `/org/${organization._id}/overview`;
-
- reset();
- handlePopUpToggle("createOrg", false);
- } catch (err) {
- console.error(err);
- createNotification({
- text: "Failed to created organization",
- type: "error"
- });
- }
- }
-
- return (
-
-
-
-
-
-
-
- );
-}
\ No newline at end of file
+ return (
+
+ handlePopUpToggle("createOrg", false)}
+ />
+
+ );
+};
diff --git a/frontend/src/views/Org/components/CreateOrgModal.tsx b/frontend/src/views/Org/components/CreateOrgModal.tsx
new file mode 100644
index 000000000..ccf1c4d31
--- /dev/null
+++ b/frontend/src/views/Org/components/CreateOrgModal.tsx
@@ -0,0 +1,94 @@
+import { FC } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import * as yup from "yup";
+
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { Button, FormControl, Input, Modal, ModalContent } from "@app/components/v2";
+import { useCreateOrg } from "@app/hooks/api";
+
+const schema = yup
+ .object({
+ name: yup.string().required("Organization name is required")
+ })
+ .required();
+
+export type FormData = yup.InferType;
+
+interface CreateOrgModalProps {
+ isOpen: boolean;
+ onClose: () => void;
+}
+
+export const CreateOrgModal: FC = ({ isOpen, onClose }) => {
+ const { createNotification } = useNotificationContext();
+
+ const {
+ control,
+ handleSubmit,
+ reset,
+ formState: { isSubmitting }
+ } = useForm({
+ resolver: yupResolver(schema),
+ defaultValues: {
+ name: ""
+ }
+ });
+
+ const { mutateAsync } = useCreateOrg();
+
+ const onFormSubmit = async ({ name }: FormData) => {
+ try {
+ const organization = await mutateAsync({
+ name
+ });
+
+ createNotification({
+ text: "Successfully created organization",
+ type: "success"
+ });
+
+ window.location.href = `/org/${organization._id}/overview`;
+
+ reset();
+ onClose();
+ } catch (err) {
+ console.error(err);
+ createNotification({
+ text: "Failed to created organization",
+ type: "error"
+ });
+ }
+ };
+
+ return (
+
+
+
+
+
+ );
+};
diff --git a/frontend/src/views/Org/components/index.tsx b/frontend/src/views/Org/components/index.tsx
new file mode 100644
index 000000000..7b794731a
--- /dev/null
+++ b/frontend/src/views/Org/components/index.tsx
@@ -0,0 +1 @@
+export { CreateOrgModal } from "./CreateOrgModal";