feat(quickstart): add permission fetching for quickstart roles (#1373)

* feat(quickstart): add permission fetching for quickstart roles

Signed-off-by: Yi Cai <yicai@redhat.com>

* added changeset

Signed-off-by: Yi Cai <yicai@redhat.com>

* updated logic for rbac not enabled

Signed-off-by: Yi Cai <yicai@redhat.com>

* updated readme

Signed-off-by: Yi Cai <yicai@redhat.com>

* updated logic

Signed-off-by: Yi Cai <yicai@redhat.com>

* updated package version

Signed-off-by: Yi Cai <yicai@redhat.com>

* updated test to reduce duplicates

Signed-off-by: Yi Cai <yicai@redhat.com>

* hide quickstart when no items setup

Signed-off-by: Yi Cai <yicai@redhat.com>

---------

Signed-off-by: Yi Cai <yicai@redhat.com>

Author: ciiay

workspaces/quickstart/.changeset/six-numbers-dance.md

@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-quickstart': minor
+---
+
+Enabled Quickstart items for developer role.

workspaces/quickstart/plugins/quickstart/README.md

@@ -9,6 +9,7 @@ The Quickstart plugin provides a guided onboarding experience for new users of R
 - **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
+- **Role-Based Access Control**: Show different quickstart items based on user roles (admin/developer)
 
 ## Installation
 
@@ -44,18 +45,28 @@ app:
     - title: 'Welcome to Developer Hub'
       description: 'Learn the basics of navigating the Developer Hub interface'
       icon: 'home'
+      roles: ['admin', 'developer'] # Show to both roles
       cta:
         text: 'Get Started'
         link: '/catalog'
+    - title: 'Configure RBAC Policies'
+      description: 'Set up role-based access control for your organization'
+      icon: 'security'
+      roles: ['admin'] # Admin-only quickstart item
+      cta:
+        text: 'Configure RBAC'
+        link: '/rbac'
     - title: 'Create Your First Component'
       description: 'Follow our guide to register your first software component'
       icon: 'code'
+      # No roles specified - defaults to 'admin'
       cta:
         text: 'Create Component'
         link: '/catalog-import'
     - title: 'Explore Templates'
       description: 'Discover available software templates to bootstrap new projects'
       icon: 'template'
+      roles: ['developer'] # Developer-only quickstart item
       cta:
         text: 'Browse Templates'
         link: '/create'
@@ -68,10 +79,56 @@ 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)
+- `roles` (optional): Array of user roles that should see this quickstart item. Supported values: `['admin', 'developer']`. If not specified, defaults to `['admin']`
 - `cta` (optional): Call-to-action object with:
   - `text`: Button text
   - `link`: Target URL or route
 
+## Role-Based Access Control (RBAC)
+
+The quickstart plugin integrates with Backstage's RBAC system to show different quickstart items based on user roles.
+
+### User Role Determination
+
+The plugin determines user roles using the following logic:
+
+- **When RBAC is disabled** (`permission.enabled: false` or not configured): Users are assumed to be platform engineers setting up RHDH and are assigned the `admin` role
+- **When RBAC is enabled** (`permission.enabled: true`): User roles are determined based on permissions:
+  - Users with `policy.entity.create` permission are assigned the `admin` role
+  - Users without this permission are assigned the `developer` role
+
+### Supported Roles
+
+- **`admin`**: Platform engineers, administrators, and users with elevated permissions
+- **`developer`**: Regular developers and users with standard permissions
+
+### Role Assignment Behavior
+
+- Quickstart items without a `roles` property default to `['admin']`
+- Items can specify multiple roles: `roles: ['admin', 'developer']`
+- Users only see quickstart items that match their assigned role
+
+### Configuration Example
+
+Enable RBAC in your `app-config.yaml`:
+
+```yaml
+permission:
+  enabled: true
+
+app:
+  quickstart:
+    - title: 'Platform Configuration'
+      roles: ['admin']
+      # Only admins see this
+    - title: 'Getting Started as Developer'
+      roles: ['developer']
+      # Only developers see this
+    - title: 'Universal Welcome Guide'
+      roles: ['admin', 'developer']
+      # Both roles see this
+```
+
 ## Usage
 
 ### Using the Context Hook

workspaces/quickstart/plugins/quickstart/package.json

