Web: Client: JavascriptSDK: basic button preview was added in Room selector and File selector

packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/FileSelector.js

@@ -146,6 +146,11 @@ const FileSelector = (props) => {
     return () => destroyFrame();
   });
 
+  const toggleButtonMode = (e) => {
+    setSelectedElementType(e.target.value);
+    setConfig((config) => ({ ...config, isButtonMode: e.target.value === "button" }));
+  };
+
   const onChangeTab = () => {
     loadFrame();
   };
@@ -344,7 +349,7 @@ const FileSelector = (props) => {
             options={elementDisplayOptions}
             name="elementDisplayInput"
             selected={selectedElementType}
-            onClick={() => {}}
+            onClick={toggleButtonMode}
             spacing="8px"
           />
           <CategorySubHeader>{t("CustomizingDisplay")}</CategorySubHeader>

packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/Manager.js

@@ -702,6 +702,7 @@ const Manager = (props) => {
                       key={column.key}
                       isDisabled={column.key === "Name"}
                       onClick={() => deleteSelectedColumn(column)}
+                      onClose={() => {}}
                       label={column.label}
                     />
                   ))}

packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/RoomSelector.js

@@ -126,12 +126,30 @@ const RoomSelector = (props) => {
     return () => destroyFrame();
   });
 
+  // useEffect(() => {
+  //   loadFrame();
+  // }, [config])
+
+  const toggleButtonMode = (e) => {
+    setSelectedElementType(e.target.value);
+    setConfig((config) => ({ ...config, isButtonMode: e.target.value === "button" }));
+  };
+
   const changeRoomType = (option) => {
     setRoomType(option);
     setConfig((config) => ({ ...config, roomType: option.roomType }));
   };
 
