Merge pull request #473 from permitio/filipermit/timeline

Timeline integration

Author: filipermit

docs/overview/configure-your-first-rbac-policy.mdx

@@ -14,13 +14,19 @@ import createUser from "/static/ui-videos/overview/creating-a-user.mp4";
 import checkPolicies from "/static/ui-videos/overview/check-policies.mp4";
 
 import WhatsNext from "../../src/components/whats-next/WhatsNext";
+import TimelineStep from "../../src/components/timeline/TimelineStep";
+import TimelineWrapper from "../../src/components/timeline/TimelineWrapper";
+import Video from "../../src/components/video/Video";
 
 > For example, in a web application, an "Admin" role might have full access to manage resources, while a "Viewer" role can
 > only view them.
 
 In this guide, you'll learn how to configure your first RBAC policy, step by step—starting with creating roles, defining
 resources and actions, and assigning roles to users.
 
+<TimelineWrapper>
+<TimelineStep>
+
 ## Creating your first role
 
 The first step in configuring your RBAC policy is to define roles, which represent a set of permissions associated with
@@ -38,9 +44,11 @@ To **create the Admin** role:
 2. Click `Create a Role`
 3. Enter "Admin" as the name of the role.
 
-<video controls autoPlay loop>
-  <source src={createRole} />
-</video>
+<Video src={createRole} controls />
+
+</TimelineStep>
+
+<TimelineStep>
 
 ## Creating a resource and its actions
 
@@ -58,9 +66,11 @@ This combination of predefined and bespoke actions gives you flexibility in craf
 your application’s needs.
 :::
 
-<video controls autoPlay loop>
-  <source src={createResource} />
-</video>
+<Video src={createResource} controls />
+
+</TimelineStep>
+
+<TimelineStep>
 
 ## Configuring RBAC permissions in the Policy editor
 
@@ -77,9 +87,11 @@ This is done in the Policy Editor, where you can specify what actions each role
 By mapping specific actions to roles in the Policy Editor, you ensure your access control model is both secure and flexible, tailored
 to your application's requirements.
 
-<video controls autoPlay loop>
-  <source src={checkPolicies} />
-</video>
+<Video src={checkPolicies} controls />
+
+</TimelineStep>
+
+<TimelineStep>
 
 ## Add a user and assign a role
 
@@ -97,16 +109,18 @@ what they can do.
 4. Assign the `Admin` role to this user by selecting it from the list of available roles. This grants the user full administrative
    permissions to manage resources and perform all actions defined for the role.
 
-<video controls autoPlay loop>
-  <source src={createUser} />
-</video>
+<Video src={createUser} controls />
 
 <br />
 <br />
 
 Once this step is complete, your RBAC setup is ready, and the Admin role will have all the necessary permissions to
 manage the Document resource effectively.
 
+</TimelineStep>
+
+</TimelineWrapper>
+
 ## What did you learn?
 
 Congratulations! 🎉 You’ve successfully configured your first **RBAC** policy by creating a role, defining a resource with

docs/overview/perform-policy-check-with-cloud-pdp.mdx

@@ -10,6 +10,9 @@ to perform specific actions on a resource. This ensures that your access control
 
 import CodeBlock from "../../src/components/code-block/CodeBlock";
 import WhatsNext from "../../src/components/whats-next/WhatsNext";
+import TimelineStep from "../../src/components/timeline/TimelineStep";
+import TimelineWrapper from "../../src/components/timeline/TimelineWrapper";
+import Video from "../../src/components/video/Video";
 
 import pullPDP from "/img/updated/walkthroughs/local-policy-check/pulling-pdp.mp4";
 import runPDP from "/img/updated/walkthroughs/local-policy-check/running-pdp.mp4";
@@ -35,6 +38,9 @@ parameters such as the `user ID`, `action`, and `resource`, the check function q
 The check function can accept various arguments beyond the user and resource.
 :::
 
+<TimelineWrapper>
+<TimelineStep>
+
 ## Using the cloud PDP to run our first check
 
 To perform our first policy check, we need to identify an enforcement point in our code—this is where the check function comes into