@@ -32,13 +32,15 @@
     "postpack": "backstage-cli package postpack"
   },
   "dependencies": {
+    "@backstage-community/plugin-rbac-common": "^1.19.0",
     "@backstage/core-components": "^0.17.4",
     "@backstage/core-plugin-api": "^1.10.9",
+    "@backstage/plugin-permission-react": "^0.4.36",
     "@backstage/theme": "^0.6.7",
     "@mui/icons-material": "5.18.0",
     "@mui/material": "5.18.0",
     "@red-hat-developer-hub/backstage-plugin-theme": "^0.9.0",
-    "react-use": "^17.2.4"
+    "react-use": "^17.6.0"
   },
   "peerDependencies": {
     "react": "^16.13.1 || ^17.0.0 || ^18.0.0"
@@ -47,6 +49,7 @@
     "@backstage/cli": "^0.33.1",
     "@backstage/core-app-api": "^1.18.0",
     "@backstage/dev-utils": "^1.1.12",
+    "@backstage/plugin-permission-common": "^0.9.1",
     "@backstage/test-utils": "^1.7.10",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^14.0.0",

workspaces/quickstart/plugins/quickstart/src/components/Quickstart.test.tsx

@@ -38,6 +38,7 @@ describe('Quickstart', () => {
       <Quickstart
         quickstartItems={items}
         handleDrawerClose={mockHandleDrawerClose}
+        isLoading={false}
       />,
     );
   };
@@ -92,16 +93,6 @@ describe('Quickstart', () => {
 
       expectHideButton();
     });
-
-    it('shows empty state when no items match user role', async () => {
-      await renderWithRole('manager');
-
-      // Should show empty state
-      expect(
-        screen.getByText('Quickstart content not available for your role.'),
-      ).toBeInTheDocument();
-      expectHideButton();
-    });
   });
 
   describe('Progress calculation with role-based items', () => {
@@ -180,19 +171,5 @@ describe('Quickstart', () => {
 
       expect(mockHandleDrawerClose).toHaveBeenCalledTimes(1);
     });
-
-    it('handles empty items array gracefully', async () => {
-      await renderInTestApp(
-        <Quickstart
-          quickstartItems={[]}
-          handleDrawerClose={mockHandleDrawerClose}
-        />,
-      );
-
-      expect(
-        screen.getByText('Quickstart content not available for your role.'),
-      ).toBeInTheDocument();
-      expectHideButton();
-    });
   });
 });

workspaces/quickstart/plugins/quickstart/src/components/Quickstart.tsx

