Global CSS docs (windmill-labs#297)

fatonramadani · hcourdent · rubenfiszel · web-flow · commit e1db98c824c1 · 2023-09-11T08:52:31.000+02:00
* Global CSS docs

* Took out words and updated Enterprise &amp; App documentation

* update doc

---------

Co-authored-by: hcourdent &lt;henri@windmill.dev&gt;
Co-authored-by: Ruben Fiszel &lt;ruben@windmill.dev&gt;
diff --git a/docs/apps/4_app_configuration-settings/4_app_styling.mdx b/docs/apps/4_app_configuration-settings/4_app_styling.mdx
@@ -1,3 +1,5 @@
+import DocCard from '@site/src/components/DocCard';
+
 # Styling
 
 Styling on the app editor can be managed at the component and app-level.
@@ -37,17 +39,30 @@ Elements like background color (incl. shadow, opacity), border (incl. stlye, rad
 
 For complex apps, you may not want to repeat the styling configuration on each component.
 
-On the right-side menu, pick `Global styling` and go on a component to define pre-set styling in CSS or Tailwind.
+### CSS Editor
+
+The [Global CSS Editor](../../misc/15_css_editor/index.md) is designed to give styling and theming across your entire app. This functionality offers a centralized location for defining, managing, and applying CSS rules. It's useful for ensuring consistent styling and for creating reusable themes.
+
+The Global CSS Editor is a feature exclusive to [Enterprise Edition](../../misc/7_plans_details/index.mdx). However, users on the Community Edition can still access and experiment with this tool directly in the editor for evaluation purposes, although these changes will not be reflected in the app preview.
 
 <video
-    className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
-    autoPlay
-    controls
-    src="/videos/global_styling.mp4"
+  className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
+  autoPlay
+  controls
+  src="/videos/global-css.mp4"
 />
 
 <br/>
 
+<div class="grid grid-cols-2 gap-2 my-4">
+	<DocCard
+		title="CSS Editor"
+		description="The Global CSS Editor is designed to give styling and theming across your entire app."
+		href="/docs/misc/css_editor"
+		color="orange"
+	/>
+</div>
+
 ### Configure manually and replicate pre-set styling
 
 Styling on a component level can be replicated to all the components of the same class from the Rich Editor.
diff --git a/docs/compared_to/retool.mdx b/docs/compared_to/retool.mdx
@@ -174,7 +174,7 @@ Windmill's ability to quickly add the components that are useful to them.
 For everyting else, it's comparable: you can run on [schedules](../core_concepts/1_scheduling/index.md) or [webhooks](../core_concepts/4_webhooks/index.md),
 [source control](../core_concepts/17_collaboration/index.mdx#git-integration),
 seamlessly interact your apps with [databases](../integrations/postgresql.md),
-[link runnables to components](../apps/3_app-runnable-panel.mdx), give [styling](../apps/4_app_configuration-settings/4_app_styling.md) to apps, [resources](../core_concepts/3_resources_and_types/index.mdx) are handled in a similar way.
+[link runnables to components](../apps/3_app-runnable-panel.mdx), give [styling](../apps/4_app_configuration-settings/4_app_styling.mdx) to apps, [resources](../core_concepts/3_resources_and_types/index.mdx) are handled in a similar way.
 
 To conclude, Retool is an excellent engine for building custom applications within a reassuring and defined framework.
 
diff --git a/docs/core_concepts/14_audit_logs/index.mdx b/docs/core_concepts/14_audit_logs/index.mdx
@@ -29,7 +29,7 @@ Audit Logs can be filtered by Date, Username, Action (Create, Update, Delete, Ex
 ## Retention Policy
 
 The retention policy for audit logs varies depending on your team's plan:
-- Free plans: Audit logs are redacted.
+- Community plan: Audit logs are redacted.
 - Team plan (cloud): Audit logs are retained for 7 days.
 - Enterprise plan (cloud): Audit logs are retained for 60 days.
 - Enterprise plan (cloud): Audit logs are stored in Postgres and also emitted as logs, which are stored in the cloud for a year with the possibility of extending the retention period.
diff --git a/docs/core_concepts/6_auto_generated_uis/index.md b/docs/core_concepts/6_auto_generated_uis/index.md
@@ -68,4 +68,4 @@ The apps will be permissioned on behalf of the [admin/author](../16_roles_and_pe
 
 <br/>
 
-At last, this is an easy way to get an app for your scripts and flows to be customized with [Styling](../../apps/4_app_configuration-settings/4_app_styling.md) and [Components](../../apps/4_app_configuration-settings/1_app_component_library.md).
+At last, this is an easy way to get an app for your scripts and flows to be customized with [Styling](../../apps/4_app_configuration-settings/4_app_styling.mdx) and [Components](../../apps/4_app_configuration-settings/1_app_component_library.md).
diff --git a/docs/core_concepts/index.mdx b/docs/core_concepts/index.mdx
@@ -125,6 +125,11 @@ On top of its editors to build endpoints, flows and apps, Windmill comes with a
 ## Enterprise Features
 
 <div class="grid grid-cols-2 gap-6 mb-4">
+	<DocCard
+    	title="Support & SLA"
+    	description="Our SLAs are designed to provide timely assistance and address any issues."
+    	href="/docs/misc/support_and_sla"
+    />
     <DocCard
     	title="Audit Logs"
     	description="Windmill provides audit logs for every operation and action that has side-effects."
@@ -141,10 +146,15 @@ On top of its editors to build endpoints, flows and apps, Windmill comes with a
     	href="/docs/core_concepts/multiplayer"
     />
 	<DocCard
-    	title="Support & SLA"
-    	description="Our SLAs are designed to provide timely assistance and address any issues."
-    	href="/docs/misc/support_and_sla"
+    	title="SAML & SCIM"
+    	description="Configure Okta for both SAML and SCIM"
+    	href="/docs/misc/saml_and_scim"
     />
+	<DocCard
+		title="CSS Editor"
+		description="The Global CSS Editor is designed to give styling and theming across your entire app."
+		href="/docs/misc/css_editor"
+	/>
 </div>
 
 ## Script-Specific Features
diff --git a/docs/getting_started/00_how_to_use_windmill/index.mdx b/docs/getting_started/00_how_to_use_windmill/index.mdx
@@ -22,7 +22,7 @@ Windmill provides a <a href="https://app.windmill.dev/" rel="nofollow">Cloud App
 
 You can sign-up using your GitHub, GitLab, Google, Microsoft Single Sign-On. No Credit Cards required and we will spare your inbox.
 
-Any user will be provided with 1,000 monthly executions from our [Free Plan](/pricing) and added to the Demo workspace. From there, users can create workspaces for free and create scripts, workflows and UIs.
+Any user will be provided with 1,000 monthly executions from our [Community Plan](/pricing) and added to the Demo workspace. From there, users can create workspaces for free and create scripts, workflows and UIs.
 
 And if you feel like it, [upgrade](../../misc/7_plans_details/index.mdx) for unlimited executions.
 
diff --git a/docs/getting_started/7_apps_quickstart/index.mdx b/docs/getting_started/7_apps_quickstart/index.mdx
@@ -143,11 +143,11 @@ At any time, have a look at your app's **Inputs** associated with each component
 
 ### Tailor the look of your app
 
-At the **[component level](../../apps/4_app_configuration-settings/4_app_styling.md#component-level)**, on the `Settings` tab, configure the style of each component (color, size, label, etc.) either directly in the boxes or using Custom CSS (on the Component Settings - Styling tab).
+At the **[component level](../../apps/4_app_configuration-settings/4_app_styling.mdx#component-level)**, on the `Settings` tab, configure the style of each component (color, size, label, etc.) either directly in the boxes or using Custom CSS (on the Component Settings - Styling tab).
 
 ![Cutomize components](./customize_component.png.webp)
 
-At the **[app level](../../apps/4_app_configuration-settings/4_app_styling.md#global-styling)**, you can give a harmonized style to your app with CSS. On the `Global Styling` tab, give details in boxes or in JSON, for the whole app and per class of component.
+At the **[app level](../../apps/4_app_configuration-settings/4_app_styling.mdx#global-styling)**, you can give a harmonized style to your app with CSS. On the `Global Styling` tab, give details in boxes or in JSON, for the whole app and per class of component.
 
 ![App styling](./customize_app.png.webp)
 
diff --git a/docs/misc/12_support_and_sla/index.mdx b/docs/misc/12_support_and_sla/index.mdx
@@ -28,7 +28,7 @@ Our SLA defines the expected response times for each priority level:
 
 ## Support Levels for Each Plan
 
-- **Free Plan:** Basic support is available for users on the Free plan. Response times may vary, and priority is given to higher-tier plans.
+- **Community Plan:** Basic support is available for users on the Community plan. Response times may vary, and priority is given to higher-tier plans.
 - **Team Plan:** Users on the Team plan receive Priority Support 24/7. Our goal is to respond within 48 hours and provide assistance from our automation engineers.
 - **Enterprise Plan:** Customers on the Enterprise plan enjoy the highest level of support. They receive Priority Support 24/7 with a 3-hour response time and benefit from dedicated assistance from our automation engineers.
 
diff --git a/docs/misc/14_saml_and_scim/index.md b/docs/misc/14_saml_and_scim/index.md
@@ -1,5 +1,7 @@
 # SAML & SCIM
 
+This guide provides guidance on configuring Okta for both SAML (Security Assertion Markup Language) and SCIM (System for Cross-domain Identity Management).
+
 ## SAML
 
 ### Okta
diff --git a/docs/misc/15_css_editor/index.md b/docs/misc/15_css_editor/index.md
@@ -0,0 +1,63 @@
+# CSS Editor
+
+The Global CSS Editor is designed to give styling and theming across your entire app. This functionality offers a centralized location for defining, managing, and applying CSS rules. It's useful for ensuring consistent styling and for creating reusable themes.
+
+The Global CSS Editor is a feature exclusive to [Enterprise Edition](../7_plans_details/index.mdx). However, users on the Community Edition can still access and experiment with this tool directly in the editor for evaluation purposes, although these changes will not be reflected in the app preview.
+
+<video
+  className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
+  autoPlay
+  controls
+  src="/videos/global-css.mp4"
+/>
+
+## Class Identifiers
+
+For a more granular control, specific classes have been added to each component. These class identifiers make it easier to target and globally style individual components across your app. Here are examples of classes, and are listed in the [Helper Block](#class-identifiers-helpers) as well:
+
+- `wm-container`
+- `wm-list`
+- `wm-list-pagination`
+- `wm-list-pagination-buttons`
+- `wm-drawer`
+- `wm-drawer-button`
+- `wm-drawer-button-container`
+- `wm-button`
+- `wm-button-wrapper`
+- `wm-button-container`
+
+## Class identifiers helpers
+
+In addition to the core features of the Global CSS Editor, the Helper Block is designed to assist you in the styling process. This searchable list of components provides quick access to all the class identifiers and CSS variables associated with each component. It also includes a convenient "Insert" button for each item, allowing you to quickly insert the class or variable into your CSS code.
+
+<video
+  className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
+  controls
+  src="/videos/css-helper-box.mp4"
+/>
+
+## How to Use the Helper Block
+
+1. Search for Components: Use the search bar to quickly find the component you are interested in styling.
+2. View Class Identifiers and Variables: Once you select a component, a list of its specific classes and modifiable CSS variables will be displayed.
+3. Insert to Code: Next to each class and variable, there is an "Insert" button. Clicking this will automatically insert the relevant item into the code editor.
+
+![Use helper](./use_helper.png 'Use helper')
+
+## Migrating Component-Level Styles to Global CSS
+
+In the Enterprise Edition of the Global CSS Editor, you can migrate component-level styles to the global level, streamlining the process of achieving consistent design across your application. This feature allows for two types of component-level styles to be migrated:
+
+1. Navigate to the component whose styles you wish to migrate. Select the option to 'Move to CSS editor', which will open a modal window.
+
+2. In the modal, you will see a list of all the CSS rules that can be moved to the global level. These are the styles you've previously set either for a specific component or for every component of a particular kind.
+
+3. You can preview the css rules that will be migrated. If the class already exists in the global CSS, the rule will be appended to the existing class. If the class does not exist, it will be created.
+
+4. Once you are satisfied with the changes, click the 'Migrate' button. This will move the styles to the global level and remove them from the component-level.
+
+<video
+  className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
+  controls
+  src="/videos/css-migration.mp4"
+/>
diff --git a/docs/misc/15_css_editor/use_helper.png b/docs/misc/15_css_editor/use_helper.png
diff --git a/docs/misc/7_plans_details/index.mdx b/docs/misc/7_plans_details/index.mdx
@@ -14,7 +14,7 @@ Windmill provides a range of pricing plans for both Cloud and Self-hosted deploy
 
 ## Cloud
 
-### Free Plan
+### Community Edition
 
 No commitment or credit card required.
 - Features include Google/Github/Microsoft/Gitlab SSO, unlimited variables/resources/scripts/apps/flows (except abuse), and 1000 free executions per month.
@@ -24,9 +24,11 @@ No commitment or credit card required.
 ### Team Plan
 
 Designed for small teams automating processes.
-- Includes all Free plan features.
+- Includes all Community edition features.
 - [Audit logs](../../core_concepts/14_audit_logs/index.mdx) with a 7-day retention period.
-- [Multiplayer](../../core_concepts/7_multiplayer/index.md) and [Deploy to staging/prod web UI](../../core_concepts/12_staging_prod/index.md).
+- [Global CSS](../15_css_editor/index.md).
+- [Multiplayer](../../core_concepts/7_multiplayer/index.md) editing.
+- [Deploy to staging/prod web UI](../../core_concepts/12_staging_prod/index.md).
 - [Priority Support](../12_support_and_sla/index.mdx) 24/7 with a 48-hour response time and automation engineer assistance.
 - Each seat: $10/month.
 - Each seat includes one user or two operators.
@@ -41,7 +43,9 @@ See [Upgrading to Team Edition](#upgrading-to-team-edition).
 Dedicated support and infrastructure for advanced capabilities.
 - [Audit logs](../../core_concepts/14_audit_logs/index.mdx) with a 60-day retention period.
 - SAML support.
-- [Multiplayer](../../core_concepts/7_multiplayer/index.md) and [Deploy to staging/prod web UI](../../core_concepts/12_staging_prod/index.md).
+- [Global CSS](../15_css_editor/index.md).
+- [Multiplayer](../../core_concepts/7_multiplayer/index.md) editing.
+- [Deploy to staging/prod web UI](../../core_concepts/12_staging_prod/index.md).
 - [SLA and priority support](../12_support_and_sla/index.mdx) with a 3-hour response time,
 - Opportunity to become a design partner for influencing the Windmill roadmap.
 - Each worker: $100/month.
@@ -88,6 +92,9 @@ See [Upgrading to Enterprise Edition](#upgrading-to-enterprise-edition).
 
 Designed for companies requiring dedicated support and advanced infrastructure.
 - [Audit logs](../../core_concepts/14_audit_logs/index.mdx) with a 60-day retention period.
+- [Global CSS](../15_css_editor/index.md).
+- [Multiplayer](../../core_concepts/7_multiplayer/index.md) editing.
+- [Deploy to staging/prod web UI](../../core_concepts/12_staging_prod/index.md).
 - Commercial license, [distributed dependency cache](../../advanced/6_imports/index.md), SAML support, [multiplayer on WebIDE](../../core_concepts/7_multiplayer/index.md), [Deploy to staging/prod web UI](../../core_concepts/12_staging_prod/index.md).
 - Shared Global Dependency Cache plugin to allow multiple workers to share a centralized cache.
 - [SLA and priority support](../12_support_and_sla/index.mdx) with a 3-hour response time,
diff --git a/sidebars.js b/sidebars.js
@@ -270,6 +270,7 @@ const sidebars = {
 				'core_concepts/staging_prod/index',
 				'core_concepts/multiplayer/index',
 				'misc/saml_and_scim/index',
+				'misc/css_editor/index',
 				'core_concepts/dedicated_workers/index'
 			]
 		},
diff --git a/src/components/Pricing.js b/src/components/Pricing.js
@@ -105,7 +105,7 @@ const pricing = {
 	],
 	cloud: [
 		{
-			name: 'Free',
+			name: 'Community',
 			id: 'tier-free',
 			href: '#',
 			price: {},
diff --git a/static/videos/css-helper-box.mp4 b/static/videos/css-helper-box.mp4
diff --git a/static/videos/css-migration.mp4 b/static/videos/css-migration.mp4
diff --git a/static/videos/global-css.mp4 b/static/videos/global-css.mp4
diff --git a/static/videos/global_styling.mp4 b/static/videos/global_styling.mp4

Original file line number	Diff line number	Diff line change
`@@ -68,4 +68,4 @@ The apps will be permissioned on behalf of the [admin/author](../16_roles_and_pe`
`68`	`68`
`69`	`69`	`<br/>`
`70`	`70`
`71`		`-At last, this is an easy way to get an app for your scripts and flows to be customized with [Styling](../../apps/4_app_configuration-settings/4_app_styling.md) and [Components](../../apps/4_app_configuration-settings/1_app_component_library.md).`
	`71`	`+At last, this is an easy way to get an app for your scripts and flows to be customized with [Styling](../../apps/4_app_configuration-settings/4_app_styling.mdx) and [Components](../../apps/4_app_configuration-settings/1_app_component_library.md).`