@@ -94,6 +100,9 @@ Cloud PDP is limited to RBAC policies only, with 1MB data restriction. For ABAC
 For production deployments, we recommend deploying a local PDP to minimize network latency and ensure high availability.
 :::
 
+</TimelineStep>
+<TimelineStep>
+
 ## Running a local PDP
 
 A Policy Decision Point (PDP) is the component responsible for making authorization decisions based on defined policies.
@@ -111,9 +120,7 @@ Permit.io provides the PDP as a ready-to-use Docker container. Start by pulling
 docker pull permitio/pdp-v2:latest
 ```
 
-<video controls autoPlay loop>
-  <source src={pullPDP} />
-</video>
+<Video src={pullPDP} controls />
 
 :::note
 If Docker is not yet installed on your system, [click here](https://docs.docker.com/get-started/get-docker/) to install Docker.
@@ -127,15 +134,16 @@ Once the container is pulled, you can run the PDP locally. Replace `<YOUR_API_KE
 docker run -it -p 7766:7000 --env PDP_DEBUG=True --env PDP_API_KEY=<YOUR_API_KEY> permitio/pdp-v2:latest
 ```
 
-<video controls autoPlay loop>
-  <source src={runPDP} />
-</video>
+<Video src={runPDP} controls />
 
 <br />
 <br />
 
 > The container will expose the PDP on `localhost:7766`, ready to handle authorization requests.
 
+</TimelineStep>
+<TimelineStep>
+
 ## Initialize the Permit object
 
 After setting up the Local PDP, you can integrate it into your application to handle authorization checks. The process is almost
@@ -145,6 +153,9 @@ When initializing the Permit object in your application, point it to the locally
 
 <CodeBlock folderPath="/walkthroughs/first-policy-check/local-pdp-obj" />
 
+</TimelineStep>
+<TimelineStep>
+
 ## Perform the authorization check
 
 Perform authorization checks as you normally would. The Local PDP will seamlessly handle policy validation. We will use the same
@@ -172,6 +183,9 @@ We have identified the enforcement point where we will check if Macy has the **p
 const permitted = permit.check("user|987654321", "create", "document");
 ```
 
+</TimelineStep>
+</TimelineWrapper>
+
 ## What did you learn?
 
 By configuring the Cloud PDP for policy checks, you’ve learned how to:

docs/overview/setup-attribute-based-access-control.mdx

@@ -14,6 +14,9 @@ import userSet from "/img/updated/walkthroughs/abac-guide/user-set.mp4";
 import resourceSet from "/img/updated/walkthroughs/abac-guide/resource-set.mp4";
 import settingPolicy from "/img/updated/walkthroughs/abac-guide/setting-policy.mp4";
 import WhatsNext from "../../src/components/whats-next/WhatsNext";
+import TimelineStep from "../../src/components/timeline/TimelineStep";
+import TimelineWrapper from "../../src/components/timeline/TimelineWrapper";
+import Video from "../../src/components/video/Video";
 
 ## Understanding the scenario
 
@@ -28,6 +31,9 @@ roles and uses ABAC to enforce fine-grained policies based on user and resource
 In this step-by-step guide, we’ll walk through creating and implementing an ABAC policy for this
 scenario, demonstrating the power and flexibility of attribute-based control.
 
+<TimelineWrapper>
+<TimelineStep>
+
 ## Create User Attributes
 
 User attributes form the foundation of ABAC policies. These attributes define who the user is and
@@ -46,9 +52,10 @@ details like department, role, or certification status during the authentication
 In order to set User attributes navigate to **`Directory` > `Settings` >
 `User Attributes` and then `Add Attribute`**.
 
-<video controls autoPlay loop>
-  <source src={addUserAttributes} />
-</video>
+<Video src={addUserAttributes} />
+
+</TimelineStep>
+<TimelineStep>
 
 ## Create Resource Attributes
 
