From 1d3cd7bf869763ece088652259e93c37915bcf60 Mon Sep 17 00:00:00 2001 From: Tolga Ozen Date: Fri, 15 Dec 2023 18:34:17 +0300 Subject: [PATCH] feat(#933): guided tour interface for playground --- playground/public/media/svg/welcome.svg | 467 ++++++++++++++++++ playground/src/_assets/less/App.less | 10 + .../less/components/_modal_ant_override.less | 2 - .../less/components/_tour_ant_override.less | 34 ++ playground/src/_assets/less/index.less | 1 + playground/src/layout/MainLayout.js | 2 +- .../src/layout/components/GuidedTour.js | 61 --- .../src/layout/components/guidedTour.js | 88 ++++ playground/src/layout/sides/output.js | 5 +- 9 files changed, 604 insertions(+), 66 deletions(-) create mode 100644 playground/public/media/svg/welcome.svg create mode 100644 playground/src/_assets/less/components/_tour_ant_override.less delete mode 100644 playground/src/layout/components/GuidedTour.js create mode 100644 playground/src/layout/components/guidedTour.js diff --git a/playground/public/media/svg/welcome.svg b/playground/public/media/svg/welcome.svg new file mode 100644 index 000000000..9ed0bbfc9 --- /dev/null +++ b/playground/public/media/svg/welcome.svg @@ -0,0 +1,467 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/playground/src/_assets/less/App.less b/playground/src/_assets/less/App.less index be2b23bc6..a90947c05 100644 --- a/playground/src/_assets/less/App.less +++ b/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; +} diff --git a/playground/src/_assets/less/components/_modal_ant_override.less b/playground/src/_assets/less/components/_modal_ant_override.less index 0d4a5db8c..2814722db 100644 --- a/playground/src/_assets/less/components/_modal_ant_override.less +++ b/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{ diff --git a/playground/src/_assets/less/components/_tour_ant_override.less b/playground/src/_assets/less/components/_tour_ant_override.less new file mode 100644 index 000000000..600e4efa1 --- /dev/null +++ b/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%); +} + diff --git a/playground/src/_assets/less/index.less b/playground/src/_assets/less/index.less index b9bd9fd36..23ba67e59 100644 --- a/playground/src/_assets/less/index.less +++ b/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"; diff --git a/playground/src/layout/MainLayout.js b/playground/src/layout/MainLayout.js index 8f0ed14a3..184b74adf 100644 --- a/playground/src/layout/MainLayout.js +++ b/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; diff --git a/playground/src/layout/components/GuidedTour.js b/playground/src/layout/components/GuidedTour.js deleted file mode 100644 index 9e96bcde6..000000000 --- a/playground/src/layout/components/GuidedTour.js +++ /dev/null @@ -1,61 +0,0 @@ -import React, { useState } from "react"; -import { Tour } from "antd"; - -const Link = ({ href, text }) => ( - - {text} - -); - -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: ( -

- This environment enables you to create and test your authorization schema within a browser. The Permify playground comprises three main sections: Schema (Authorization Model), Authorization Data, and Enforcement. While we cover these - sections in this tour, you can find the complete documentation at . -

- ), - }, - { - title: "Schema (Authorization Model)", - target: refSchemaEditor.current, - description: ( -

- 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{" "} - to learn more about how to model authorization in Permify. -

- ), - }, - { - title: "Authorization Data", - target: refRelationshipsAndAttributes.current, - description: ( -

- 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 . -

- ), - }, - { - title: "Enforcement", - target: refEnforcement.current, - description: ( -

- 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:{" "} - . -

- ), - }, - ]; - return ; -} diff --git a/playground/src/layout/components/guidedTour.js b/playground/src/layout/components/guidedTour.js new file mode 100644 index 000000000..d04abca98 --- /dev/null +++ b/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}) => ( + + {text} + +); + +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: ( +
+
+ welcome +
+

+ This environment enables you to create and test your authorization schema within a browser. The + Permify playground comprises three main sections: Schema (Authorization Model), Authorization + Data and Enforcement. While we cover these + sections in this tour, you can find the complete documentation at . +

+
+ ), + }, + { + title: "Schema (Authorization Model)", + target: refSchemaEditor.current, + description: ( +
+

+ 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{" "} + to learn more + about how to model authorization in Permify. +

+
+ ), + }, + { + title: "Authorization Data", + target: refRelationshipsAndAttributes.current, + description: ( +
+

+ 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 . +

+
+ ), + }, + { + title: "Enforcement", + target: refEnforcement.current, + description: ( +
+

+ 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:{" "} + . +

+
+ ), + }, + ]; + return ; +} diff --git a/playground/src/layout/sides/output.js b/playground/src/layout/sides/output.js index 6739c1ae5..17f562a35 100644 --- a/playground/src/layout/sides/output.js +++ b/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) { - + Relationships Attributes