diff --git a/artifacts/rhdh-plugins-reference/quickstart/quickstart-plugin-admin.adoc b/artifacts/rhdh-plugins-reference/quickstart/quickstart-plugin-admin.adoc new file mode 100644 index 0000000000..8c47bc3aa9 --- /dev/null +++ b/artifacts/rhdh-plugins-reference/quickstart/quickstart-plugin-admin.adoc @@ -0,0 +1,55 @@ +[id="installing-configuring-quickstart-plugin"] += Installing and configuring the Quickstart plugin + +The Quickstart plugin provides a guided onboarding experience for new users of {product}. It displays a customizable drawer interface with interactive quickstart steps that help users get familiar with the platform. + +== Installation +The Quickstart plugin is pre-loaded in {product-short} with basic configuration properties, and enabled by default. To disable it, set the disabled property to `true` as follows: + +[source,yaml] +---- +global: + dynamic: + includes: + - dynamic-plugins.default.yaml + plugins: + - package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-quickstart + disabled: true +---- + +== Configuration +Configure quickstart items in your `app-config.yaml`: + +[source,yaml] +---- +app: + quickstart: + - title: 'Welcome to Developer Hub' + description: 'Learn the basics of navigating the Developer Hub interface' + icon: 'home' + cta: + text: 'Get Started' + link: '/catalog' + - title: 'Create Your First Component' + description: 'Follow our guide to register your first software component' + icon: 'code' + cta: + text: 'Create Component' + link: '/catalog-import' + - title: 'Explore Templates' + description: 'Discover available software templates to bootstrap new projects' + icon: 'template' + cta: + text: 'Browse Templates' + link: '/create' +---- + +== Configuration Schema +Each quickstart item supports the following properties: + +* `title` (required): The display title for the quickstart step +* `description` (required): A brief description of what the step covers +* `icon` (optional): Icon identifier (supports Material UI icons) +* `cta` (optional): Call-to-action object with: +* `text`: Button text +* `link`: Target URL or route \ No newline at end of file diff --git a/artifacts/rhdh-plugins-reference/quickstart/quickstart-plugin-user.adoc b/artifacts/rhdh-plugins-reference/quickstart/quickstart-plugin-user.adoc new file mode 100644 index 0000000000..5527acaa2c --- /dev/null +++ b/artifacts/rhdh-plugins-reference/quickstart/quickstart-plugin-user.adoc @@ -0,0 +1,72 @@ +[id="using-quickstart-plugin"] += Using the Quickstart plugin + +The Quickstart plugin provides a guided onboarding experience for new users of {product}. It displays a customizable drawer interface with interactive quickstart steps that help users get familiar with the platform. + +== Features +Interactive Drawer Interface:: Displays quickstart steps in a slide-out drawer. +Progress Tracking:: Tracks completion status of individual steps with persistent storage. +Configurable Content:: Define custom quickstart items through app configuration. +Visual Progress Indicator:: Shows overall completion progress with a progress bar. +Call-to-Action Support:: Each step can include clickable action buttons. + +.Procedure +. Open the Quickstart drawer +.. Navigate to the **top right corner** of the {product-short} interface. +.. Click the icon labeled **“Quick start”** (represented by a question mark icon in the top menu). +.. The drawer panel on the **right-hand side** of the screen slides open. + +. Review the available Quickstart items ++ +In the drawer, you will see a list of onboarding tasks, including: + +Set up authentication:: +Configure secure login credentials to protect your account. + +Configure RBAC:: + Set up Role-Based Access Control for your team. + +Configure Git:: + Connect your Git repositories for source control and automation. + +Manage plugins:: + Enable or disable additional functionality in the Hub. ++ +Each item may be expandable and interactive. + +. Track Your Progress +* Each Quick Start item includes a **status indicator**, such as: + ** _Not started_ + ** _In progress_ + ** _Completed_ ++ +As you complete each step or task, your progress is automatically tracked. + +[NOTE] +==== +Quickstart items are **configurable**, meaning the content and order can vary depending on your Red Hat Developer Hub instance. + +You can **revisit** or **reset** tasks at any time for review or team onboarding. + +You can hide the Quickstart drawer by clicking *Hide* +==== + +//// += Using the Context Hook +Access quickstart drawer functionality in your components: + +[source,yaml] +---- +import { useQuickstartDrawerContext } from '@red-hat-developer-hub/backstage-plugin-quickstart'; + +const MyComponent = () => { + const { openDrawer, closeDrawer, isDrawerOpen } = + useQuickstartDrawerContext(); + + return ; +}; +---- +//// + += Progress persistence +The plugin automatically saves progress, so users can continue where they left off even after refreshing the page or returning later. diff --git a/assemblies/assembly-configuring-the-quickstarts.adoc b/assemblies/assembly-configuring-the-quickstarts.adoc new file mode 100644 index 0000000000..a8ad516cda --- /dev/null +++ b/assemblies/assembly-configuring-the-quickstarts.adoc @@ -0,0 +1,10 @@ +:_mod-docs-content-type: ASSEMBLY +:context: customizing-the-quickstarts +[id="{context}"] += Customizing the Quickstart plugin + +include::modules/configuring-the-quickstarts/con-about-quickstarts.adoc[leveloffset=+1] + +include::modules/configuring-the-quickstarts/proc-customize-rhdh-quickstart.adoc[leveloffset=+1] + +include::modules/configuring-the-quickstarts/proc-starting-and-completing-modules-in-quickstarts.adoc[leveloffset=+1] \ No newline at end of file diff --git a/assemblies/dynamic-plugins/assembly-configuring-rhdh-plugins.adoc b/assemblies/dynamic-plugins/assembly-configuring-rhdh-plugins.adoc index eb541ce985..c5b32e6083 100644 --- a/assemblies/dynamic-plugins/assembly-configuring-rhdh-plugins.adoc +++ b/assemblies/dynamic-plugins/assembly-configuring-rhdh-plugins.adoc @@ -16,6 +16,9 @@ include::../../artifacts/rhdh-plugins-reference/keycloak/keycloak-plugin-admin.a // Nexus include::../../artifacts/rhdh-plugins-reference/nexus-repository-manager/nexus-repository-manager-plugin-admin.adoc[leveloffset=+1] +// Quick start +include::../../artifacts/rhdh-plugins-reference/quickstart/quickstart-plugin-admin.adoc[leveloffset=+1] + // Tekton include::../../artifacts/rhdh-plugins-reference/tekton/tekton-plugin-admin.adoc[leveloffset=+1] diff --git a/assemblies/dynamic-plugins/assembly-using-rhdh-plugins.adoc b/assemblies/dynamic-plugins/assembly-using-rhdh-plugins.adoc index 4d9d74eb90..519967d483 100644 --- a/assemblies/dynamic-plugins/assembly-using-rhdh-plugins.adoc +++ b/assemblies/dynamic-plugins/assembly-using-rhdh-plugins.adoc @@ -16,6 +16,9 @@ include::../../artifacts/rhdh-plugins-reference/keycloak/keycloak-plugin-user.ad // Nexus include::../../artifacts/rhdh-plugins-reference/nexus-repository-manager/nexus-repository-manager-plugin-user.adoc[leveloffset=+1] +// Quickstart +include::../../artifacts/rhdh-plugins-reference/quickstart/quickstart-plugin-user.adoc[leveloffset=+1] + // Tekton include::../../artifacts/rhdh-plugins-reference/tekton/tekton-plugin-user.adoc[leveloffset=+1] diff --git a/images/rhdh/about-quickstarts.png b/images/rhdh/about-quickstarts.png new file mode 100644 index 0000000000..56e63582e4 Binary files /dev/null and b/images/rhdh/about-quickstarts.png differ diff --git a/modules/configuring-the-quickstarts/con-about-quickstarts.adoc b/modules/configuring-the-quickstarts/con-about-quickstarts.adoc new file mode 100644 index 0000000000..b578e1eeab --- /dev/null +++ b/modules/configuring-the-quickstarts/con-about-quickstarts.adoc @@ -0,0 +1,13 @@ +:_mod-docs-content-type: CONCEPT + +[id="about-quickstarts_{context}"] += About Quickstarts + +The Quickstart plugin provides a guided onboarding experience for new users of {product}. It displays a customizable drawer interface with interactive quickstart steps that help users get familiar with the platform. + +The Quickstart plugin is enabled by default and includes the following components: + +Set up authentication:: Set up secure login credentials to protect your account from unauthorized access. +Configure RBAC:: Assign roles and permissions to control who can view, create, or edit resources, ensuring secure and efficient collaboration. +Configure Git:: Connect your Git providers, such as GitHub to manage code, automate workflows, and integrate with platform features. +Manage plugins:: Browse and install extensions to add features, connect with external tools, and customize your experience. diff --git a/modules/configuring-the-quickstarts/proc-customize-rhdh-quickstart.adoc b/modules/configuring-the-quickstarts/proc-customize-rhdh-quickstart.adoc new file mode 100644 index 0000000000..74ee6a4bfb --- /dev/null +++ b/modules/configuring-the-quickstarts/proc-customize-rhdh-quickstart.adoc @@ -0,0 +1,55 @@ +[id="customizing-your-product-quickstart_{context}"] += Customizing your {product} Quickstart + +You can configure the {product} Quickstart plugin to create a customized onboarding experience for your {product-short} administrators. + +.Prerequisites +You must have sufficient permissions as a platform engineer. + +.Procedure +. Update your your `app-config.yaml`, as follows: ++ +.Example of customizing the Quickstart plugin +[source,yaml] +---- +app: + quickstart: + - title: 'Welcome to Developer Hub' # <1> + description: 'Learn the basics of navigating the Developer Hub interface' # <2> + icon: 'home' # <3> + cta: + text: 'Get Started' # <4> + link: '/catalog' # <5> + - title: 'Create Your First Component' + description: 'Follow our guide to register your first software component' + icon: 'code' + cta: + text: 'Create Component' + link: '/catalog-import' + - title: 'Explore Templates' + description: 'Discover available software templates to bootstrap new projects' + icon: 'template' + cta: + text: 'Browse Templates' + link: '/create' +---- +<1> (Required) The display title for the quickstart step. +<2> (Required) A brief description of what the step covers. +<3> Icon identifier (supports Material UI icons). +<4> CTA button text. +<5> CTA target URL or route. + +== Disabling the Quickstart plugin +The Quickstart plugin is pre-loaded in {product-short} with basic configuration properties, and enabled by default. To disable it, set the disabled property to `true` as follows: + +.Example of disabling the Quickstart plugin +[source,yaml] +---- +global: + dynamic: + includes: + - dynamic-plugins.default.yaml + plugins: + - package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-quickstart + disabled: true +---- \ No newline at end of file diff --git a/modules/configuring-the-quickstarts/proc-starting-and-completing-modules-in-quickstarts.adoc b/modules/configuring-the-quickstarts/proc-starting-and-completing-modules-in-quickstarts.adoc new file mode 100644 index 0000000000..c135a77a92 --- /dev/null +++ b/modules/configuring-the-quickstarts/proc-starting-and-completing-modules-in-quickstarts.adoc @@ -0,0 +1,22 @@ +[id='proc-starting-and-completing-modules-in-quickstarts_{context}'] += Starting and completing Quickstart onboarding steps + +You can start and complete the Quickstart onboarding steps at your own pace. + +.Prerequisites +. Your platform engineer has granted you access to the Quickstart plugin. + +.Procedure +To start a Quickstart step in {product}, complete the following steps: + +. In your {product-very-short} navigation menu, click on the (`?`) icon. +. Click *Quick start*. +. Select the Quickstart step that you would like to begin. +. To close the Quickstart drawer, click *Hide*. ++ +image::rhdh/about-quickstarts.png[About Quickstarts] ++ +[NOTE] +==== +Your progress is tracked and displayed at the bottom of the drawer. +==== \ No newline at end of file diff --git a/titles/customizing/master.adoc b/titles/customizing/master.adoc index 52fdfd7920..d5c480b50e 100644 --- a/titles/customizing/master.adoc +++ b/titles/customizing/master.adoc @@ -30,6 +30,8 @@ include::assemblies/assembly-configuring-the-global-header.adoc[leveloffset=+1] include::assemblies/assembly-configuring-a-floating-action-button.adoc[leveloffset=+1] +include::assemblies/assembly-configuring-the-quickstarts.adoc[leveloffset=+1] + include::assemblies/assembly-customizing-the-tech-radar-page.adoc[leveloffset=+1]