feat(#933): guided tour interface for playground

playground/src/_assets/less/App.less

@@ -525,3 +525,13 @@ code {
 .ant-select-status-error:not(.ant-select-disabled):not(.ant-select-customize-input):not(.ant-pagination-size-changer) .ant-select-selector{
   border-color: #dc4446 !important;
 }
+
+.text-center{
+  text-align: center !important;
+}
+
+.center-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

playground/src/_assets/less/components/_modal_ant_override.less

@@ -1,6 +1,5 @@
 .ant-modal-header{
   font-weight: bold !important;
-  padding-left: 15px !important;
   padding-right: 15px !important;
   border-bottom: none !important;
   background-color: var(--background-base) !important;
@@ -12,7 +11,6 @@
 
 .ant-modal-body{
   background-color: var(--background-base) !important;
-  padding-bottom: 10px !important;
 }
 
 .ant-modal-content{

playground/src/_assets/less/components/_tour_ant_override.less

@@ -0,0 +1,34 @@
+.ant-tour-title{
+  font-size: 20px !important;
+  font-weight: bolder !important;
+  text-align: center !important;
+  margin-top: 20px !important;
+}
+
+.ant-tour{
+  background-color: var(--background-base) !important;
+}
+
+.ant-tour-inner{
+  background-color: var(--background-base) !important;
+}
+
+.ant-tour-footer{
+  padding: 26px 26px 26px 26px  !important;
+}
+
+.ant-tour-indicator{
+  width: 8px !important;
+  height: 8px !important;
+}
+
+.ant-tour-arrow {
+  width: 0;
+  height: 0;
+  border-left: 10px solid transparent;
+  border-right: 10px solid transparent;
+  border-bottom: 10px solid var(--background-base) !important; /* Change color as needed */
+  position: absolute;
+  transform: translateX(-50%);
+}
+

playground/src/_assets/less/index.less

@@ -2,6 +2,7 @@
 
 /* Components */
 @import "components/_tabs_ant_override";
+@import "components/_tour_ant_override";
 @import "components/_list_ant_override";
 @import "components/_table_ant_override";
 @import "components/_tag_ant_override";

playground/src/layout/MainLayout.js

@@ -6,7 +6,7 @@ import Upload from "../services/s3";
 import {nanoid} from "nanoid";
 import yaml from "js-yaml";
 import {useShapeStore} from "../state/shape";
-import Share from "./components/Modals/Share";
+import Share from "./components/modals/share";
 
 const {Option, OptGroup} = Select;
 const {Content} = Layout;

playground/src/layout/components/guidedTour.js

@@ -0,0 +1,88 @@
+import React, {useState} from "react";
+import {Tour} from "antd";
+import {toAbsoluteUrl} from "../../utility/helpers/asset";
+
+const Link = ({href, text}) => (
+    <a href={href} target="_blank" rel="noreferrer noopener" className="text-primary">
+        {text}
+    </a>
+);
+
+export default function GuidedTour({refSchemaEditor, refRelationshipsAndAttributes, refEnforcement}) {
+    const [open, setOpen] = useState(!(localStorage.getItem("hasSeenGuidedTour") === "true"));
+
+    const onTourClose = () => {
+        localStorage.setItem("hasSeenGuidedTour", "true");
+        setOpen(false);
+    };
+
+    const steps = [
+        {
+            title: "Welcome to the Permify Playground!",
+            placement: "center",
+            description: (
+                <div className="p-10">
+                    <div className="p-10 text-center">
+                        <img alt="welcome" src={toAbsoluteUrl("/media/svg/welcome.svg")}/>
+                    </div>
+                    <p className="text-center">
+                        This environment enables you to create and test your authorization schema within a browser. The
+                        Permify playground comprises three main sections: <b>Schema (Authorization Model)</b>, <b>Authorization
+                        Data</b> and <b>Enforcement</b>. While we cover these
+                        sections in this tour, you can find the complete documentation at <Link
+                        href="https://docs.permify.co/" text="docs.permify.co"/>.
+                    </p>
+                </div>
+            ),
+        },
+        {
+            title: "Schema (Authorization Model)",
+            target: refSchemaEditor.current,
+            description: (
+                <div className="p-10">
+                    <p className="text-center">
+                        You can create your authorization model in this section with using our domain specific language.
+                        We already have a couple of use cases and example that you can choose from the dropdown above.
+                        Also, you can check our{" "}
+                        <Link href="https://docs.permify.co/docs/getting-started/modeling/" text="docs"/> to learn more
+                        about how to model authorization in Permify.
+                    </p>
+                </div>
+            ),
+        },
+        {
+            title: "Authorization Data",
+            target: refRelationshipsAndAttributes.current,
+            description: (
+                <div className="p-10">
+                    <p className="text-center">
+                        You can create sample authorization data to test your authorization logic. For instance, to
+                        create a
+                        relationship between your defined entities, simply click the 'Add Relationship' button. For
+                        further
+                        information on data creation, please
+                        refer to <Link href="https://docs.permify.co/docs/getting-started/sync-data/" text="docs"/>.
+                    </p>
+                </div>
+            ),
+        },
+        {
+            title: "Enforcement",
+            target: refEnforcement.current,
+            description: (
+                <div className="p-10">
+                    <p className="text-center">
+                        Now that we have sample data and a defined schema, let's perform an access check! The YAML in
+                        the
+                        Enforcement section represents a test scenario for conducting access checks. To learn more about
+                        the
+                        capabilities of this YAML, refer to:{" "}
+                        <Link href="https://docs.permify.co/docs/playground/#enforcement-access-check-scenarios"
+                              text="docs"/>.
+                    </p>
+                </div>
+            ),
+        },
+    ];
+    return <Tour open={open} steps={steps} onClose={onTourClose} scrollIntoViewOptions={false}/>;
+}

playground/src/layout/sides/output.js

@@ -14,7 +14,7 @@ import Relationships from "./particials/data/relationships";
 import Attributes from "./particials/data/attributes";
 import {useShapeStore} from "../../state/shape";
 import Enforcement from "./enforcement";
-import GuidedTour from '../components/GuidedTour';
+import GuidedTour from '../components/guidedTour';
 
 function Output(props) {
     const refSchemaEditor = useRef(null);
@@ -123,13 +123,14 @@ function Output(props) {
                                     </Allotment.Pane>
                                 </Allotment>
                             </Allotment.Pane>
-                            <Allotment.Pane snap ref={refRelationshipsAndAttributes}>
+                            <Allotment.Pane snap>
                                 <Card title={
                                     <Radio.Group
                                         defaultValue="relationships"
                                         buttonStyle="solid"
                                         onChange={onDataSelectedChange}
                                         value={dataSelected}
+                                        ref={refRelationshipsAndAttributes}
                                     >
                                         <Radio.Button value="relationships">Relationships</Radio.Button>
                                         <Radio.Button value="attributes">Attributes</Radio.Button>