@@ -25,11 +25,13 @@ import { QuickstartItemData } from '../types';
 type QuickstartProps = {
   quickstartItems: QuickstartItemData[];
   handleDrawerClose: () => void;
+  isLoading: boolean;
 };
 
 export const Quickstart = ({
   quickstartItems,
   handleDrawerClose,
+  isLoading,
 }: QuickstartProps) => {
   const itemCount = quickstartItems.length;
   const [progress, setProgress] = useState<number>(0);
@@ -75,6 +77,7 @@ export const Quickstart = ({
             const newProgress = calculateProgress();
             setProgress(newProgress);
           }}
+          isLoading={isLoading}
         />
       </Box>
       <QuickstartFooter

workspaces/quickstart/plugins/quickstart/src/components/QuickstartButton/QuickstartButton.test.tsx

@@ -14,59 +14,115 @@
  * limitations under the License.
  */
 
-import { render, screen, fireEvent } from '@testing-library/react';
+import { screen, fireEvent } from '@testing-library/react';
+import {
+  mockApis,
+  renderInTestApp,
+  TestApiProvider,
+} from '@backstage/test-utils';
+import { configApiRef } from '@backstage/core-plugin-api';
 import { QuickstartButton } from './QuickstartButton';
-import { useQuickstartPermission } from '../../hooks/useQuickstartPermission';
 import { useQuickstartDrawerContext } from '../../hooks/useQuickstartDrawerContext';
+import { useQuickstartRole } from '../../hooks/useQuickstartRole';
 
 // Mock the hooks
-jest.mock('../../hooks/useQuickstartPermission', () => ({
-  useQuickstartPermission: jest.fn(),
-}));
-
 jest.mock('../../hooks/useQuickstartDrawerContext', () => ({
   useQuickstartDrawerContext: jest.fn(),
 }));
 
+jest.mock('../../hooks/useQuickstartRole', () => ({
+  useQuickstartRole: jest.fn(),
+}));
+
 describe('QuickstartButton', () => {
   const mockToggleDrawer = jest.fn();
   const mockOnClick = jest.fn();
 
+  const mockConfigApi = mockApis.config({
+    data: {
+      app: {
+        quickstart: [
+          {
+            title: 'Test Quickstart',
+            roles: ['admin'],
+            steps: [],
+          },
+        ],
+      },
+    },
+  });
+
   beforeEach(() => {
     jest.clearAllMocks();
-    (useQuickstartPermission as jest.Mock).mockReturnValue(true);
     (useQuickstartDrawerContext as jest.Mock).mockReturnValue({
       toggleDrawer: mockToggleDrawer,
     });
+    (useQuickstartRole as jest.Mock).mockReturnValue({
+      isLoading: false,
+      userRole: 'admin',
+    });
   });
 
-  it('renders the button when permission is allowed', () => {
-    render(<QuickstartButton />);
+  const renderWithApi = (configApi = mockConfigApi) => {
+    return renderInTestApp(
+      <TestApiProvider apis={[[configApiRef, configApi]]}>
+        <QuickstartButton />
+      </TestApiProvider>,
+    );
+  };
+
+  it('renders the button when user has quickstart items', async () => {
+    await renderWithApi();
 
     const button = screen.getByTestId('quickstart-button');
     expect(button).toBeInTheDocument();
     expect(screen.getByText('Quick start')).toBeInTheDocument();
   });
 
-  it('does not render when permission is denied', () => {
-    (useQuickstartPermission as jest.Mock).mockReturnValue(false);
+  it('does not render when user has no quickstart items', async () => {
+    const emptyConfigApi = mockApis.config({
+      data: {
+        app: {
+          quickstart: [],
+        },
+      },
+    });
 
-    render(<QuickstartButton />);
+    await renderWithApi(emptyConfigApi);
 
-    expect(screen.queryByTestId('quickstart-button')).not.toBeInTheDocument();
+    const button = screen.queryByTestId('quickstart-button');
+    expect(button).not.toBeInTheDocument();
   });
 
-  it('calls toggleDrawer when clicked', () => {
-    render(<QuickstartButton />);
+  it('does not render when user role does not match any items', async () => {
+    (useQuickstartRole as jest.Mock).mockReturnValue({
+      isLoading: false,
+      userRole: 'developer', // No items for developer in our mock config
+    });
+
+    await renderWithApi();
+
+    const button = screen.queryByTestId('quickstart-button');
+    expect(button).not.toBeInTheDocument();
+  });
+
+  it('calls toggleDrawer when clicked', async () => {
+    await renderWithApi();
 
     const button = screen.getByTestId('quickstart-button');
     fireEvent.click(button);
 
     expect(mockToggleDrawer).toHaveBeenCalledTimes(1);
   });
 
-  it('calls custom onClick when provided', () => {
-    render(<QuickstartButton onClick={mockOnClick} />);
+  it('calls custom onClick when provided', async () => {
+    const { rerender } = await renderWithApi();
+
+    rerender(
+      <TestApiProvider apis={[[configApiRef, mockConfigApi]]}>
+        <QuickstartButton onClick={mockOnClick} />
+      </TestApiProvider>,
+    );
 
     const button = screen.getByTestId('quickstart-button');
     fireEvent.click(button);
@@ -75,15 +131,27 @@ describe('QuickstartButton', () => {
     expect(mockOnClick).toHaveBeenCalledTimes(1);
   });
 
-  it('renders with custom title', () => {
-    render(<QuickstartButton title="Custom Quickstart" />);
+  it('renders with custom title', async () => {
+    const { rerender } = await renderWithApi();
+
+    rerender(
+      <TestApiProvider apis={[[configApiRef, mockConfigApi]]}>
+        <QuickstartButton title="Custom Quickstart" />
+      </TestApiProvider>,
+    );
 
     expect(screen.getByText('Custom Quickstart')).toBeInTheDocument();
   });
 
-  it('applies custom styles', () => {
+  it('applies custom styles', async () => {
     const customStyle = { backgroundColor: 'red' };
-    render(<QuickstartButton style={customStyle} />);
+    const { rerender } = await renderWithApi();
+
+    rerender(
+      <TestApiProvider apis={[[configApiRef, mockConfigApi]]}>
+        <QuickstartButton style={customStyle} />
+      </TestApiProvider>,
+    );
 
     const button = screen.getByTestId('quickstart-button');
     expect(button).toHaveStyle('background-color: red');