@@ -68,9 +75,10 @@ Navigate to the Resources Panel, select Resource Attributes, and add these:
 In order to set Resource attributes navigate to **`Policy`** > **`Edit Resource`** (if one exists) > **`ABAC Options`** and then
 **`Attributes`**.
 
-<video controls autoPlay loop>
-  <source src={addResourceAttributes} />
-</video>
+<Video src={addResourceAttributes} />
+
+</TimelineStep>
+<TimelineStep>
 
 ## Define a User Set
 
@@ -83,9 +91,10 @@ Navigate to User Sets and configure the conditions:
 - `department` equals `Engineering`.
 - `training_status` equals `certified`.
 
-<video controls autoPlay loop>
-  <source src={userSet} />
-</video>
+<Video src={userSet} />
+
+</TimelineStep>
+<TimelineStep>
 
 ## Define a Resource Set
 
@@ -98,9 +107,10 @@ Navigate to Resource Sets and configure the conditions:
 - `priority_level` equals `high`.
 - `document_type` equals `classified`.
 
-<video controls autoPlay loop>
-  <source src={resourceSet} />
-</video>
+<Video src={resourceSet} />
+
+</TimelineStep>
+<TimelineStep>
 
 ## Create your policy rules
 
@@ -110,9 +120,10 @@ Policy rules link user sets, resource sets, and actions to enforce access contro
 > classified documents. In contrast, an **R&D Certified Employee** is allowed to `read` both standard `documents` and `High Priority 
 Classified Documents`.
 
-<video controls autoPlay loop>
-  <source src={settingPolicy} />
-</video>
+<Video src={settingPolicy} />
+
+</TimelineStep>
+</TimelineWrapper>
 
 ## What did you learn?
 

docs/overview/sync-your-first-user-with-sdk.mdx

@@ -8,6 +8,8 @@ between your application's user management system and our policy engine.
 
 import CodeBlock from "../../src/components/code-block/CodeBlock";
 import WhatsNext from "../../src/components/whats-next/WhatsNext";
+import TimelineStep from "../../src/components/timeline/TimelineStep";
+import TimelineWrapper from "../../src/components/timeline/TimelineWrapper";
 
 :::tip
 Permit is fully API-driven, providing a seamless way to programmatically manage everything you can do via our
@@ -35,6 +37,9 @@ If you would like to do some further reading on understanding the Permit Hierarc
 [here](/manage-your-account/projects-and-env#managing-access-to-a-project).
 :::
 
+<TimelineWrapper>
+<TimelineStep>
+
 ## Sync Users from your identity provider
 
 To create a user in Permit, you need to make a POST request to the users endpoint using your project ID (`proj_id`),
@@ -49,6 +54,9 @@ identity providers like [Entra ID](/integrations/SCIM/EntraID), [Okta](/integrat
 and de-provisioning users in Permit.
 :::
 
+</TimelineStep>
+<TimelineStep>
+
 ## Verify the user was created in the Permit Directory
 
 > In this case, we will use `cURL` to run this request
@@ -90,13 +98,19 @@ right tenant.
   data-zoomable
 />
 
+</TimelineStep>
+<TimelineStep>
+
 ## Assign a role to the User (optional)
 
 Once the user is created, you can choose to make another API request to `assign a role to the user`. This is done by calling the
 following endpoint.
 
 <CodeBlock folderPath="/walkthroughs/sync-first-user/assign-role" />
 
+</TimelineStep>
+<TimelineStep>
+
 ## Create a new tenant
 
 In Permit, a tenant represents an isolated space within your application where roles, resources, and permissions are separated.
@@ -115,6 +129,9 @@ Manager in another), ensuring their permissions are context-specific.
   data-zoomable
 />
 
+</TimelineStep>
+<TimelineStep>
+
 ## Add a user to a new tenant and assign them a different role
 
 It is now time to guide you through `adding a user` to a `new tenant` and `assigning them a specific role`, ensuring their permissions
@@ -141,6 +158,9 @@ are customized for that tenant.
   data-zoomable
 />
 
+</TimelineStep>
+</TimelineWrapper>
+
 ## What did you learn?
 
 In this guide, you’ve learned how to: