Web: Management: added a new modal window with transition to the portal

packages/management/src/categories/spaces/index.tsx

@@ -9,16 +9,21 @@ import { useStore } from "SRC_DIR/store";
 import ChangeDomainDialog from "./sub-components/dialogs/ChangeDomainDialog";
 import CreatePortalDialog from "./sub-components/dialogs/CreatePortalDialog";
 import DeletePortalDialog from "./sub-components/dialogs/DeletePortalDialog";
+import SpaceCreatedDialog from "./sub-components/dialogs/SpaceCreatedDialog";
 import { SpacesLoader } from "./sub-components/SpacesLoader";
 
-
 const Spaces = () => {
   const { t } = useTranslation(["Management", "Common", "Settings"]);
 
   const { spacesStore, authStore } = useStore();
 
-  const { isConnected, domainDialogVisible, createPortalDialogVisible, deletePortalDialogVisible } =
-    spacesStore;
+  const {
+    isConnected,
+    domainDialogVisible,
+    createPortalDialogVisible,
+    deletePortalDialogVisible,
+    spaceCreatedDialogVisible,
+  } = spacesStore;
   const { setDocumentTitle } = authStore;
   const { portals } = authStore.settingsStore;
 
@@ -31,13 +36,20 @@ const Spaces = () => {
 
   return (
     <SpaceContainer>
-      {deletePortalDialogVisible && <DeletePortalDialog key="delete-portal-dialog" />}
+      {deletePortalDialogVisible && (
+        <DeletePortalDialog key="delete-portal-dialog" />
+      )}
       {domainDialogVisible && <ChangeDomainDialog key="change-domain-dialog" />}
+      {spaceCreatedDialogVisible && (
+        <SpaceCreatedDialog key="space-created-dialog" />
+      )}
       {createPortalDialogVisible && (
         <CreatePortalDialog key="create-portal-dialog" />
       )}
       <div className="spaces-header">
-        <Text fontSize="12px" fontWeight={400} >{t("Subheader")}</Text>
+        <Text fontSize="12px" fontWeight={400}>
+          {t("Subheader")}
+        </Text>
       </div>
       {isConnected && portals.length > 0 ? (
         <MultipleSpaces t={t} />

packages/management/src/categories/spaces/sub-components/dialogs/SpaceCreatedDialog/index.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+import ModalDialogContainer from "@docspace/client/src/components/dialogs/ModalDialogContainer";
+import Text from "@docspace/components/text";
+import Button from "@docspace/components/button";
+import { useTranslation } from "react-i18next";
+import { observer } from "mobx-react";
+import ModalDialog from "@docspace/components/modal-dialog";
+import { useStore } from "SRC_DIR/store";
+
+const SpaceCreatedDialog = () => {
+  const { spacesStore } = useStore();
+
+  const {
+    spaceCreatedDialogVisible: visible,
+    setSpaceCreatedDialogVisible,
+    referenceLink,
+  } = spacesStore;
+
+  const onClose = () => setSpaceCreatedDialogVisible(false);
+
+  const onClick = () => {
+    let url = new URL(referenceLink);
+    url.searchParams.append("referenceUrl", "/management");
+    return window.location.replace(url);
+  };
+
+  const { t } = useTranslation(["Management", "Common"]);
+
+  return (
+    <ModalDialogContainer
+      visible={visible}
+      isLarge
+      onClose={onClose}
+      displayType="modal"
+    >
+      <ModalDialog.Header>{t("SpaceCreated")}</ModalDialog.Header>
+      <ModalDialog.Body>
+        <Text>{t("SpaceCreatedTitle")}</Text>
+      </ModalDialog.Body>
+      <ModalDialog.Footer>
+        <Button
+          key="CreateButton"
+          label={t("GoToSpace")}
+          size="normal"
+          primary
+          onClick={onClick}
+        />
+        <Button
+          key="CancelButton"
+          label={t("StayInSettings")}
+          size="normal"
+          onClick={onClose}
+        />
+      </ModalDialog.Footer>
+    </ModalDialogContainer>
+  );
+};
+
+export default observer(SpaceCreatedDialog);

packages/management/src/store/SpacesStore.ts

@@ -1,7 +1,6 @@
 import { makeAutoObservable } from "mobx";
 import { getLogoFromPath } from "@docspace/common/utils";
 import {
-  deletePortal,
   getDomainName,
   setDomainName,
   setPortalName,
@@ -16,6 +15,10 @@ class SpacesStore {
   createPortalDialogVisible = false;
   deletePortalDialogVisible = false;
   domainDialogVisible = false;
+  spaceCreatedDialogVisible = false;
+
+  referenceLink: URL | string = "";
+
   currentPortal = false;
 
   constructor(authStore) {
@@ -31,14 +34,14 @@ class SpacesStore {
   };
 
   get isConnected() {
-    return this.authStore.settingsStore.baseDomain &&
-    this.authStore.settingsStore.baseDomain !== "localhost" && 
-    this.authStore.settingsStore.tenantAlias &&
-    this.authStore.settingsStore.tenantAlias !== "localhost"
+    return (
+      this.authStore.settingsStore.baseDomain &&
+      this.authStore.settingsStore.baseDomain !== "localhost" &&
+      this.authStore.settingsStore.tenantAlias &&
+      this.authStore.settingsStore.tenantAlias !== "localhost"
+    );
   }
 
-
-
   get faviconLogo() {
     const logos = this.authStore.settingsStore.whiteLabelLogoUrls;
     if (!logos) return;
@@ -54,18 +57,17 @@ class SpacesStore {
     } catch (error) {
       console.log(error);
     }
-  }
+  };
 
   setDomainName = async (domain: string) => {
     try {
       const res = await setDomainName(domain);
       const { settings } = res;
       this.authStore.settingsStore.setPortalDomain(settings);
-    } catch(error) {
+    } catch (error) {
       console.log(error);
     }
-    
-  }
+  };
 
   checkDomain = async (domain) => {
     const res = await checkDomain(domain);
@@ -79,7 +81,11 @@ class SpacesStore {
 
   setCurrentPortal = (portal) => {
     this.currentPortal = portal;
-  }
+  };
+
+  setReferenceLink = (link: URL | string) => {
+    this.referenceLink = link;
+  };
 
   setCreatePortalDialogVisible = (createPortalDialogVisible: boolean) => {
     this.createPortalDialogVisible = createPortalDialogVisible;
@@ -92,6 +98,9 @@ class SpacesStore {
   setDeletePortalDialogVisible = (deletePortalDialogVisible: boolean) => {
     this.deletePortalDialogVisible = deletePortalDialogVisible;
   };
+  setSpaceCreatedDialogVisible = (spaceCreatedDialogVisible: boolean) => {
+    this.spaceCreatedDialogVisible = spaceCreatedDialogVisible;
+  };
 }
 
 export default SpacesStore;