-  const onChangeTab = () => {
+  const onChangeTab = (tab) => {
+    // tab.key === "preview" &&
+    //   config?.isButtonMode &&
+    //   setConfig((config) => ({ ...config, isButtonMode: true }));
+    // tab.key === "selector-preview" &&
+    //   config?.isButtonMode &&
+    //   setConfig((config) => ({ ...config, isButtonMode: false }));
+    // tab.key === "code" &&
+    //   !!config?.isButtonMode !== (selectedElementType === "button") &&
+    //   setConfig((config) => ({ ...config, isButtonMode: true }));
     loadFrame();
   };
 
@@ -221,18 +239,44 @@ const RoomSelector = (props) => {
     </>
   );
 
-  const dataTabs = [
+  const buttonPreview = (
-    {
+    <Frame width={"700px"} height={config.height} targetId={frameId}>
-      key: "preview",
+      <Box id={frameId}></Box>
-      title: t("Common:Preview"),
+      <RectangleSkeleton width={"700px"} height={config.height} borderRadius="6px" />
-      content: preview,
+    </Frame>
-    },
+  );
-    {
+
-      key: "code",
+  const dataTabs =
-      title: t("Code"),
+    selectedElementType === "element"
-      content: code,
+      ? [
-    },
+          {
-  ];
+            key: "preview",
+            title: t("Common:Preview"),
+            content: preview,
+          },
+          {
+            key: "code",
+            title: t("Code"),
+            content: code,
+          },
+        ]
+      : [
+          {
+            key: "preview",
+            title: t("Common:Preview"),
+            content: buttonPreview,
+          },
+          {
+            key: "selector-preview",
+            title: "Selector preview",
+            content: preview,
+          },
+          {
+            key: "code",
+            title: t("Code"),
+            content: code,
+          },
+        ];
 
   return (
     <SDKContainer>
@@ -253,7 +297,7 @@ const RoomSelector = (props) => {
             options={elementDisplayOptions}
             name="elementDisplayInput"
             selected={selectedElementType}
-            onClick={() => {}}
+            onClick={toggleButtonMode}
             spacing="8px"
           />
           <CategorySubHeader>{t("CustomizingDisplay")}</CategorySubHeader>

packages/client/src/pages/Sdk/index.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useCallback } from "react";
+import React, { useEffect, useCallback, useRef } from "react";
 import { inject, observer } from "mobx-react";
 import { useParams } from "react-router-dom";
 import { Button } from "@docspace/shared/components/button";
@@ -14,6 +14,18 @@ import {
 } from "@docspace/common/utils";
 import { RoomsType } from "@docspace/common/constants";
 
+import styled from "styled-components";
+
+import Logo from "PUBLIC_DIR/images/light_small_logo.react.svg";
+
+const FlexBox = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
 const Sdk = ({
   frameConfig,
   match,
@@ -29,6 +41,8 @@ const Sdk = ({
   getRoomsIcon,
   getPrimaryLink,
 }) => {
+  const newWindow = useRef(null);
+
   useEffect(() => {
     window.addEventListener("message", handleMessage, false);
     return () => {
@@ -37,6 +51,15 @@ const Sdk = ({
     };
   }, [handleMessage]);
 
+  console.log("new window content ", newWindow.current);
+
+  // useEffect(() => {
+  //   frameConfig && newWindow.current && newWindow.current.postMessage(frameConfig, window.location.origin);
+  //   return () => {
+  //     newWindow.current = null;
+  //   };
+  // }, [frameConfig]);
+
   const callCommand = useCallback(
     () => frameCallCommand("setConfig"),
     [frameCallCommand]
@@ -159,9 +182,36 @@ const Sdk = ({
 
   let component;
 
+  const openRoomSelector = () => {
+    newWindow.current = window.open(
+      `/sdk/room-selector`,
+      "_blank",
+      `width=${frameConfig?.width ?? 600},height=${frameConfig?.height ?? 400}`,
+    );
+  };
+  const openFileSelector = () => {
+    newWindow.current = window.open(
+      `/sdk/file-selector`,
+      "_blank",
+      `width=${frameConfig?.width ?? 600},height=${frameConfig?.height ?? 400}`,
+    );
+  };
+
   switch (mode) {
     case "room-selector":
-      component = (
+      component = frameConfig?.isButtonMode ? (
+        <FlexBox>
+          <Button
+            scale={false}
+            size="small"
+            label={`Select to DocSpace`}
+            isHovered
+            primary
+            onClick={openRoomSelector}
+            icon={<Logo />}
+          />
+        </FlexBox>
+      ) : (
         <RoomSelector
           withCancelButton={frameConfig?.showSelectorCancel}
           withHeader={frameConfig?.showSelectorHeader}
@@ -172,11 +222,24 @@ const Sdk = ({
           acceptButtonLabel={frameConfig?.acceptButtonLabel}
           cancelButtonLabel={frameConfig?.cancelButtonLabel}
           roomType={frameConfig?.roomType}
+          onSelect={() => {}}
         />
       );
       break;
     case "file-selector":
-      component = (
+      component = frameConfig?.isButtonMode ? (
+        <FlexBox>
+          <Button
+            scale={false}
+            size="small"
+            label={`Select to DocSpace`}
+            isHovered
+            primary
+            onClick={openFileSelector}
+            icon={<Logo />}
+          />
+        </FlexBox>
+      ) : (
         <FilesSelector
           isPanelVisible={true}
           embedded={true}

public/images/light_small_logo.react.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.02215 15.2038L0.421696 12.1631C-0.140565 11.8977 -0.140565 11.4874 0.421696 11.2461L2.71963 10.1843L6.99771 12.1631C7.55997 12.4286 8.46448 12.4286 9.00229 12.1631L13.2804 10.1843L15.5783 11.2461C16.1406 11.5116 16.1406 11.9218 15.5783 12.1631L8.97785 15.2038C8.46448 15.4451 7.55997 15.4451 7.02215 15.2038Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.00076 11.441L0.420411 8.39689C-0.140137 8.13114 -0.140137 7.72042 0.420411 7.47882L2.6626 6.43994L7.00076 8.44521C7.56131 8.71097 8.46306 8.71097 8.99924 8.44521L13.3374 6.43994L15.5796 7.47882C16.1401 7.74458 16.1401 8.1553 15.5796 8.39689L8.99924 11.441C8.43869 11.7068 7.53694 11.7068 7.00076 11.441Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.00076 7.71748L0.420411 4.71714C-0.140137 4.45521 -0.140137 4.0504 0.420411 3.81227L7.00076 0.81193C7.56131 0.549995 8.46306 0.549995 8.99924 0.81193L15.5796 3.81227C16.1401 4.07421 16.1401 4.47902 15.5796 4.71714L8.99924 7.71748C8.43869 7.95561 7.53694 7.95561 7.00076 7.71748Z" fill="white"/>
+</svg>