@red-hat-developer-hub/backstage-plugin-quickstart 1.2.0 → 1.4.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @red-hat-developer-hub/backstage-plugin-quickstart
 
+## 1.4.0
+
+### Minor Changes
+
+- 47fd25f: Enabled Quickstart items for developer role.
+
+## 1.3.0
+
+### Minor Changes
+
+- bc88e5f: Add internationalization (i18n) support with German, French and Spanish translations in quickstart.
+
 ## 1.2.0
 
 ### Minor Changes

package/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

package/dist/components/Quickstart.esm.js

@@ -8,7 +8,8 @@ import { useState, useCallback, useEffect } from 'react';
 
 const Quickstart = ({
   quickstartItems,
-  handleDrawerClose
+  handleDrawerClose,
+  isLoading
 }) => {
   const itemCount = quickstartItems.length;
   const [progress, setProgress] = useState(0);
@@ -54,7 +55,8 @@ const Quickstart = ({
                   setProgress: () => {
                     const newProgress = calculateProgress();
                     setProgress(newProgress);
-                  }
+                  },
+                  isLoading
                 }
               )
             ]

package/dist/components/Quickstart.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"Quickstart.esm.js","sources":["../../src/components/Quickstart.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport Box from '@mui/material/Box';\nimport { QuickstartHeader } from './QuickstartHeader';\nimport Divider from '@mui/material/Divider';\nimport { QuickstartContent } from './QuickstartContent/QuickstartContent';\nimport { QuickstartFooter } from './QuickstartFooter';\nimport { useEffect, useState, useCallback } from 'react';\nimport { QuickstartItemData } from '../types';\n\ntype QuickstartProps = {\n  quickstartItems: QuickstartItemData[];\n  handleDrawerClose: () => void;\n};\n\nexport const Quickstart = ({\n  quickstartItems,\n  handleDrawerClose,\n}: QuickstartProps) => {\n  const itemCount = quickstartItems.length;\n  const [progress, setProgress] = useState<number>(0);\n\n  const calculateProgress = useCallback(() => {\n    const completedCount = quickstartItems.filter((item, index) => {\n      const itemKey = `${item.title}-${index}`;\n      const stepState = localStorage.getItem(itemKey);\n      return stepState === 'true';\n    }).length;\n\n    const percentage = (completedCount / itemCount) * 100;\n    return Math.round(percentage * 100) / 100;\n  }, [quickstartItems, itemCount]);\n\n  useEffect(() => {\n    const calculatedProgress = calculateProgress();\n    setProgress(calculatedProgress);\n    localStorage.setItem('progressState', calculatedProgress.toString());\n  }, [quickstartItems, itemCount, calculateProgress]);\n\n  return (\n    <Box\n      sx={{\n        height: '100%',\n        display: 'flex',\n        flexDirection: 'column',\n      }}\n    >\n      <Box\n        sx={{\n          flex: 1,\n          padding: theme => theme.spacing(3),\n          overflowY: 'auto',\n        }}\n      >\n        <QuickstartHeader />\n        <Divider />\n        <QuickstartContent\n          quickstartItems={quickstartItems}\n          itemCount={itemCount}\n          setProgress={() => {\n            const newProgress = calculateProgress();\n            setProgress(newProgress);\n          }}\n        />\n      </Box>\n      <QuickstartFooter\n        handleDrawerClose={handleDrawerClose}\n        progress={progress}\n      />\n    </Box>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AA6BO,MAAM,aAAa,CAAC;AAAA,EACzB,eAAA;AAAA,EACA;AACF,CAAuB,KAAA;AACrB,EAAA,MAAM,YAAY,eAAgB,CAAA,MAAA;AAClC,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAiB,CAAC,CAAA;AAElD,EAAM,MAAA,iBAAA,GAAoB,YAAY,MAAM;AAC1C,IAAA,MAAM,cAAiB,GAAA,eAAA,CAAgB,MAAO,CAAA,CAAC,MAAM,KAAU,KAAA;AAC7D,MAAA,MAAM,OAAU,GAAA,CAAA,EAAG,IAAK,CAAA,KAAK,IAAI,KAAK,CAAA,CAAA;AACtC,MAAM,MAAA,SAAA,GAAY,YAAa,CAAA,OAAA,CAAQ,OAAO,CAAA;AAC9C,MAAA,OAAO,SAAc,KAAA,MAAA;AAAA,KACtB,CAAE,CAAA,MAAA;AAEH,IAAM,MAAA,UAAA,GAAc,iBAAiB,SAAa,GAAA,GAAA;AAClD,IAAA,OAAO,IAAK,CAAA,KAAA,CAAM,UAAa,GAAA,GAAG,CAAI,GAAA,GAAA;AAAA,GACrC,EAAA,CAAC,eAAiB,EAAA,SAAS,CAAC,CAAA;AAE/B,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,qBAAqB,iBAAkB,EAAA;AAC7C,IAAA,WAAA,CAAY,kBAAkB,CAAA;AAC9B,IAAA,YAAA,CAAa,OAAQ,CAAA,eAAA,EAAiB,kBAAmB,CAAA,QAAA,EAAU,CAAA;AAAA,GAClE,EAAA,CAAC,eAAiB,EAAA,SAAA,EAAW,iBAAiB,CAAC,CAAA;AAElD,EACE,uBAAA,IAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,EAAI,EAAA;AAAA,QACF,MAAQ,EAAA,MAAA;AAAA,QACR,OAAS,EAAA,MAAA;AAAA,QACT,aAAe,EAAA;AAAA,OACjB;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,IAAA;AAAA,UAAC,GAAA;AAAA,UAAA;AAAA,YACC,EAAI,EAAA;AAAA,cACF,IAAM,EAAA,CAAA;AAAA,cACN,OAAS,EAAA,CAAA,KAAA,KAAS,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,cACjC,SAAW,EAAA;AAAA,aACb;AAAA,YAEA,QAAA,EAAA;AAAA,8BAAA,GAAA,CAAC,gBAAiB,EAAA,EAAA,CAAA;AAAA,kCACjB,OAAQ,EAAA,EAAA,CAAA;AAAA,8BACT,GAAA;AAAA,gBAAC,iBAAA;AAAA,gBAAA;AAAA,kBACC,eAAA;AAAA,kBACA,SAAA;AAAA,kBACA,aAAa,MAAM;AACjB,oBAAA,MAAM,cAAc,iBAAkB,EAAA;AACtC,oBAAA,WAAA,CAAY,WAAW,CAAA;AAAA;AACzB;AAAA;AACF;AAAA;AAAA,SACF;AAAA,wBACA,GAAA;AAAA,UAAC,gBAAA;AAAA,UAAA;AAAA,YACC,iBAAA;AAAA,YACA;AAAA;AAAA;AACF;AAAA;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"Quickstart.esm.js","sources":["../../src/components/Quickstart.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport Box from '@mui/material/Box';\nimport { QuickstartHeader } from './QuickstartHeader';\nimport Divider from '@mui/material/Divider';\nimport { QuickstartContent } from './QuickstartContent/QuickstartContent';\nimport { QuickstartFooter } from './QuickstartFooter';\nimport { useEffect, useState, useCallback } from 'react';\nimport { QuickstartItemData } from '../types';\n\ntype QuickstartProps = {\n  quickstartItems: QuickstartItemData[];\n  handleDrawerClose: () => void;\n  isLoading: boolean;\n};\n\nexport const Quickstart = ({\n  quickstartItems,\n  handleDrawerClose,\n  isLoading,\n}: QuickstartProps) => {\n  const itemCount = quickstartItems.length;\n  const [progress, setProgress] = useState<number>(0);\n\n  const calculateProgress = useCallback(() => {\n    const completedCount = quickstartItems.filter((item, index) => {\n      const itemKey = `${item.title}-${index}`;\n      const stepState = localStorage.getItem(itemKey);\n      return stepState === 'true';\n    }).length;\n\n    const percentage = (completedCount / itemCount) * 100;\n    return Math.round(percentage * 100) / 100;\n  }, [quickstartItems, itemCount]);\n\n  useEffect(() => {\n    const calculatedProgress = calculateProgress();\n    setProgress(calculatedProgress);\n    localStorage.setItem('progressState', calculatedProgress.toString());\n  }, [quickstartItems, itemCount, calculateProgress]);\n\n  return (\n    <Box\n      sx={{\n        height: '100%',\n        display: 'flex',\n        flexDirection: 'column',\n      }}\n    >\n      <Box\n        sx={{\n          flex: 1,\n          padding: theme => theme.spacing(3),\n          overflowY: 'auto',\n        }}\n      >\n        <QuickstartHeader />\n        <Divider />\n        <QuickstartContent\n          quickstartItems={quickstartItems}\n          itemCount={itemCount}\n          setProgress={() => {\n            const newProgress = calculateProgress();\n            setProgress(newProgress);\n          }}\n          isLoading={isLoading}\n        />\n      </Box>\n      <QuickstartFooter\n        handleDrawerClose={handleDrawerClose}\n        progress={progress}\n      />\n    </Box>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AA8BO,MAAM,aAAa,CAAC;AAAA,EACzB,eAAA;AAAA,EACA,iBAAA;AAAA,EACA;AACF,CAAuB,KAAA;AACrB,EAAA,MAAM,YAAY,eAAgB,CAAA,MAAA;AAClC,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAiB,CAAC,CAAA;AAElD,EAAM,MAAA,iBAAA,GAAoB,YAAY,MAAM;AAC1C,IAAA,MAAM,cAAiB,GAAA,eAAA,CAAgB,MAAO,CAAA,CAAC,MAAM,KAAU,KAAA;AAC7D,MAAA,MAAM,OAAU,GAAA,CAAA,EAAG,IAAK,CAAA,KAAK,IAAI,KAAK,CAAA,CAAA;AACtC,MAAM,MAAA,SAAA,GAAY,YAAa,CAAA,OAAA,CAAQ,OAAO,CAAA;AAC9C,MAAA,OAAO,SAAc,KAAA,MAAA;AAAA,KACtB,CAAE,CAAA,MAAA;AAEH,IAAM,MAAA,UAAA,GAAc,iBAAiB,SAAa,GAAA,GAAA;AAClD,IAAA,OAAO,IAAK,CAAA,KAAA,CAAM,UAAa,GAAA,GAAG,CAAI,GAAA,GAAA;AAAA,GACrC,EAAA,CAAC,eAAiB,EAAA,SAAS,CAAC,CAAA;AAE/B,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,qBAAqB,iBAAkB,EAAA;AAC7C,IAAA,WAAA,CAAY,kBAAkB,CAAA;AAC9B,IAAA,YAAA,CAAa,OAAQ,CAAA,eAAA,EAAiB,kBAAmB,CAAA,QAAA,EAAU,CAAA;AAAA,GAClE,EAAA,CAAC,eAAiB,EAAA,SAAA,EAAW,iBAAiB,CAAC,CAAA;AAElD,EACE,uBAAA,IAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,EAAI,EAAA;AAAA,QACF,MAAQ,EAAA,MAAA;AAAA,QACR,OAAS,EAAA,MAAA;AAAA,QACT,aAAe,EAAA;AAAA,OACjB;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,IAAA;AAAA,UAAC,GAAA;AAAA,UAAA;AAAA,YACC,EAAI,EAAA;AAAA,cACF,IAAM,EAAA,CAAA;AAAA,cACN,OAAS,EAAA,CAAA,KAAA,KAAS,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,cACjC,SAAW,EAAA;AAAA,aACb;AAAA,YAEA,QAAA,EAAA;AAAA,8BAAA,GAAA,CAAC,gBAAiB,EAAA,EAAA,CAAA;AAAA,kCACjB,OAAQ,EAAA,EAAA,CAAA;AAAA,8BACT,GAAA;AAAA,gBAAC,iBAAA;AAAA,gBAAA;AAAA,kBACC,eAAA;AAAA,kBACA,SAAA;AAAA,kBACA,aAAa,MAAM;AACjB,oBAAA,MAAM,cAAc,iBAAkB,EAAA;AACtC,oBAAA,WAAA,CAAY,WAAW,CAAA;AAAA,mBACzB;AAAA,kBACA;AAAA;AAAA;AACF;AAAA;AAAA,SACF;AAAA,wBACA,GAAA;AAAA,UAAC,gBAAA;AAAA,UAAA;AAAA,YACC,iBAAA;AAAA,YACA;AAAA;AAAA;AACF;AAAA;AAAA,GACF;AAEJ;;;;"}

package/dist/components/QuickstartButton/QuickstartButton.esm.js

@@ -5,23 +5,35 @@ import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 import { useTheme } from '@mui/material/styles';
 import WavingHandIcon from '@mui/icons-material/WavingHandOutlined';
-import { useQuickstartPermission } from '../../hooks/useQuickstartPermission.esm.js';
 import { useQuickstartDrawerContext } from '../../hooks/useQuickstartDrawerContext.esm.js';
+import { useTranslation } from '../../hooks/useTranslation.esm.js';
+import { useApiHolder, configApiRef } from '@backstage/core-plugin-api';
+import { filterQuickstartItemsByRole } from '../../utils/filterQuickstartItems.esm.js';
+import { useQuickstartRole } from '../../hooks/useQuickstartRole.esm.js';
 
 const QuickstartButton = ({
-  title = "Quick start",
+  title,
   style,
   onClick = () => {
   }
 }) => {
-  const isAllowed = useQuickstartPermission();
+  const { t } = useTranslation();
   const { toggleDrawer } = useQuickstartDrawerContext();
   const theme = useTheme();
+  const apiHolder = useApiHolder();
+  const config = apiHolder.get(configApiRef);
+  const quickstartItems = config?.has("app.quickstart") ? config.get("app.quickstart") : [];
+  const { isLoading, userRole } = useQuickstartRole();
+  const filteredItems = !isLoading && userRole ? filterQuickstartItemsByRole(quickstartItems, userRole) : [];
+  const defaultTitle = t("button.quickstart");
   const handleClick = useCallback(() => {
     toggleDrawer();
     onClick();
   }, [toggleDrawer, onClick]);
-  return isAllowed ? /* @__PURE__ */ jsx(
+  if (!isLoading && filteredItems.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
     MenuItem,
     {
       sx: {
@@ -64,14 +76,14 @@ const QuickstartButton = ({
                   flexDirection: "column",
                   justifyContent: "center"
                 },
-                children: /* @__PURE__ */ jsx(Typography, { variant: "body2", color: theme.palette.text.primary, children: title })
+                children: /* @__PURE__ */ jsx(Typography, { variant: "body2", color: theme.palette.text.primary, children: title || defaultTitle })
               }
             )
           ] })
         }
       )
     }
-  ) : null;
+  );
 };
 
 export { QuickstartButton };

package/dist/components/QuickstartButton/QuickstartButton.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"QuickstartButton.esm.js","sources":["../../../src/components/QuickstartButton/QuickstartButton.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { CSSProperties, useCallback } from 'react';\nimport MenuItem from '@mui/material/MenuItem';\nimport Box from '@mui/material/Box';\nimport Typography from '@mui/material/Typography';\nimport { useTheme } from '@mui/material/styles';\nimport WavingHandIcon from '@mui/icons-material/WavingHandOutlined';\nimport { useQuickstartPermission } from '../../hooks/useQuickstartPermission';\nimport { useQuickstartDrawerContext } from '../../hooks/useQuickstartDrawerContext';\n\n/**\n * Props for the QuickstartButton component\n * @public\n */\nexport interface QuickstartButtonProps {\n  /**\n   * The title text to display in the button\n   * @defaultValue 'Quick start'\n   */\n  title?: string;\n  /**\n   * Custom CSS styles to apply to the button\n   */\n  style?: CSSProperties;\n  /**\n   * Optional callback function to execute when the button is clicked\n   */\n  onClick?: () => void;\n}\n\n/**\n * @public\n */\nexport const QuickstartButton = ({\n  title = 'Quick start',\n  style,\n  onClick = () => {},\n}: QuickstartButtonProps) => {\n  const isAllowed = useQuickstartPermission();\n  const { toggleDrawer } = useQuickstartDrawerContext();\n  const theme = useTheme();\n\n  const handleClick = useCallback(() => {\n    toggleDrawer();\n    onClick();\n  }, [toggleDrawer, onClick]);\n\n  return isAllowed ? (\n    <MenuItem\n      sx={{\n        width: '100%',\n        color: 'inherit',\n        ...style,\n      }}\n      data-testid=\"quickstart-button\"\n      onClick={handleClick}\n    >\n      <Box\n        sx={{\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          margin: '8px 0',\n          color: 'inherit',\n          width: '100%',\n        }}\n      >\n        <Box sx={{ display: 'flex', alignItems: 'center' }}>\n          <WavingHandIcon\n            sx={{\n              fontSize: 20,\n              marginRight: '0.5rem',\n              flexShrink: 0,\n              display: 'flex',\n              alignItems: 'center',\n              color:\n                theme.palette.mode === 'dark'\n                  ? theme.palette.text.primary\n                  : theme.palette.text.disabled,\n            }}\n          />\n          <Box\n            sx={{\n              display: 'flex',\n              flexDirection: 'column',\n              justifyContent: 'center',\n            }}\n          >\n            <Typography variant=\"body2\" color={theme.palette.text.primary}>\n              {title}\n            </Typography>\n          </Box>\n        </Box>\n      </Box>\n    </MenuItem>\n  ) : null;\n};\n"],"names":[],"mappings":";;;;;;;;;;AAgDO,MAAM,mBAAmB,CAAC;AAAA,EAC/B,KAAQ,GAAA,aAAA;AAAA,EACR,KAAA;AAAA,EACA,UAAU,MAAM;AAAA;AAClB,CAA6B,KAAA;AAC3B,EAAA,MAAM,YAAY,uBAAwB,EAAA;AAC1C,EAAM,MAAA,EAAE,YAAa,EAAA,GAAI,0BAA2B,EAAA;AACpD,EAAA,MAAM,QAAQ,QAAS,EAAA;AAEvB,EAAM,MAAA,WAAA,GAAc,YAAY,MAAM;AACpC,IAAa,YAAA,EAAA;AACb,IAAQ,OAAA,EAAA;AAAA,GACP,EAAA,CAAC,YAAc,EAAA,OAAO,CAAC,CAAA;AAE1B,EAAA,OAAO,SACL,mBAAA,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,EAAI,EAAA;AAAA,QACF,KAAO,EAAA,MAAA;AAAA,QACP,KAAO,EAAA,SAAA;AAAA,QACP,GAAG;AAAA,OACL;AAAA,MACA,aAAY,EAAA,mBAAA;AAAA,MACZ,OAAS,EAAA,WAAA;AAAA,MAET,QAAA,kBAAA,GAAA;AAAA,QAAC,GAAA;AAAA,QAAA;AAAA,UACC,EAAI,EAAA;AAAA,YACF,OAAS,EAAA,MAAA;AAAA,YACT,UAAY,EAAA,QAAA;AAAA,YACZ,cAAgB,EAAA,eAAA;AAAA,YAChB,MAAQ,EAAA,OAAA;AAAA,YACR,KAAO,EAAA,SAAA;AAAA,YACP,KAAO,EAAA;AAAA,WACT;AAAA,UAEA,QAAA,kBAAA,IAAA,CAAC,OAAI,EAAI,EAAA,EAAE,SAAS,MAAQ,EAAA,UAAA,EAAY,UACtC,EAAA,QAAA,EAAA;AAAA,4BAAA,GAAA;AAAA,cAAC,cAAA;AAAA,cAAA;AAAA,gBACC,EAAI,EAAA;AAAA,kBACF,QAAU,EAAA,EAAA;AAAA,kBACV,WAAa,EAAA,QAAA;AAAA,kBACb,UAAY,EAAA,CAAA;AAAA,kBACZ,OAAS,EAAA,MAAA;AAAA,kBACT,UAAY,EAAA,QAAA;AAAA,kBACZ,KAAA,EACE,KAAM,CAAA,OAAA,CAAQ,IAAS,KAAA,MAAA,GACnB,KAAM,CAAA,OAAA,CAAQ,IAAK,CAAA,OAAA,GACnB,KAAM,CAAA,OAAA,CAAQ,IAAK,CAAA;AAAA;AAC3B;AAAA,aACF;AAAA,4BACA,GAAA;AAAA,cAAC,GAAA;AAAA,cAAA;AAAA,gBACC,EAAI,EAAA;AAAA,kBACF,OAAS,EAAA,MAAA;AAAA,kBACT,aAAe,EAAA,QAAA;AAAA,kBACf,cAAgB,EAAA;AAAA,iBAClB;AAAA,gBAEA,QAAA,kBAAA,GAAA,CAAC,cAAW,OAAQ,EAAA,OAAA,EAAQ,OAAO,KAAM,CAAA,OAAA,CAAQ,IAAK,CAAA,OAAA,EACnD,QACH,EAAA,KAAA,EAAA;AAAA;AAAA;AACF,WACF,EAAA;AAAA;AAAA;AACF;AAAA,GAEA,GAAA,IAAA;AACN;;;;"}
+{"version":3,"file":"QuickstartButton.esm.js","sources":["../../../src/components/QuickstartButton/QuickstartButton.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { CSSProperties, useCallback } from 'react';\nimport MenuItem from '@mui/material/MenuItem';\nimport Box from '@mui/material/Box';\nimport Typography from '@mui/material/Typography';\nimport { useTheme } from '@mui/material/styles';\nimport WavingHandIcon from '@mui/icons-material/WavingHandOutlined';\nimport { useQuickstartDrawerContext } from '../../hooks/useQuickstartDrawerContext';\nimport { useTranslation } from '../../hooks/useTranslation';\nimport { configApiRef, useApiHolder } from '@backstage/core-plugin-api';\nimport { QuickstartItemData } from '../../types';\nimport { filterQuickstartItemsByRole } from '../../utils';\nimport { useQuickstartRole } from '../../hooks/useQuickstartRole';\n\n/**\n * Props for the QuickstartButton component\n * @public\n */\nexport interface QuickstartButtonProps {\n  /**\n   * The title text to display in the button\n   * @defaultValue 'Quick start'\n   */\n  title?: string;\n  /**\n   * Custom CSS styles to apply to the button\n   */\n  style?: CSSProperties;\n  /**\n   * Optional callback function to execute when the button is clicked\n   */\n  onClick?: () => void;\n}\n\n/**\n * @public\n */\nexport const QuickstartButton = ({\n  title,\n  style,\n  onClick = () => {},\n}: QuickstartButtonProps) => {\n  // All hooks must be called at the top level, before any early returns\n  const { t } = useTranslation();\n  const { toggleDrawer } = useQuickstartDrawerContext();\n  const theme = useTheme();\n\n  // Check if there are any quickstart items available for the current user\n  const apiHolder = useApiHolder();\n  const config = apiHolder.get(configApiRef);\n  const quickstartItems: QuickstartItemData[] = config?.has('app.quickstart')\n    ? config.get('app.quickstart')\n    : [];\n\n  const { isLoading, userRole } = useQuickstartRole();\n  const filteredItems =\n    !isLoading && userRole\n      ? filterQuickstartItemsByRole(quickstartItems, userRole)\n      : [];\n\n  const defaultTitle = t('button.quickstart');\n\n  const handleClick = useCallback(() => {\n    toggleDrawer();\n    onClick();\n  }, [toggleDrawer, onClick]);\n\n  // Hide the button if there are no quickstart items for the user\n  if (!isLoading && filteredItems.length === 0) {\n    return null;\n  }\n\n  return (\n    <MenuItem\n      sx={{\n        width: '100%',\n        color: 'inherit',\n        ...style,\n      }}\n      data-testid=\"quickstart-button\"\n      onClick={handleClick}\n    >\n      <Box\n        sx={{\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          margin: '8px 0',\n          color: 'inherit',\n          width: '100%',\n        }}\n      >\n        <Box sx={{ display: 'flex', alignItems: 'center' }}>\n          <WavingHandIcon\n            sx={{\n              fontSize: 20,\n              marginRight: '0.5rem',\n              flexShrink: 0,\n              display: 'flex',\n              alignItems: 'center',\n              color:\n                theme.palette.mode === 'dark'\n                  ? theme.palette.text.primary\n                  : theme.palette.text.disabled,\n            }}\n          />\n          <Box\n            sx={{\n              display: 'flex',\n              flexDirection: 'column',\n              justifyContent: 'center',\n            }}\n          >\n            <Typography variant=\"body2\" color={theme.palette.text.primary}>\n              {title || defaultTitle}\n            </Typography>\n          </Box>\n        </Box>\n      </Box>\n    </MenuItem>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/QuickstartContent/QuickstartContent.esm.js

@@ -1,25 +1,44 @@
 import { jsx } from 'react/jsx-runtime';
 import Box from '@mui/material/Box';
 import List from '@mui/material/List';
+import CircularProgress from '@mui/material/CircularProgress';
 import { QuickstartItem } from './QuickstartItem.esm.js';
-import { EmptyState } from '@backstage/core-components';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 
 const QuickstartContent = ({
   quickstartItems,
   setProgress,
-  itemCount
+  itemCount,
+  isLoading
 }) => {
   const [openItems, setOpenItems] = useState(
     new Array(itemCount).fill(false)
   );
+  useEffect(() => {
+    setOpenItems(new Array(itemCount).fill(false));
+  }, [itemCount]);
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          minHeight: "50vh",
+          width: "100%"
+        },
+        children: /* @__PURE__ */ jsx(CircularProgress, {})
+      }
+    );
+  }
   return /* @__PURE__ */ jsx(
     Box,
     {
       sx: {
         paddingTop: (theme) => `${theme.spacing(3)}`
       },
-      children: quickstartItems.length > 0 ? /* @__PURE__ */ jsx(List, { disablePadding: true, children: quickstartItems.map((item, index) => /* @__PURE__ */ jsx(
+      children: /* @__PURE__ */ jsx(List, { disablePadding: true, children: quickstartItems.map((item, index) => /* @__PURE__ */ jsx(
         QuickstartItem,
         {
           item,
@@ -33,13 +52,7 @@ const QuickstartContent = ({
           setProgress: () => setProgress(index)
         },
         `${item.title}-${index}`
-      )) }) : /* @__PURE__ */ jsx(
-        EmptyState,
-        {
-          title: "Quickstart content not available for your role.",
-          missing: "data"
-        }
-      )
+      )) })
     }
   );
 };

package/dist/components/QuickstartContent/QuickstartContent.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"QuickstartContent.esm.js","sources":["../../../src/components/QuickstartContent/QuickstartContent.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport Box from '@mui/material/Box';\nimport List from '@mui/material/List';\nimport { QuickstartItem } from './QuickstartItem';\nimport { EmptyState } from '@backstage/core-components';\nimport { useState } from 'react';\nimport { QuickstartItemData } from '../../types';\n\ntype QuickstartContentProps = {\n  quickstartItems: QuickstartItemData[];\n  setProgress: (index: number) => void;\n  itemCount: number;\n};\n\nexport const QuickstartContent = ({\n  quickstartItems,\n  setProgress,\n  itemCount,\n}: QuickstartContentProps) => {\n  const [openItems, setOpenItems] = useState<boolean[]>(\n    new Array(itemCount).fill(false),\n  );\n\n  return (\n    <Box\n      sx={{\n        paddingTop: theme => `${theme.spacing(3)}`,\n      }}\n    >\n      {quickstartItems.length > 0 ? (\n        <List disablePadding>\n          {quickstartItems.map((item: QuickstartItemData, index: number) => (\n            <QuickstartItem\n              key={`${item.title}-${index}`}\n              item={item}\n              index={index}\n              open={openItems[index]}\n              handleOpen={() =>\n                setOpenItems(oi => {\n                  return oi.map((val, valIndex) =>\n                    valIndex === index ? !val : false,\n                  );\n                })\n              }\n              setProgress={() => setProgress(index)}\n            />\n          ))}\n        </List>\n      ) : (\n        <EmptyState\n          title=\"Quickstart content not available for your role.\"\n          missing=\"data\"\n        />\n      )}\n    </Box>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AA6BO,MAAM,oBAAoB,CAAC;AAAA,EAChC,eAAA;AAAA,EACA,WAAA;AAAA,EACA;AACF,CAA8B,KAAA;AAC5B,EAAM,MAAA,CAAC,SAAW,EAAA,YAAY,CAAI,GAAA,QAAA;AAAA,IAChC,IAAI,KAAA,CAAM,SAAS,CAAA,CAAE,KAAK,KAAK;AAAA,GACjC;AAEA,EACE,uBAAA,GAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,EAAI,EAAA;AAAA,QACF,YAAY,CAAS,KAAA,KAAA,CAAA,EAAG,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAC,CAAA;AAAA,OAC1C;AAAA,MAEC,QAAA,EAAA,eAAA,CAAgB,MAAS,GAAA,CAAA,mBACvB,GAAA,CAAA,IAAA,EAAA,EAAK,cAAc,EAAA,IAAA,EACjB,QAAgB,EAAA,eAAA,CAAA,GAAA,CAAI,CAAC,IAAA,EAA0B,KAC9C,qBAAA,GAAA;AAAA,QAAC,cAAA;AAAA,QAAA;AAAA,UAEC,IAAA;AAAA,UACA,KAAA;AAAA,UACA,IAAA,EAAM,UAAU,KAAK,CAAA;AAAA,UACrB,UAAA,EAAY,MACV,YAAA,CAAa,CAAM,EAAA,KAAA;AACjB,YAAA,OAAO,EAAG,CAAA,GAAA;AAAA,cAAI,CAAC,GAAK,EAAA,QAAA,KAClB,QAAa,KAAA,KAAA,GAAQ,CAAC,GAAM,GAAA;AAAA,aAC9B;AAAA,WACD,CAAA;AAAA,UAEH,WAAA,EAAa,MAAM,WAAA,CAAY,KAAK;AAAA,SAAA;AAAA,QAX/B,CAAG,EAAA,IAAA,CAAK,KAAK,CAAA,CAAA,EAAI,KAAK,CAAA;AAAA,OAa9B,GACH,CAEA,mBAAA,GAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,KAAM,EAAA,iDAAA;AAAA,UACN,OAAQ,EAAA;AAAA;AAAA;AACV;AAAA,GAEJ;AAEJ;;;;"}
+{"version":3,"file":"QuickstartContent.esm.js","sources":["../../../src/components/QuickstartContent/QuickstartContent.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport Box from '@mui/material/Box';\nimport List from '@mui/material/List';\nimport CircularProgress from '@mui/material/CircularProgress';\nimport { QuickstartItem } from './QuickstartItem';\nimport { useState, useEffect } from 'react';\nimport { QuickstartItemData } from '../../types';\n\ntype QuickstartContentProps = {\n  quickstartItems: QuickstartItemData[];\n  setProgress: (index: number) => void;\n  itemCount: number;\n  isLoading: boolean;\n};\n\nexport const QuickstartContent = ({\n  quickstartItems,\n  setProgress,\n  itemCount,\n  isLoading,\n}: QuickstartContentProps) => {\n  const [openItems, setOpenItems] = useState<boolean[]>(\n    new Array(itemCount).fill(false),\n  );\n\n  // Re-initialize openItems when itemCount changes (e.g., after loading)\n  useEffect(() => {\n    setOpenItems(new Array(itemCount).fill(false));\n  }, [itemCount]);\n\n  // Show loading spinner when user role is still being determined\n  if (isLoading) {\n    return (\n      <Box\n        sx={{\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          minHeight: '50vh',\n          width: '100%',\n        }}\n      >\n        <CircularProgress />\n      </Box>\n    );\n  }\n\n  return (\n    <Box\n      sx={{\n        paddingTop: theme => `${theme.spacing(3)}`,\n      }}\n    >\n      <List disablePadding>\n        {quickstartItems.map((item: QuickstartItemData, index: number) => (\n          <QuickstartItem\n            key={`${item.title}-${index}`}\n            item={item}\n            index={index}\n            open={openItems[index]}\n            handleOpen={() =>\n              setOpenItems(oi => {\n                return oi.map((val, valIndex) =>\n                  valIndex === index ? !val : false,\n                );\n              })\n            }\n            setProgress={() => setProgress(index)}\n          />\n        ))}\n      </List>\n    </Box>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AA8BO,MAAM,oBAAoB,CAAC;AAAA,EAChC,eAAA;AAAA,EACA,WAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAA8B,KAAA;AAC5B,EAAM,MAAA,CAAC,SAAW,EAAA,YAAY,CAAI,GAAA,QAAA;AAAA,IAChC,IAAI,KAAA,CAAM,SAAS,CAAA,CAAE,KAAK,KAAK;AAAA,GACjC;AAGA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,YAAA,CAAa,IAAI,KAAM,CAAA,SAAS,CAAE,CAAA,IAAA,CAAK,KAAK,CAAC,CAAA;AAAA,GAC/C,EAAG,CAAC,SAAS,CAAC,CAAA;AAGd,EAAA,IAAI,SAAW,EAAA;AACb,IACE,uBAAA,GAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QACC,EAAI,EAAA;AAAA,UACF,OAAS,EAAA,MAAA;AAAA,UACT,UAAY,EAAA,QAAA;AAAA,UACZ,cAAgB,EAAA,QAAA;AAAA,UAChB,SAAW,EAAA,MAAA;AAAA,UACX,KAAO,EAAA;AAAA,SACT;AAAA,QAEA,8BAAC,gBAAiB,EAAA,EAAA;AAAA;AAAA,KACpB;AAAA;AAIJ,EACE,uBAAA,GAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,EAAI,EAAA;AAAA,QACF,YAAY,CAAS,KAAA,KAAA,CAAA,EAAG,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAC,CAAA;AAAA,OAC1C;AAAA,MAEA,QAAA,kBAAA,GAAA,CAAC,QAAK,cAAc,EAAA,IAAA,EACjB,0BAAgB,GAAI,CAAA,CAAC,MAA0B,KAC9C,qBAAA,GAAA;AAAA,QAAC,cAAA;AAAA,QAAA;AAAA,UAEC,IAAA;AAAA,UACA,KAAA;AAAA,UACA,IAAA,EAAM,UAAU,KAAK,CAAA;AAAA,UACrB,UAAA,EAAY,MACV,YAAA,CAAa,CAAM,EAAA,KAAA;AACjB,YAAA,OAAO,EAAG,CAAA,GAAA;AAAA,cAAI,CAAC,GAAK,EAAA,QAAA,KAClB,QAAa,KAAA,KAAA,GAAQ,CAAC,GAAM,GAAA;AAAA,aAC9B;AAAA,WACD,CAAA;AAAA,UAEH,WAAA,EAAa,MAAM,WAAA,CAAY,KAAK;AAAA,SAAA;AAAA,QAX/B,CAAG,EAAA,IAAA,CAAK,KAAK,CAAA,CAAA,EAAI,KAAK,CAAA;AAAA,OAa9B,CACH,EAAA;AAAA;AAAA,GACF;AAEJ;;;;"}

package/dist/components/QuickstartContent/QuickstartItem.esm.js

@@ -11,6 +11,7 @@ import { useState, useEffect } from 'react';
 import { QuickstartItemIcon } from './QuickstartItemIcon.esm.js';
 import { QuickstartCtaLink } from './QuickstartCtaLink.esm.js';
 import IconButton from '@mui/material/IconButton';
+import { useTranslation } from '../../hooks/useTranslation.esm.js';
 
 const QuickstartItem = ({
   item,
@@ -19,6 +20,7 @@ const QuickstartItem = ({
   open,
   handleOpen
 }) => {
+  const { t } = useTranslation();
   const [stepCompleted, setStepCompleted] = useState(false);
   const itemKey = `${item.title}-${index}`;
   useEffect(() => {
@@ -42,7 +44,7 @@ const QuickstartItem = ({
         onClick: handleOpen,
         role: "button",
         "aria-expanded": open,
-        "aria-label": `${open ? "Collapse" : "Expand"} ${item.title} details`,
+        "aria-label": open ? t("item.collapseAriaLabel", { title: item.title }) : t("item.expandAriaLabel", { title: item.title }),
         tabIndex: 0,
         onKeyDown: (e) => {
           if (e.key === "Enter" || e.key === " ") {
@@ -89,7 +91,7 @@ const QuickstartItem = ({
           /* @__PURE__ */ jsx(
             IconButton,
             {
-              "aria-label": open ? "Collapse item" : "Expand item",
+              "aria-label": open ? t("item.collapseButtonAriaLabel") : t("item.expandButtonAriaLabel"),
               sx: {
                 ...open ? { color: (theme) => theme.palette.text.primary } : { color: (theme) => theme.palette.text.secondary }
               },

package/dist/components/QuickstartContent/QuickstartItem.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"QuickstartItem.esm.js","sources":["../../../src/components/QuickstartContent/QuickstartItem.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport ExpandLess from '@mui/icons-material/ExpandLess';\nimport ExpandMore from '@mui/icons-material/ExpandMore';\nimport Box from '@mui/material/Box';\nimport Collapse from '@mui/material/Collapse';\nimport List from '@mui/material/List';\nimport ListItem from '@mui/material/ListItem';\nimport ListItemIcon from '@mui/material/ListItemIcon';\nimport ListItemText from '@mui/material/ListItemText';\nimport { useEffect, useState } from 'react';\nimport { QuickstartItemIcon } from './QuickstartItemIcon';\nimport { QuickstartCtaLink } from './QuickstartCtaLink';\nimport IconButton from '@mui/material/IconButton';\nimport { QuickstartItemData } from '../../types';\n\nexport type QuickstartItemProps = {\n  item: QuickstartItemData;\n  setProgress: () => void;\n  index: number;\n  open: boolean;\n  handleOpen: () => void;\n};\n\nexport const QuickstartItem = ({\n  item,\n  setProgress,\n  index,\n  open,\n  handleOpen,\n}: QuickstartItemProps) => {\n  const [stepCompleted, setStepCompleted] = useState<boolean>(false);\n  const itemKey = `${item.title}-${index}`;\n\n  useEffect(() => {\n    const stepState = localStorage.getItem(itemKey);\n    if (stepState === 'true') {\n      setStepCompleted(true);\n    }\n  }, [itemKey]);\n\n  useEffect(() => {\n    localStorage.setItem(itemKey, stepCompleted.toString());\n  }, [itemKey, stepCompleted]);\n\n  useEffect(() => {\n    if (stepCompleted) {\n      setProgress();\n    }\n  }, [stepCompleted, setProgress]);\n\n  return (\n    <Box sx={{ marginBottom: theme => `${theme.spacing(0.2)}` }}>\n      <ListItem\n        key={itemKey}\n        onClick={handleOpen}\n        role=\"button\"\n        aria-expanded={open}\n        aria-label={`${open ? 'Collapse' : 'Expand'} ${item.title} details`}\n        tabIndex={0}\n        onKeyDown={e => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            e.preventDefault();\n            handleOpen();\n          }\n        }}\n        sx={{\n          cursor: 'pointer',\n          ...(stepCompleted\n            ? {\n                backgroundColor: theme =>\n                  theme.palette.mode === 'light' ? '#F3FAF2' : '#223D2D',\n              }\n            : { backgroundColor: theme => theme.palette.background.paper }),\n        }}\n      >\n        <ListItemIcon\n          sx={{\n            minWidth: '40px',\n          }}\n        >\n          <QuickstartItemIcon\n            icon={item.icon}\n            sx={{\n              ...(open\n                ? { color: theme => theme.palette.text.primary }\n                : { color: theme => theme.palette.text.secondary }),\n            }}\n          />\n        </ListItemIcon>\n        <ListItemText\n          primary={item.title}\n          sx={{\n            '& .v5-MuiTypography-root': {\n              fontWeight: theme =>\n                `${theme.typography.fontWeightMedium}!important`,\n            },\n            ...(open\n              ? { color: theme => theme.palette.text.primary }\n              : { color: theme => theme.palette.text.secondary }),\n          }}\n        />\n        <IconButton\n          aria-label={open ? 'Collapse item' : 'Expand item'}\n          sx={{\n            ...(open\n              ? { color: theme => theme.palette.text.primary }\n              : { color: theme => theme.palette.text.secondary }),\n          }}\n        >\n          {open ? <ExpandLess /> : <ExpandMore />}\n        </IconButton>\n      </ListItem>\n      <Collapse in={open} timeout=\"auto\" unmountOnExit>\n        <List\n          component=\"div\"\n          disablePadding\n          sx={{\n            ...(stepCompleted\n              ? {\n                  backgroundColor: theme =>\n                    theme.palette.mode === 'light' ? '#F3FAF2' : '#223D2D',\n                }\n              : { backgroundColor: theme => theme.palette.background.paper }),\n            paddingBottom: '10px',\n          }}\n        >\n          <ListItem>\n            <ListItemText primary={item.description} />\n          </ListItem>\n          <ListItem>\n            <QuickstartCtaLink\n              cta={item.cta}\n              onClick={() => {\n                setStepCompleted(true);\n              }}\n            />\n          </ListItem>\n        </List>\n      </Collapse>\n    </Box>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"QuickstartItem.esm.js","sources":["../../../src/components/QuickstartContent/QuickstartItem.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport ExpandLess from '@mui/icons-material/ExpandLess';\nimport ExpandMore from '@mui/icons-material/ExpandMore';\nimport Box from '@mui/material/Box';\nimport Collapse from '@mui/material/Collapse';\nimport List from '@mui/material/List';\nimport ListItem from '@mui/material/ListItem';\nimport ListItemIcon from '@mui/material/ListItemIcon';\nimport ListItemText from '@mui/material/ListItemText';\nimport { useEffect, useState } from 'react';\nimport { QuickstartItemIcon } from './QuickstartItemIcon';\nimport { QuickstartCtaLink } from './QuickstartCtaLink';\nimport IconButton from '@mui/material/IconButton';\nimport { QuickstartItemData } from '../../types';\nimport { useTranslation } from '../../hooks/useTranslation';\n\nexport type QuickstartItemProps = {\n  item: QuickstartItemData;\n  setProgress: () => void;\n  index: number;\n  open: boolean;\n  handleOpen: () => void;\n};\n\nexport const QuickstartItem = ({\n  item,\n  setProgress,\n  index,\n  open,\n  handleOpen,\n}: QuickstartItemProps) => {\n  const { t } = useTranslation();\n  const [stepCompleted, setStepCompleted] = useState<boolean>(false);\n  const itemKey = `${item.title}-${index}`;\n\n  useEffect(() => {\n    const stepState = localStorage.getItem(itemKey);\n    if (stepState === 'true') {\n      setStepCompleted(true);\n    }\n  }, [itemKey]);\n\n  useEffect(() => {\n    localStorage.setItem(itemKey, stepCompleted.toString());\n  }, [itemKey, stepCompleted]);\n\n  useEffect(() => {\n    if (stepCompleted) {\n      setProgress();\n    }\n  }, [stepCompleted, setProgress]);\n\n  return (\n    <Box sx={{ marginBottom: theme => `${theme.spacing(0.2)}` }}>\n      <ListItem\n        key={itemKey}\n        onClick={handleOpen}\n        role=\"button\"\n        aria-expanded={open}\n        aria-label={\n          open\n            ? t('item.collapseAriaLabel' as any, { title: item.title })\n            : t('item.expandAriaLabel' as any, { title: item.title })\n        }\n        tabIndex={0}\n        onKeyDown={e => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            e.preventDefault();\n            handleOpen();\n          }\n        }}\n        sx={{\n          cursor: 'pointer',\n          ...(stepCompleted\n            ? {\n                backgroundColor: theme =>\n                  theme.palette.mode === 'light' ? '#F3FAF2' : '#223D2D',\n              }\n            : { backgroundColor: theme => theme.palette.background.paper }),\n        }}\n      >\n        <ListItemIcon\n          sx={{\n            minWidth: '40px',\n          }}\n        >\n          <QuickstartItemIcon\n            icon={item.icon}\n            sx={{\n              ...(open\n                ? { color: theme => theme.palette.text.primary }\n                : { color: theme => theme.palette.text.secondary }),\n            }}\n          />\n        </ListItemIcon>\n        <ListItemText\n          primary={item.title}\n          sx={{\n            '& .v5-MuiTypography-root': {\n              fontWeight: theme =>\n                `${theme.typography.fontWeightMedium}!important`,\n            },\n            ...(open\n              ? { color: theme => theme.palette.text.primary }\n              : { color: theme => theme.palette.text.secondary }),\n          }}\n        />\n        <IconButton\n          aria-label={\n            open\n              ? t('item.collapseButtonAriaLabel')\n              : t('item.expandButtonAriaLabel')\n          }\n          sx={{\n            ...(open\n              ? { color: theme => theme.palette.text.primary }\n              : { color: theme => theme.palette.text.secondary }),\n          }}\n        >\n          {open ? <ExpandLess /> : <ExpandMore />}\n        </IconButton>\n      </ListItem>\n      <Collapse in={open} timeout=\"auto\" unmountOnExit>\n        <List\n          component=\"div\"\n          disablePadding\n          sx={{\n            ...(stepCompleted\n              ? {\n                  backgroundColor: theme =>\n                    theme.palette.mode === 'light' ? '#F3FAF2' : '#223D2D',\n                }\n              : { backgroundColor: theme => theme.palette.background.paper }),\n            paddingBottom: '10px',\n          }}\n        >\n          <ListItem>\n            <ListItemText primary={item.description} />\n          </ListItem>\n          <ListItem>\n            <QuickstartCtaLink\n              cta={item.cta}\n              onClick={() => {\n                setStepCompleted(true);\n              }}\n            />\n          </ListItem>\n        </List>\n      </Collapse>\n    </Box>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/QuickstartDrawer.esm.js

@@ -4,14 +4,33 @@ import { useApiHolder, configApiRef } from '@backstage/core-plugin-api';
 import { Quickstart } from './Quickstart.esm.js';
 import { useQuickstartDrawerContext } from '../hooks/useQuickstartDrawerContext.esm.js';
 import { filterQuickstartItemsByRole } from '../utils/filterQuickstartItems.esm.js';
+import { useQuickstartRole } from '../hooks/useQuickstartRole.esm.js';
+import { useRef, useEffect } from 'react';
 
 const QuickstartDrawer = () => {
-  const { isDrawerOpen, closeDrawer, drawerWidth } = useQuickstartDrawerContext();
+  const { isDrawerOpen, closeDrawer, openDrawer, drawerWidth } = useQuickstartDrawerContext();
+  const hasAutoOpened = useRef(false);
   const apiHolder = useApiHolder();
   const config = apiHolder.get(configApiRef);
   const quickstartItems = config?.has("app.quickstart") ? config.get("app.quickstart") : [];
-  const userRole = "developer";
-  const filteredItems = filterQuickstartItemsByRole(quickstartItems, userRole);
+  const { isLoading, userRole } = useQuickstartRole();
+  const filteredItems = !isLoading && userRole ? filterQuickstartItemsByRole(quickstartItems, userRole) : [];
+  useEffect(() => {
+    if (!isLoading && filteredItems.length > 0 && !isDrawerOpen && !hasAutoOpened.current) {
+      openDrawer();
+      hasAutoOpened.current = true;
+    }
+  }, [isLoading, filteredItems.length, isDrawerOpen, openDrawer]);
+  if (!isLoading && filteredItems.length === 0) {
+    if (isDrawerOpen) {
+      closeDrawer();
+    }
+    return null;
+  }
+  if (isLoading && isDrawerOpen) {
+    closeDrawer();
+    hasAutoOpened.current = false;
+  }
   return /* @__PURE__ */ jsx(
     Drawer,
     {
@@ -37,7 +56,8 @@ const QuickstartDrawer = () => {
         Quickstart,
         {
           quickstartItems: filteredItems,
-          handleDrawerClose: closeDrawer
+          handleDrawerClose: closeDrawer,
+          isLoading
         }
       )
     }

package/dist/components/QuickstartDrawer.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"QuickstartDrawer.esm.js","sources":["../../src/components/QuickstartDrawer.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport Drawer from '@mui/material/Drawer';\nimport { ThemeConfig } from '@red-hat-developer-hub/backstage-plugin-theme';\nimport { configApiRef, useApiHolder } from '@backstage/core-plugin-api';\nimport { Quickstart } from './Quickstart';\nimport { useQuickstartDrawerContext } from '../hooks/useQuickstartDrawerContext';\nimport { QuickstartItemData } from '../types';\nimport { filterQuickstartItemsByRole } from '../utils';\n\nexport const QuickstartDrawer = () => {\n  const { isDrawerOpen, closeDrawer, drawerWidth } =\n    useQuickstartDrawerContext();\n\n  const apiHolder = useApiHolder();\n  const config = apiHolder.get(configApiRef);\n  const quickstartItems: QuickstartItemData[] = config?.has('app.quickstart')\n    ? config.get('app.quickstart')\n    : [];\n\n  // This will be dynamically determined based on the logged-in user\n  const userRole = 'developer'; // switch to 'admin', 'developer', or other roles for testing purposes\n\n  const filteredItems = filterQuickstartItemsByRole(quickstartItems, userRole);\n\n  return (\n    <Drawer\n      sx={{\n        '& .v5-MuiDrawer-paper': {\n          width: drawerWidth,\n          boxSizing: 'border-box',\n          backgroundColor: theme =>\n            `${\n              (theme as ThemeConfig).palette?.rhdh?.general\n                .sidebarBackgroundColor\n            }`,\n          justifyContent: 'space-between',\n        },\n        // Only apply header offset when global header exists\n        'body:has(#global-header) &': {\n          '& .v5-MuiDrawer-paper': {\n            top: '64px !important',\n            height: 'calc(100vh - 64px) !important',\n          },\n        },\n      }}\n      variant=\"persistent\"\n      anchor=\"right\"\n      open={isDrawerOpen}\n    >\n      <Quickstart\n        quickstartItems={filteredItems}\n        handleDrawerClose={closeDrawer}\n      />\n    </Drawer>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAwBO,MAAM,mBAAmB,MAAM;AACpC,EAAA,MAAM,EAAE,YAAA,EAAc,WAAa,EAAA,WAAA,KACjC,0BAA2B,EAAA;AAE7B,EAAA,MAAM,YAAY,YAAa,EAAA;AAC/B,EAAM,MAAA,MAAA,GAAS,SAAU,CAAA,GAAA,CAAI,YAAY,CAAA;AACzC,EAAM,MAAA,eAAA,GAAwC,QAAQ,GAAI,CAAA,gBAAgB,IACtE,MAAO,CAAA,GAAA,CAAI,gBAAgB,CAAA,GAC3B,EAAC;AAGL,EAAA,MAAM,QAAW,GAAA,WAAA;AAEjB,EAAM,MAAA,aAAA,GAAgB,2BAA4B,CAAA,eAAA,EAAiB,QAAQ,CAAA;AAE3E,EACE,uBAAA,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,EAAI,EAAA;AAAA,QACF,uBAAyB,EAAA;AAAA,UACvB,KAAO,EAAA,WAAA;AAAA,UACP,SAAW,EAAA,YAAA;AAAA,UACX,iBAAiB,CACf,KAAA,KAAA,CAAA,EACG,MAAsB,OAAS,EAAA,IAAA,EAAM,QACnC,sBACL,CAAA,CAAA;AAAA,UACF,cAAgB,EAAA;AAAA,SAClB;AAAA;AAAA,QAEA,4BAA8B,EAAA;AAAA,UAC5B,uBAAyB,EAAA;AAAA,YACvB,GAAK,EAAA,iBAAA;AAAA,YACL,MAAQ,EAAA;AAAA;AACV;AACF,OACF;AAAA,MACA,OAAQ,EAAA,YAAA;AAAA,MACR,MAAO,EAAA,OAAA;AAAA,MACP,IAAM,EAAA,YAAA;AAAA,MAEN,QAAA,kBAAA,GAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,eAAiB,EAAA,aAAA;AAAA,UACjB,iBAAmB,EAAA;AAAA;AAAA;AACrB;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"QuickstartDrawer.esm.js","sources":["../../src/components/QuickstartDrawer.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport Drawer from '@mui/material/Drawer';\nimport { ThemeConfig } from '@red-hat-developer-hub/backstage-plugin-theme';\nimport { configApiRef, useApiHolder } from '@backstage/core-plugin-api';\nimport { Quickstart } from './Quickstart';\nimport { useQuickstartDrawerContext } from '../hooks/useQuickstartDrawerContext';\nimport { QuickstartItemData } from '../types';\nimport { filterQuickstartItemsByRole } from '../utils';\nimport { useQuickstartRole } from '../hooks/useQuickstartRole';\nimport { useEffect, useRef } from 'react';\n\nexport const QuickstartDrawer = () => {\n  const { isDrawerOpen, closeDrawer, openDrawer, drawerWidth } =\n    useQuickstartDrawerContext();\n\n  // Track if we've already auto-opened the drawer to prevent re-opening after manual close\n  const hasAutoOpened = useRef(false);\n\n  const apiHolder = useApiHolder();\n  const config = apiHolder.get(configApiRef);\n  const quickstartItems: QuickstartItemData[] = config?.has('app.quickstart')\n    ? config.get('app.quickstart')\n    : [];\n\n  const { isLoading, userRole } = useQuickstartRole();\n  const filteredItems =\n    !isLoading && userRole\n      ? filterQuickstartItemsByRole(quickstartItems, userRole)\n      : [];\n\n  // Auto-open drawer when user logs in and has quickstart items available\n  // Only do this once, and respect user's manual close action\n  useEffect(() => {\n    if (\n      !isLoading &&\n      filteredItems.length > 0 &&\n      !isDrawerOpen &&\n      !hasAutoOpened.current\n    ) {\n      openDrawer();\n      hasAutoOpened.current = true;\n    }\n  }, [isLoading, filteredItems.length, isDrawerOpen, openDrawer]);\n\n  // Hide the drawer entirely if there are no quickstart items for the user\n  // Do this check first, before any rendering happens\n  if (!isLoading && filteredItems.length === 0) {\n    // Also close the drawer context if it's currently open to prevent layout issues\n    if (isDrawerOpen) {\n      closeDrawer();\n    }\n    return null;\n  }\n\n  // During loading, if drawer is open but we don't know if user will have items yet,\n  // close it preemptively to prevent flash and reset auto-open tracking\n  if (isLoading && isDrawerOpen) {\n    closeDrawer();\n    hasAutoOpened.current = false; // Reset for new user\n  }\n\n  return (\n    <Drawer\n      sx={{\n        '& .v5-MuiDrawer-paper': {\n          width: drawerWidth,\n          boxSizing: 'border-box',\n          backgroundColor: theme =>\n            `${\n              (theme as ThemeConfig).palette?.rhdh?.general\n                .sidebarBackgroundColor\n            }`,\n          justifyContent: 'space-between',\n        },\n        // Only apply header offset when global header exists\n        'body:has(#global-header) &': {\n          '& .v5-MuiDrawer-paper': {\n            top: '64px !important',\n            height: 'calc(100vh - 64px) !important',\n          },\n        },\n      }}\n      variant=\"persistent\"\n      anchor=\"right\"\n      open={isDrawerOpen}\n    >\n      <Quickstart\n        quickstartItems={filteredItems}\n        handleDrawerClose={closeDrawer}\n        isLoading={isLoading}\n      />\n    </Drawer>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AA0BO,MAAM,mBAAmB,MAAM;AACpC,EAAA,MAAM,EAAE,YAAc,EAAA,WAAA,EAAa,UAAY,EAAA,WAAA,KAC7C,0BAA2B,EAAA;AAG7B,EAAM,MAAA,aAAA,GAAgB,OAAO,KAAK,CAAA;AAElC,EAAA,MAAM,YAAY,YAAa,EAAA;AAC/B,EAAM,MAAA,MAAA,GAAS,SAAU,CAAA,GAAA,CAAI,YAAY,CAAA;AACzC,EAAM,MAAA,eAAA,GAAwC,QAAQ,GAAI,CAAA,gBAAgB,IACtE,MAAO,CAAA,GAAA,CAAI,gBAAgB,CAAA,GAC3B,EAAC;AAEL,EAAA,MAAM,EAAE,SAAA,EAAW,QAAS,EAAA,GAAI,iBAAkB,EAAA;AAClD,EAAM,MAAA,aAAA,GACJ,CAAC,SAAa,IAAA,QAAA,GACV,4BAA4B,eAAiB,EAAA,QAAQ,IACrD,EAAC;AAIP,EAAA,SAAA,CAAU,MAAM;AACd,IACE,IAAA,CAAC,aACD,aAAc,CAAA,MAAA,GAAS,KACvB,CAAC,YAAA,IACD,CAAC,aAAA,CAAc,OACf,EAAA;AACA,MAAW,UAAA,EAAA;AACX,MAAA,aAAA,CAAc,OAAU,GAAA,IAAA;AAAA;AAC1B,KACC,CAAC,SAAA,EAAW,cAAc,MAAQ,EAAA,YAAA,EAAc,UAAU,CAAC,CAAA;AAI9D,EAAA,IAAI,CAAC,SAAA,IAAa,aAAc,CAAA,MAAA,KAAW,CAAG,EAAA;AAE5C,IAAA,IAAI,YAAc,EAAA;AAChB,MAAY,WAAA,EAAA;AAAA;AAEd,IAAO,OAAA,IAAA;AAAA;AAKT,EAAA,IAAI,aAAa,YAAc,EAAA;AAC7B,IAAY,WAAA,EAAA;AACZ,IAAA,aAAA,CAAc,OAAU,GAAA,KAAA;AAAA;AAG1B,EACE,uBAAA,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,EAAI,EAAA;AAAA,QACF,uBAAyB,EAAA;AAAA,UACvB,KAAO,EAAA,WAAA;AAAA,UACP,SAAW,EAAA,YAAA;AAAA,UACX,iBAAiB,CACf,KAAA,KAAA,CAAA,EACG,MAAsB,OAAS,EAAA,IAAA,EAAM,QACnC,sBACL,CAAA,CAAA;AAAA,UACF,cAAgB,EAAA;AAAA,SAClB;AAAA;AAAA,QAEA,4BAA8B,EAAA;AAAA,UAC5B,uBAAyB,EAAA;AAAA,YACvB,GAAK,EAAA,iBAAA;AAAA,YACL,MAAQ,EAAA;AAAA;AACV;AACF,OACF;AAAA,MACA,OAAQ,EAAA,YAAA;AAAA,MACR,MAAO,EAAA,OAAA;AAAA,MACP,IAAM,EAAA,YAAA;AAAA,MAEN,QAAA,kBAAA,GAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,eAAiB,EAAA,aAAA;AAAA,UACjB,iBAAmB,EAAA,WAAA;AAAA,UACnB;AAAA;AAAA;AACF;AAAA,GACF;AAEJ;;;;"}

package/dist/components/QuickstartDrawerProvider.esm.js

@@ -5,10 +5,8 @@ import CloseIcon from '@mui/icons-material/Close';
 import IconButton from '@mui/material/IconButton';
 import { QuickstartDrawerContext } from './QuickstartDrawerContext.esm.js';
 import { QuickstartDrawer } from './QuickstartDrawer.esm.js';
-import { useQuickstartPermission } from '../hooks/useQuickstartPermission.esm.js';
 
 const QuickstartDrawerProvider = ({ children }) => {
-  const isAllowed = useQuickstartPermission();
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
   const [showNotification, setShowNotification] = useState(false);
   const [hasShownNotification, setHasShownNotification] = useState(false);
@@ -35,17 +33,15 @@ const QuickstartDrawerProvider = ({ children }) => {
     const notificationShown = localStorage.getItem(
       "quickstart-notification-shown"
     );
-    if (isAllowed) {
-      if (!hasVisited) {
-        setIsDrawerOpen(true);
-        localStorage.setItem("quickstart-visited", "true");
-        localStorage.setItem("quickstart-open", "true");
-      } else if (wasOpen === "true") {
-        setIsDrawerOpen(true);
-      }
+    if (!hasVisited) {
+      setIsDrawerOpen(true);
+      localStorage.setItem("quickstart-visited", "true");
+      localStorage.setItem("quickstart-open", "true");
+    } else if (wasOpen === "true") {
+      setIsDrawerOpen(true);
     }
     setHasShownNotification(notificationShown === "true");
-  }, [isAllowed]);
+  }, []);
   const openDrawer = () => {
     setIsDrawerOpen(true);
     localStorage.setItem("quickstart-open", "true");

package/dist/components/QuickstartDrawerProvider.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"QuickstartDrawerProvider.esm.js","sources":["../../src/components/QuickstartDrawerProvider.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { useEffect, PropsWithChildren, useState } from 'react';\nimport Snackbar from '@mui/material/Snackbar';\nimport CloseIcon from '@mui/icons-material/Close';\nimport IconButton from '@mui/material/IconButton';\nimport { QuickstartDrawerContext } from './QuickstartDrawerContext';\nimport { QuickstartDrawer } from './QuickstartDrawer';\nimport { useQuickstartPermission } from '../hooks/useQuickstartPermission';\n\nexport const QuickstartDrawerProvider = ({ children }: PropsWithChildren) => {\n  const isAllowed = useQuickstartPermission();\n  const [isDrawerOpen, setIsDrawerOpen] = useState<boolean>(false);\n  const [showNotification, setShowNotification] = useState(false);\n  const [hasShownNotification, setHasShownNotification] = useState(false);\n  const [drawerWidth, setDrawerWidth] = useState<number>(500);\n\n  // Single useEffect - sets class on document.body\n  useEffect(() => {\n    if (isDrawerOpen) {\n      document.body.classList.add('quickstart-drawer-open');\n      document.body.style.setProperty(\n        '--quickstart-drawer-width',\n        `${drawerWidth}px`,\n      );\n    } else {\n      document.body.classList.remove('quickstart-drawer-open');\n      document.body.style.removeProperty('--quickstart-drawer-width');\n    }\n\n    return () => {\n      document.body.classList.remove('quickstart-drawer-open');\n      document.body.style.removeProperty('--quickstart-drawer-width');\n    };\n  }, [isDrawerOpen, drawerWidth]);\n\n  useEffect(() => {\n    const wasOpen = localStorage.getItem('quickstart-open');\n    const hasVisited = localStorage.getItem('quickstart-visited');\n    const notificationShown = localStorage.getItem(\n      'quickstart-notification-shown',\n    );\n\n    if (isAllowed) {\n      if (!hasVisited) {\n        setIsDrawerOpen(true);\n        localStorage.setItem('quickstart-visited', 'true');\n        localStorage.setItem('quickstart-open', 'true');\n      } else if (wasOpen === 'true') {\n        setIsDrawerOpen(true);\n      }\n    }\n\n    setHasShownNotification(notificationShown === 'true');\n  }, [isAllowed]);\n\n  const openDrawer = () => {\n    setIsDrawerOpen(true);\n    localStorage.setItem('quickstart-open', 'true');\n  };\n\n  const closeDrawer = () => {\n    setIsDrawerOpen(false);\n    if (!hasShownNotification) {\n      setShowNotification(true);\n      setHasShownNotification(true);\n      localStorage.setItem('quickstart-notification-shown', 'true');\n    }\n    localStorage.setItem('quickstart-open', 'false');\n  };\n\n  const toggleDrawer = () => {\n    setIsDrawerOpen(!isDrawerOpen);\n    localStorage.setItem('quickstart-open', (!isDrawerOpen).toString());\n  };\n\n  const handleNotificationClose = () => setShowNotification(false);\n\n  return (\n    <QuickstartDrawerContext.Provider\n      value={{\n        isDrawerOpen,\n        openDrawer,\n        closeDrawer,\n        toggleDrawer,\n        setDrawerWidth,\n        drawerWidth,\n      }}\n    >\n      {children}\n      <QuickstartDrawer />\n      <Snackbar\n        sx={{ top: '80px !important' }}\n        open={showNotification}\n        autoHideDuration={10000}\n        onClose={handleNotificationClose}\n        anchorOrigin={{ vertical: 'top', horizontal: 'right' }}\n        message=\"Need help? Visit the Quick Start Guide by clicking on this (?) icon in the header!\"\n        action={\n          <IconButton\n            size=\"small\"\n            aria-label=\"close\"\n            color=\"inherit\"\n            onClick={handleNotificationClose}\n          >\n            <CloseIcon fontSize=\"small\" />\n          </IconButton>\n        }\n      />\n    </QuickstartDrawerContext.Provider>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"QuickstartDrawerProvider.esm.js","sources":["../../src/components/QuickstartDrawerProvider.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { useEffect, PropsWithChildren, useState } from 'react';\nimport Snackbar from '@mui/material/Snackbar';\nimport CloseIcon from '@mui/icons-material/Close';\nimport IconButton from '@mui/material/IconButton';\nimport { QuickstartDrawerContext } from './QuickstartDrawerContext';\nimport { QuickstartDrawer } from './QuickstartDrawer';\n\nexport const QuickstartDrawerProvider = ({ children }: PropsWithChildren) => {\n  const [isDrawerOpen, setIsDrawerOpen] = useState<boolean>(false);\n  const [showNotification, setShowNotification] = useState(false);\n  const [hasShownNotification, setHasShownNotification] = useState(false);\n  const [drawerWidth, setDrawerWidth] = useState<number>(500);\n\n  // Single useEffect - sets class on document.body\n  useEffect(() => {\n    if (isDrawerOpen) {\n      document.body.classList.add('quickstart-drawer-open');\n      document.body.style.setProperty(\n        '--quickstart-drawer-width',\n        `${drawerWidth}px`,\n      );\n    } else {\n      document.body.classList.remove('quickstart-drawer-open');\n      document.body.style.removeProperty('--quickstart-drawer-width');\n    }\n\n    return () => {\n      document.body.classList.remove('quickstart-drawer-open');\n      document.body.style.removeProperty('--quickstart-drawer-width');\n    };\n  }, [isDrawerOpen, drawerWidth]);\n\n  useEffect(() => {\n    const wasOpen = localStorage.getItem('quickstart-open');\n    const hasVisited = localStorage.getItem('quickstart-visited');\n    const notificationShown = localStorage.getItem(\n      'quickstart-notification-shown',\n    );\n\n    if (!hasVisited) {\n      setIsDrawerOpen(true);\n      localStorage.setItem('quickstart-visited', 'true');\n      localStorage.setItem('quickstart-open', 'true');\n    } else if (wasOpen === 'true') {\n      setIsDrawerOpen(true);\n    }\n\n    setHasShownNotification(notificationShown === 'true');\n  }, []);\n\n  const openDrawer = () => {\n    setIsDrawerOpen(true);\n    localStorage.setItem('quickstart-open', 'true');\n  };\n\n  const closeDrawer = () => {\n    setIsDrawerOpen(false);\n    if (!hasShownNotification) {\n      setShowNotification(true);\n      setHasShownNotification(true);\n      localStorage.setItem('quickstart-notification-shown', 'true');\n    }\n    localStorage.setItem('quickstart-open', 'false');\n  };\n\n  const toggleDrawer = () => {\n    setIsDrawerOpen(!isDrawerOpen);\n    localStorage.setItem('quickstart-open', (!isDrawerOpen).toString());\n  };\n\n  const handleNotificationClose = () => setShowNotification(false);\n\n  return (\n    <QuickstartDrawerContext.Provider\n      value={{\n        isDrawerOpen,\n        openDrawer,\n        closeDrawer,\n        toggleDrawer,\n        setDrawerWidth,\n        drawerWidth,\n      }}\n    >\n      {children}\n      <QuickstartDrawer />\n      <Snackbar\n        sx={{ top: '80px !important' }}\n        open={showNotification}\n        autoHideDuration={10000}\n        onClose={handleNotificationClose}\n        anchorOrigin={{ vertical: 'top', horizontal: 'right' }}\n        message=\"Need help? Visit the Quick Start Guide by clicking on this (?) icon in the header!\"\n        action={\n          <IconButton\n            size=\"small\"\n            aria-label=\"close\"\n            color=\"inherit\"\n            onClick={handleNotificationClose}\n          >\n            <CloseIcon fontSize=\"small\" />\n          </IconButton>\n        }\n      />\n    </QuickstartDrawerContext.Provider>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/QuickstartFooter.esm.js

@@ -3,11 +3,13 @@ import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import LinearProgress from '@mui/material/LinearProgress';
 import Typography from '@mui/material/Typography';
+import { useTranslation } from '../hooks/useTranslation.esm.js';
 
 const QuickstartFooter = ({
   handleDrawerClose,
   progress
 }) => {
+  const { t } = useTranslation();
   return /* @__PURE__ */ jsxs(Box, { children: [
     /* @__PURE__ */ jsx(LinearProgress, { variant: "determinate", value: progress }),
     /* @__PURE__ */ jsxs(
@@ -20,8 +22,8 @@ const QuickstartFooter = ({
           padding: (theme) => `${theme.spacing(2.5)}`
         },
         children: [
-          /* @__PURE__ */ jsx(Typography, { sx: { fontSize: (theme) => theme.typography.caption }, children: progress > 0 ? `${progress}% progress` : "Not started" }),
-          /* @__PURE__ */ jsx(Button, { onClick: () => handleDrawerClose(), children: "Hide" })
+          /* @__PURE__ */ jsx(Typography, { sx: { fontSize: (theme) => theme.typography.caption }, children: progress > 0 ? t("footer.progress", { progress: progress.toString() }) : t("footer.notStarted") }),
+          /* @__PURE__ */ jsx(Button, { onClick: () => handleDrawerClose(), children: t("footer.hide") })
         ]
       }
     )

package/dist/components/QuickstartFooter.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"QuickstartFooter.esm.js","sources":["../../src/components/QuickstartFooter.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport Box from '@mui/material/Box';\nimport Button from '@mui/material/Button';\nimport LinearProgress from '@mui/material/LinearProgress';\nimport Typography from '@mui/material/Typography';\n\nexport type QuickstartFooterProps = {\n  handleDrawerClose: () => void;\n  progress: number;\n};\n\nexport const QuickstartFooter = ({\n  handleDrawerClose,\n  progress,\n}: QuickstartFooterProps) => {\n  return (\n    <Box>\n      <LinearProgress variant=\"determinate\" value={progress} />\n      <Box\n        sx={{\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          padding: theme => `${theme.spacing(2.5)}`,\n        }}\n      >\n        <Typography sx={{ fontSize: theme => theme.typography.caption }}>\n          {progress > 0 ? `${progress}% progress` : 'Not started'}\n        </Typography>\n        <Button onClick={() => handleDrawerClose()}>Hide</Button>\n      </Box>\n    </Box>\n  );\n};\n"],"names":[],"mappings":";;;;;;AA0BO,MAAM,mBAAmB,CAAC;AAAA,EAC/B,iBAAA;AAAA,EACA;AACF,CAA6B,KAAA;AAC3B,EAAA,4BACG,GACC,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,cAAe,EAAA,EAAA,OAAA,EAAQ,aAAc,EAAA,KAAA,EAAO,QAAU,EAAA,CAAA;AAAA,oBACvD,IAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QACC,EAAI,EAAA;AAAA,UACF,OAAS,EAAA,MAAA;AAAA,UACT,UAAY,EAAA,QAAA;AAAA,UACZ,cAAgB,EAAA,eAAA;AAAA,UAChB,SAAS,CAAS,KAAA,KAAA,CAAA,EAAG,KAAM,CAAA,OAAA,CAAQ,GAAG,CAAC,CAAA;AAAA,SACzC;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,UAAW,EAAA,EAAA,EAAA,EAAI,EAAE,QAAA,EAAU,WAAS,KAAM,CAAA,UAAA,CAAW,OAAQ,EAAA,EAC3D,QAAW,EAAA,QAAA,GAAA,CAAA,GAAI,CAAG,EAAA,QAAQ,eAAe,aAC5C,EAAA,CAAA;AAAA,8BACC,MAAO,EAAA,EAAA,OAAA,EAAS,MAAM,iBAAA,IAAqB,QAAI,EAAA,MAAA,EAAA;AAAA;AAAA;AAAA;AAClD,GACF,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"QuickstartFooter.esm.js","sources":["../../src/components/QuickstartFooter.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport Box from '@mui/material/Box';\nimport Button from '@mui/material/Button';\nimport LinearProgress from '@mui/material/LinearProgress';\nimport Typography from '@mui/material/Typography';\nimport { useTranslation } from '../hooks/useTranslation';\n\nexport type QuickstartFooterProps = {\n  handleDrawerClose: () => void;\n  progress: number;\n};\n\nexport const QuickstartFooter = ({\n  handleDrawerClose,\n  progress,\n}: QuickstartFooterProps) => {\n  const { t } = useTranslation();\n\n  return (\n    <Box>\n      <LinearProgress variant=\"determinate\" value={progress} />\n      <Box\n        sx={{\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          padding: theme => `${theme.spacing(2.5)}`,\n        }}\n      >\n        <Typography sx={{ fontSize: theme => theme.typography.caption }}>\n          {progress > 0\n            ? t('footer.progress' as any, { progress: progress.toString() })\n            : t('footer.notStarted')}\n        </Typography>\n        <Button onClick={() => handleDrawerClose()}>{t('footer.hide')}</Button>\n      </Box>\n    </Box>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AA2BO,MAAM,mBAAmB,CAAC;AAAA,EAC/B,iBAAA;AAAA,EACA;AACF,CAA6B,KAAA;AAC3B,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,cAAe,EAAA;AAE7B,EAAA,4BACG,GACC,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,cAAe,EAAA,EAAA,OAAA,EAAQ,aAAc,EAAA,KAAA,EAAO,QAAU,EAAA,CAAA;AAAA,oBACvD,IAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QACC,EAAI,EAAA;AAAA,UACF,OAAS,EAAA,MAAA;AAAA,UACT,UAAY,EAAA,QAAA;AAAA,UACZ,cAAgB,EAAA,eAAA;AAAA,UAChB,SAAS,CAAS,KAAA,KAAA,CAAA,EAAG,KAAM,CAAA,OAAA,CAAQ,GAAG,CAAC,CAAA;AAAA,SACzC;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAC,GAAA,CAAA,UAAA,EAAA,EAAW,IAAI,EAAE,QAAA,EAAU,WAAS,KAAM,CAAA,UAAA,CAAW,OAAQ,EAAA,EAC3D,QAAW,EAAA,QAAA,GAAA,CAAA,GACR,EAAE,iBAA0B,EAAA,EAAE,UAAU,QAAS,CAAA,QAAA,IAAY,CAAA,GAC7D,CAAE,CAAA,mBAAmB,CAC3B,EAAA,CAAA;AAAA,0BACA,GAAA,CAAC,UAAO,OAAS,EAAA,MAAM,mBAAsB,EAAA,QAAA,EAAA,CAAA,CAAE,aAAa,CAAE,EAAA;AAAA;AAAA;AAAA;AAChE,GACF,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/QuickstartHeader.esm.js

@@ -3,8 +3,10 @@ import Box from '@mui/material/Box';
 import Toolbar from '@mui/material/Toolbar';
 import Typography from '@mui/material/Typography';
 import quickstartImage from '../assets/quickstart-image.png';
+import { useTranslation } from '../hooks/useTranslation.esm.js';
 
 const QuickstartHeader = () => {
+  const { t } = useTranslation();
   return /* @__PURE__ */ jsxs(
     Toolbar,
     {
@@ -33,8 +35,8 @@ const QuickstartHeader = () => {
               padding: (theme) => `${theme.spacing(3)} 0px`
             },
             children: [
-              /* @__PURE__ */ jsx(Typography, { sx: { fontSize: (theme) => theme.typography.h6 }, children: "Let's get you started with Developer Hub" }),
-              /* @__PURE__ */ jsx(Typography, { sx: { fontSize: (theme) => theme.typography.caption }, children: "We'll guide you through a few quick steps" })
+              /* @__PURE__ */ jsx(Typography, { sx: { fontSize: (theme) => theme.typography.h6 }, children: t("header.title") }),
+              /* @__PURE__ */ jsx(Typography, { sx: { fontSize: (theme) => theme.typography.caption }, children: t("header.subtitle") })
             ]
           }
         )

package/dist/components/QuickstartHeader.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"QuickstartHeader.esm.js","sources":["../../src/components/QuickstartHeader.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport Box from '@mui/material/Box';\nimport Toolbar from '@mui/material/Toolbar';\nimport Typography from '@mui/material/Typography';\nimport quickstartImage from '../assets/quickstart-image.png';\n\nexport const QuickstartHeader = () => {\n  return (\n    <Toolbar\n      sx={{\n        justifyContent: 'center',\n        display: 'flex',\n        flexFlow: 'column',\n      }}\n    >\n      <img\n        src={quickstartImage}\n        alt=\"\"\n        width=\"128px\"\n        style={{ backgroundColor: '#f2f2f2' }}\n      />\n      <Box\n        sx={{\n          alignItems: 'center',\n          display: 'flex',\n          flexFlow: 'column',\n          padding: theme => `${theme.spacing(3)} 0px`,\n        }}\n      >\n        <Typography sx={{ fontSize: theme => theme.typography.h6 }}>\n          Let's get you started with Developer Hub\n        </Typography>\n        <Typography sx={{ fontSize: theme => theme.typography.caption }}>\n          We'll guide you through a few quick steps\n        </Typography>\n      </Box>\n    </Toolbar>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAqBO,MAAM,mBAAmB,MAAM;AACpC,EACE,uBAAA,IAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,EAAI,EAAA;AAAA,QACF,cAAgB,EAAA,QAAA;AAAA,QAChB,OAAS,EAAA,MAAA;AAAA,QACT,QAAU,EAAA;AAAA,OACZ;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,GAAK,EAAA,eAAA;AAAA,YACL,GAAI,EAAA,EAAA;AAAA,YACJ,KAAM,EAAA,OAAA;AAAA,YACN,KAAA,EAAO,EAAE,eAAA,EAAiB,SAAU;AAAA;AAAA,SACtC;AAAA,wBACA,IAAA;AAAA,UAAC,GAAA;AAAA,UAAA;AAAA,YACC,EAAI,EAAA;AAAA,cACF,UAAY,EAAA,QAAA;AAAA,cACZ,OAAS,EAAA,MAAA;AAAA,cACT,QAAU,EAAA,QAAA;AAAA,cACV,SAAS,CAAS,KAAA,KAAA,CAAA,EAAG,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAC,CAAA,IAAA;AAAA,aACvC;AAAA,YAEA,QAAA,EAAA;AAAA,8BAAC,GAAA,CAAA,UAAA,EAAA,EAAW,IAAI,EAAE,QAAA,EAAU,WAAS,KAAM,CAAA,UAAA,CAAW,EAAG,EAAA,EAAG,QAE5D,EAAA,0CAAA,EAAA,CAAA;AAAA,8BACA,GAAA,CAAC,UAAW,EAAA,EAAA,EAAA,EAAI,EAAE,QAAA,EAAU,WAAS,KAAM,CAAA,UAAA,CAAW,OAAQ,EAAA,EAAG,QAEjE,EAAA,2CAAA,EAAA;AAAA;AAAA;AAAA;AACF;AAAA;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"QuickstartHeader.esm.js","sources":["../../src/components/QuickstartHeader.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport Box from '@mui/material/Box';\nimport Toolbar from '@mui/material/Toolbar';\nimport Typography from '@mui/material/Typography';\nimport quickstartImage from '../assets/quickstart-image.png';\nimport { useTranslation } from '../hooks/useTranslation';\n\nexport const QuickstartHeader = () => {\n  const { t } = useTranslation();\n\n  return (\n    <Toolbar\n      sx={{\n        justifyContent: 'center',\n        display: 'flex',\n        flexFlow: 'column',\n      }}\n    >\n      <img\n        src={quickstartImage}\n        alt=\"\"\n        width=\"128px\"\n        style={{ backgroundColor: '#f2f2f2' }}\n      />\n      <Box\n        sx={{\n          alignItems: 'center',\n          display: 'flex',\n          flexFlow: 'column',\n          padding: theme => `${theme.spacing(3)} 0px`,\n        }}\n      >\n        <Typography sx={{ fontSize: theme => theme.typography.h6 }}>\n          {t('header.title')}\n        </Typography>\n        <Typography sx={{ fontSize: theme => theme.typography.caption }}>\n          {t('header.subtitle')}\n        </Typography>\n      </Box>\n    </Toolbar>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAsBO,MAAM,mBAAmB,MAAM;AACpC,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,cAAe,EAAA;AAE7B,EACE,uBAAA,IAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,EAAI,EAAA;AAAA,QACF,cAAgB,EAAA,QAAA;AAAA,QAChB,OAAS,EAAA,MAAA;AAAA,QACT,QAAU,EAAA;AAAA,OACZ;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,GAAK,EAAA,eAAA;AAAA,YACL,GAAI,EAAA,EAAA;AAAA,YACJ,KAAM,EAAA,OAAA;AAAA,YACN,KAAA,EAAO,EAAE,eAAA,EAAiB,SAAU;AAAA;AAAA,SACtC;AAAA,wBACA,IAAA;AAAA,UAAC,GAAA;AAAA,UAAA;AAAA,YACC,EAAI,EAAA;AAAA,cACF,UAAY,EAAA,QAAA;AAAA,cACZ,OAAS,EAAA,MAAA;AAAA,cACT,QAAU,EAAA,QAAA;AAAA,cACV,SAAS,CAAS,KAAA,KAAA,CAAA,EAAG,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAC,CAAA,IAAA;AAAA,aACvC;AAAA,YAEA,QAAA,EAAA;AAAA,8BAAC,GAAA,CAAA,UAAA,EAAA,EAAW,EAAI,EAAA,EAAE,QAAU,EAAA,CAAA,KAAA,KAAS,KAAM,CAAA,UAAA,CAAW,EAAG,EAAA,EACtD,QAAE,EAAA,CAAA,CAAA,cAAc,CACnB,EAAA,CAAA;AAAA,8BACC,GAAA,CAAA,UAAA,EAAA,EAAW,EAAI,EAAA,EAAE,QAAU,EAAA,CAAA,KAAA,KAAS,KAAM,CAAA,UAAA,CAAW,OAAQ,EAAA,EAC3D,QAAE,EAAA,CAAA,CAAA,iBAAiB,CACtB,EAAA;AAAA;AAAA;AAAA;AACF;AAAA;AAAA,GACF;AAEJ;;;;"}

package/dist/hooks/useQuickstartRole.esm.js

@@ -0,0 +1,38 @@
+import { usePermission } from '@backstage/plugin-permission-react';
+import { useApi, configApiRef, identityApiRef } from '@backstage/core-plugin-api';
+import { policyEntityCreatePermission } from '@backstage-community/plugin-rbac-common';
+import { useAsync } from 'react-use';
+
+const useQuickstartRole = () => {
+  const config = useApi(configApiRef);
+  const identityApi = useApi(identityApiRef);
+  const isRBACEnabled = config.getOptionalBoolean("permission.enabled") ?? false;
+  const { loading, allowed } = usePermission({
+    permission: policyEntityCreatePermission
+  });
+  const { value: authResult, loading: authLoading } = useAsync(async () => {
+    try {
+      const credentials = await identityApi.getCredentials();
+      const identity = await identityApi.getBackstageIdentity();
+      const hasValidToken = credentials?.token && credentials.token.length > 10;
+      const userEntityRef = identity?.userEntityRef || "";
+      const ownershipRefs = identity?.ownershipEntityRefs || [];
+      const isGuest = userEntityRef.toLowerCase().includes("guest") || userEntityRef === "user:default/guest" || !hasValidToken && ownershipRefs.length === 0;
+      const isAuthenticated = !isGuest;
+      return { isAuthenticated, identity, credentials };
+    } catch (error) {
+      return { isAuthenticated: false, identity: null, credentials: null };
+    }
+  }, [identityApi]);
+  if (authLoading || loading) return { isLoading: true, userRole: null };
+  const isUserAuthorized = authResult?.isAuthenticated ?? false;
+  if (!isUserAuthorized) {
+    return { isLoading: false, userRole: "admin" };
+  }
+  if (!isRBACEnabled) return { isLoading: false, userRole: "admin" };
+  if (allowed) return { isLoading: false, userRole: "admin" };
+  return { isLoading: false, userRole: "developer" };
+};
+
+export { useQuickstartRole };
+//# sourceMappingURL=useQuickstartRole.esm.js.map

package/dist/hooks/useQuickstartRole.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useQuickstartRole.esm.js","sources":["../../src/hooks/useQuickstartRole.ts"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { usePermission } from '@backstage/plugin-permission-react';\nimport {\n  configApiRef,\n  identityApiRef,\n  useApi,\n} from '@backstage/core-plugin-api';\nimport { policyEntityCreatePermission } from '@backstage-community/plugin-rbac-common';\nimport { useAsync } from 'react-use';\nimport { UserRole } from '../types';\n\n/**\n * Determines the user's role for quickstart functionality based on RBAC permissions and user authorization.\n *\n * Business Logic:\n * - Guest user(unauthorized): show admin items\n * - Authorized user + NO RBAC enabled: show admin items\n * - Authorized user + RBAC enabled:\n *   - if user has admin permission => show configured admin items\n *   - if user doesn't have admin permission => show configured developer items\n *\n * @returns Object with isLoading boolean and userRole ('admin' | 'developer' | null)\n */\nexport const useQuickstartRole = (): {\n  isLoading: boolean;\n  userRole: UserRole | null;\n} => {\n  const config = useApi(configApiRef);\n  const identityApi = useApi(identityApiRef);\n  const isRBACEnabled =\n    config.getOptionalBoolean('permission.enabled') ?? false;\n  const { loading, allowed } = usePermission({\n    permission: policyEntityCreatePermission,\n  });\n\n  // Check user authorization status by examining identity and credentials\n  const { value: authResult, loading: authLoading } = useAsync(async () => {\n    try {\n      const credentials = await identityApi.getCredentials();\n      const identity = await identityApi.getBackstageIdentity();\n\n      // Check multiple indicators to determine if user is authenticated (not a guest)\n      const hasValidToken = credentials?.token && credentials.token.length > 10; // Real tokens are longer\n      const userEntityRef = identity?.userEntityRef || '';\n      const ownershipRefs = identity?.ownershipEntityRefs || [];\n\n      const isGuest =\n        userEntityRef.toLowerCase().includes('guest') ||\n        userEntityRef === 'user:default/guest' ||\n        (!hasValidToken && ownershipRefs.length === 0);\n\n      const isAuthenticated = !isGuest;\n\n      return { isAuthenticated, identity, credentials };\n    } catch (error) {\n      return { isAuthenticated: false, identity: null, credentials: null };\n    }\n  }, [identityApi]);\n\n  // If still loading authorization or permissions, return loading state\n  if (authLoading || loading) return { isLoading: true, userRole: null };\n\n  // Check if user is authorized (authenticated, not a guest)\n  const isUserAuthorized = authResult?.isAuthenticated ?? false;\n\n  // Unauthorized user: show admin items\n  if (!isUserAuthorized) {\n    return { isLoading: false, userRole: 'admin' };\n  }\n\n  // Authorized user + NO RBAC enabled: show admin items\n  if (!isRBACEnabled) return { isLoading: false, userRole: 'admin' };\n\n  // Authorized user + RBAC enabled: check permissions\n  // If user has admin permission => show configured admin items\n  if (allowed) return { isLoading: false, userRole: 'admin' };\n\n  // If user doesn't have admin permission => show configured developer items\n  return { isLoading: false, userRole: 'developer' };\n};\n"],"names":[],"mappings":";;;;;AAsCO,MAAM,oBAAoB,MAG5B;AACH,EAAM,MAAA,MAAA,GAAS,OAAO,YAAY,CAAA;AAClC,EAAM,MAAA,WAAA,GAAc,OAAO,cAAc,CAAA;AACzC,EAAA,MAAM,aACJ,GAAA,MAAA,CAAO,kBAAmB,CAAA,oBAAoB,CAAK,IAAA,KAAA;AACrD,EAAA,MAAM,EAAE,OAAA,EAAS,OAAQ,EAAA,GAAI,aAAc,CAAA;AAAA,IACzC,UAAY,EAAA;AAAA,GACb,CAAA;AAGD,EAAA,MAAM,EAAE,KAAO,EAAA,UAAA,EAAY,SAAS,WAAY,EAAA,GAAI,SAAS,YAAY;AACvE,IAAI,IAAA;AACF,MAAM,MAAA,WAAA,GAAc,MAAM,WAAA,CAAY,cAAe,EAAA;AACrD,MAAM,MAAA,QAAA,GAAW,MAAM,WAAA,CAAY,oBAAqB,EAAA;AAGxD,MAAA,MAAM,aAAgB,GAAA,WAAA,EAAa,KAAS,IAAA,WAAA,CAAY,MAAM,MAAS,GAAA,EAAA;AACvE,MAAM,MAAA,aAAA,GAAgB,UAAU,aAAiB,IAAA,EAAA;AACjD,MAAM,MAAA,aAAA,GAAgB,QAAU,EAAA,mBAAA,IAAuB,EAAC;AAExD,MAAA,MAAM,OACJ,GAAA,aAAA,CAAc,WAAY,EAAA,CAAE,QAAS,CAAA,OAAO,CAC5C,IAAA,aAAA,KAAkB,oBACjB,IAAA,CAAC,aAAiB,IAAA,aAAA,CAAc,MAAW,KAAA,CAAA;AAE9C,MAAA,MAAM,kBAAkB,CAAC,OAAA;AAEzB,MAAO,OAAA,EAAE,eAAiB,EAAA,QAAA,EAAU,WAAY,EAAA;AAAA,aACzC,KAAO,EAAA;AACd,MAAA,OAAO,EAAE,eAAiB,EAAA,KAAA,EAAO,QAAU,EAAA,IAAA,EAAM,aAAa,IAAK,EAAA;AAAA;AACrE,GACF,EAAG,CAAC,WAAW,CAAC,CAAA;AAGhB,EAAA,IAAI,eAAe,OAAS,EAAA,OAAO,EAAE,SAAW,EAAA,IAAA,EAAM,UAAU,IAAK,EAAA;AAGrE,EAAM,MAAA,gBAAA,GAAmB,YAAY,eAAmB,IAAA,KAAA;AAGxD,EAAA,IAAI,CAAC,gBAAkB,EAAA;AACrB,IAAA,OAAO,EAAE,SAAA,EAAW,KAAO,EAAA,QAAA,EAAU,OAAQ,EAAA;AAAA;AAI/C,EAAA,IAAI,CAAC,aAAe,EAAA,OAAO,EAAE,SAAW,EAAA,KAAA,EAAO,UAAU,OAAQ,EAAA;AAIjE,EAAA,IAAI,SAAgB,OAAA,EAAE,SAAW,EAAA,KAAA,EAAO,UAAU,OAAQ,EAAA;AAG1D,EAAA,OAAO,EAAE,SAAA,EAAW,KAAO,EAAA,QAAA,EAAU,WAAY,EAAA;AACnD;;;;"}

package/dist/hooks/useTranslation.esm.js

@@ -0,0 +1,8 @@
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import '../translations/index.esm.js';
+import { quickstartTranslationRef } from '../translations/ref.esm.js';
+
+const useTranslation = () => useTranslationRef(quickstartTranslationRef);
+
+export { useTranslation };
+//# sourceMappingURL=useTranslation.esm.js.map

package/dist/hooks/useTranslation.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTranslation.esm.js","sources":["../../src/hooks/useTranslation.ts"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {\n  useTranslationRef,\n  TranslationFunction,\n} from '@backstage/core-plugin-api/alpha';\nimport { quickstartTranslationRef } from '../translations';\n\nexport const useTranslation = (): {\n  t: TranslationFunction<typeof quickstartTranslationRef.T>;\n} => useTranslationRef(quickstartTranslationRef);\n"],"names":[],"mappings":";;;;AAsBa,MAAA,cAAA,GAAiB,MAEzB,iBAAA,CAAkB,wBAAwB;;;;"}

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import * as _backstage_core_plugin_api from '@backstage/core-plugin-api';
 import { CSSProperties, PropsWithChildren } from 'react';
+import * as _backstage_core_plugin_api_alpha from '@backstage/core-plugin-api/alpha';
 
 /**
  * Props for the QuickstartButton component
@@ -80,5 +81,11 @@ interface QuickstartDrawerContextType {
  */
 declare const useQuickstartDrawerContext: () => QuickstartDrawerContextType;
 
-export { QuickstartButton, QuickstartDrawerProvider, quickstartPlugin, useQuickstartDrawerContext };
+/**
+ * Translation Resource for Quickstart
+ * @public
+ */
+declare const quickstartTranslations: _backstage_core_plugin_api_alpha.TranslationResource<"plugin.quickstart">;
+
+export { QuickstartButton, QuickstartDrawerProvider, quickstartPlugin, quickstartTranslations, useQuickstartDrawerContext };
 export type { QuickstartButtonProps, QuickstartDrawerContextType };

package/dist/index.esm.js

@@ -1,6 +1,7 @@
 import { unstable_ClassNameGenerator } from '@mui/material/className';
 export { QuickstartButton, QuickstartDrawerProvider, quickstartPlugin } from './plugin.esm.js';
 export { useQuickstartDrawerContext } from './hooks/useQuickstartDrawerContext.esm.js';
+export { quickstartTranslations } from './translations/index.esm.js';
 
 unstable_ClassNameGenerator.configure((componentName) => {
   return componentName.startsWith("v5-") ? componentName : `v5-${componentName}`;

package/dist/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../src/index.ts"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { unstable_ClassNameGenerator as ClassNameGenerator } from '@mui/material/className';\n\nClassNameGenerator.configure(componentName => {\n  return componentName.startsWith('v5-')\n    ? componentName\n    : `v5-${componentName}`;\n});\n\nexport * from './plugin';\n\nexport { useQuickstartDrawerContext } from './hooks/useQuickstartDrawerContext';\nexport type { QuickstartDrawerContextType } from './components/QuickstartDrawerContext';\n"],"names":["ClassNameGenerator"],"mappings":";;;;AAkBAA,2BAAA,CAAmB,UAAU,CAAiB,aAAA,KAAA;AAC5C,EAAA,OAAO,cAAc,UAAW,CAAA,KAAK,CACjC,GAAA,aAAA,GACA,MAAM,aAAa,CAAA,CAAA;AACzB,CAAC,CAAA"}
+{"version":3,"file":"index.esm.js","sources":["../src/index.ts"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { unstable_ClassNameGenerator as ClassNameGenerator } from '@mui/material/className';\n\nClassNameGenerator.configure(componentName => {\n  return componentName.startsWith('v5-')\n    ? componentName\n    : `v5-${componentName}`;\n});\n\nexport * from './plugin';\n\nexport { useQuickstartDrawerContext } from './hooks/useQuickstartDrawerContext';\nexport type { QuickstartDrawerContextType } from './components/QuickstartDrawerContext';\n\nexport { quickstartTranslations } from './translations';\n"],"names":["ClassNameGenerator"],"mappings":";;;;;AAkBAA,2BAAA,CAAmB,UAAU,CAAiB,aAAA,KAAA;AAC5C,EAAA,OAAO,cAAc,UAAW,CAAA,KAAK,CACjC,GAAA,aAAA,GACA,MAAM,aAAa,CAAA,CAAA;AACzB,CAAC,CAAA"}

package/dist/plugin.esm.js

@@ -1,7 +1,13 @@
 import { createPlugin, createComponentExtension } from '@backstage/core-plugin-api';
+import './translations/index.esm.js';
+import { quickstartTranslationRef } from './translations/ref.esm.js';
 
 const quickstartPlugin = createPlugin({
-  id: "quickstart"
+  id: "quickstart",
+  __experimentalTranslations: {
+    availableLanguages: ["en", "de", "fr", "es"],
+    resources: [quickstartTranslationRef]
+  }
 });
 const QuickstartDrawerProvider = quickstartPlugin.provide(
   createComponentExtension({

package/dist/plugin.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"plugin.esm.js","sources":["../src/plugin.ts"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {\n  createComponentExtension,\n  createPlugin,\n} from '@backstage/core-plugin-api';\nimport { PropsWithChildren } from 'react';\nimport { QuickstartButtonProps } from './components/QuickstartButton/QuickstartButton';\n\nexport type { QuickstartButtonProps } from './components/QuickstartButton/QuickstartButton';\n\n/**\n * Quick start plugin\n *\n * @public\n */\nexport const quickstartPlugin = createPlugin({\n  id: 'quickstart',\n});\n\n/**\n * Quick start drawer provider\n *\n * @public\n */\nexport const QuickstartDrawerProvider: React.ComponentType<PropsWithChildren> =\n  quickstartPlugin.provide(\n    createComponentExtension({\n      name: 'QuickstartDrawerProvider',\n      component: {\n        lazy: () =>\n          import('./components/QuickstartDrawerProvider').then(\n            m => m.QuickstartDrawerProvider,\n          ),\n      },\n    }),\n  );\n\n/**\n * Quick start button for global header help dropdown\n *\n * @public\n */\nexport const QuickstartButton: React.ComponentType<QuickstartButtonProps> =\n  quickstartPlugin.provide(\n    createComponentExtension({\n      name: 'QuickstartButton',\n      component: {\n        lazy: () =>\n          import('./components/QuickstartButton/QuickstartButton').then(\n            m => m.QuickstartButton,\n          ),\n      },\n    }),\n  );\n"],"names":[],"mappings":";;AA8BO,MAAM,mBAAmB,YAAa,CAAA;AAAA,EAC3C,EAAI,EAAA;AACN,CAAC;AAOM,MAAM,2BACX,gBAAiB,CAAA,OAAA;AAAA,EACf,wBAAyB,CAAA;AAAA,IACvB,IAAM,EAAA,0BAAA;AAAA,IACN,SAAW,EAAA;AAAA,MACT,IAAM,EAAA,MACJ,OAAO,8CAAuC,CAAE,CAAA,IAAA;AAAA,QAC9C,OAAK,CAAE,CAAA;AAAA;AACT;AACJ,GACD;AACH;AAOK,MAAM,mBACX,gBAAiB,CAAA,OAAA;AAAA,EACf,wBAAyB,CAAA;AAAA,IACvB,IAAM,EAAA,kBAAA;AAAA,IACN,SAAW,EAAA;AAAA,MACT,IAAM,EAAA,MACJ,OAAO,uDAAgD,CAAE,CAAA,IAAA;AAAA,QACvD,OAAK,CAAE,CAAA;AAAA;AACT;AACJ,GACD;AACH;;;;"}
+{"version":3,"file":"plugin.esm.js","sources":["../src/plugin.ts"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {\n  createComponentExtension,\n  createPlugin,\n} from '@backstage/core-plugin-api';\nimport { PropsWithChildren } from 'react';\nimport { QuickstartButtonProps } from './components/QuickstartButton/QuickstartButton';\nimport { quickstartTranslationRef } from './translations';\n\nexport type { QuickstartButtonProps } from './components/QuickstartButton/QuickstartButton';\n\n/**\n * Quick start plugin\n *\n * @public\n */\nexport const quickstartPlugin = createPlugin({\n  id: 'quickstart',\n  __experimentalTranslations: {\n    availableLanguages: ['en', 'de', 'fr', 'es'],\n    resources: [quickstartTranslationRef],\n  },\n} as any);\n\n/**\n * Quick start drawer provider\n *\n * @public\n */\nexport const QuickstartDrawerProvider: React.ComponentType<PropsWithChildren> =\n  quickstartPlugin.provide(\n    createComponentExtension({\n      name: 'QuickstartDrawerProvider',\n      component: {\n        lazy: () =>\n          import('./components/QuickstartDrawerProvider').then(\n            m => m.QuickstartDrawerProvider,\n          ),\n      },\n    }),\n  );\n\n/**\n * Quick start button for global header help dropdown\n *\n * @public\n */\nexport const QuickstartButton: React.ComponentType<QuickstartButtonProps> =\n  quickstartPlugin.provide(\n    createComponentExtension({\n      name: 'QuickstartButton',\n      component: {\n        lazy: () =>\n          import('./components/QuickstartButton/QuickstartButton').then(\n            m => m.QuickstartButton,\n          ),\n      },\n    }),\n  );\n"],"names":[],"mappings":";;;;AA+BO,MAAM,mBAAmB,YAAa,CAAA;AAAA,EAC3C,EAAI,EAAA,YAAA;AAAA,EACJ,0BAA4B,EAAA;AAAA,IAC1B,kBAAoB,EAAA,CAAC,IAAM,EAAA,IAAA,EAAM,MAAM,IAAI,CAAA;AAAA,IAC3C,SAAA,EAAW,CAAC,wBAAwB;AAAA;AAExC,CAAQ;AAOD,MAAM,2BACX,gBAAiB,CAAA,OAAA;AAAA,EACf,wBAAyB,CAAA;AAAA,IACvB,IAAM,EAAA,0BAAA;AAAA,IACN,SAAW,EAAA;AAAA,MACT,IAAM,EAAA,MACJ,OAAO,8CAAuC,CAAE,CAAA,IAAA;AAAA,QAC9C,OAAK,CAAE,CAAA;AAAA;AACT;AACJ,GACD;AACH;AAOK,MAAM,mBACX,gBAAiB,CAAA,OAAA;AAAA,EACf,wBAAyB,CAAA;AAAA,IACvB,IAAM,EAAA,kBAAA;AAAA,IACN,SAAW,EAAA;AAAA,MACT,IAAM,EAAA,MACJ,OAAO,uDAAgD,CAAE,CAAA,IAAA;AAAA,QACvD,OAAK,CAAE,CAAA;AAAA;AACT;AACJ,GACD;AACH;;;;"}

package/dist/translations/de.esm.js

@@ -0,0 +1,36 @@
+import { createTranslationMessages } from '@backstage/core-plugin-api/alpha';
+import { quickstartTranslationRef } from './ref.esm.js';
+
+const quickstartTranslationDe = createTranslationMessages({
+  ref: quickstartTranslationRef,
+  messages: {
+    "header.title": "Erste Schritte mit dem Developer Hub",
+    "header.subtitle": "Wir f\xFChren Sie durch einige schnelle Schritte",
+    "button.quickstart": "Schnellstart",
+    "button.openQuickstartGuide": "Schnellstart-Leitfaden \xF6ffnen",
+    "button.closeDrawer": "Drawer schlie\xDFen",
+    "footer.progress": "{{progress}}% Fortschritt",
+    "footer.notStarted": "Nicht begonnen",
+    "footer.hide": "Ausblenden",
+    "content.emptyState.title": "Schnellstart-Inhalte sind f\xFCr Ihre Rolle nicht verf\xFCgbar.",
+    "item.expandAriaLabel": "{{title}} Details erweitern",
+    "item.collapseAriaLabel": "{{title}} Details einklappen",
+    "item.expandButtonAriaLabel": "Element erweitern",
+    "item.collapseButtonAriaLabel": "Element einklappen",
+    "dev.pageTitle": "Quickstart Plugin Testseite",
+    "dev.pageDescription": "Dies ist eine Testseite f\xFCr das Quickstart-Plugin. Verwenden Sie die Schaltfl\xE4chen unten, um mit dem Quickstart-Drawer zu interagieren.",
+    "dev.drawerControls": "Drawer-Steuerungen",
+    "dev.currentState": "Aktueller Drawer-Status: {{state}}",
+    "dev.stateOpen": "Offen",
+    "dev.stateClosed": "Geschlossen",
+    "dev.instructions": "Anweisungen",
+    "dev.step1": '1. Klicken Sie auf "Schnellstart-Leitfaden \xF6ffnen", um den Drawer zu \xF6ffnen',
+    "dev.step2": "2. Navigieren Sie durch die Schnellstart-Schritte",
+    "dev.step3": "3. Testen Sie die Fortschrittsverfolgung durch Abschlie\xDFen von Schritten",
+    "dev.step4": "4. Der Drawer kann mit der Schlie\xDFen-Schaltfl\xE4che oder den eigenen Steuerelementen des Drawers geschlossen werden",
+    "dev.step5": "5. Der Fortschritt wird automatisch in localStorage gespeichert"
+  }
+});
+
+export { quickstartTranslationDe as default };
+//# sourceMappingURL=de.esm.js.map

package/dist/translations/de.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"de.esm.js","sources":["../../src/translations/de.ts"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { createTranslationMessages } from '@backstage/core-plugin-api/alpha';\nimport { quickstartTranslationRef } from './ref';\n\nconst quickstartTranslationDe = createTranslationMessages({\n  ref: quickstartTranslationRef,\n  messages: {\n    'header.title': 'Erste Schritte mit dem Developer Hub',\n    'header.subtitle': 'Wir führen Sie durch einige schnelle Schritte',\n    'button.quickstart': 'Schnellstart',\n    'button.openQuickstartGuide': 'Schnellstart-Leitfaden öffnen',\n    'button.closeDrawer': 'Drawer schließen',\n    'footer.progress': '{{progress}}% Fortschritt',\n    'footer.notStarted': 'Nicht begonnen',\n    'footer.hide': 'Ausblenden',\n    'content.emptyState.title':\n      'Schnellstart-Inhalte sind für Ihre Rolle nicht verfügbar.',\n    'item.expandAriaLabel': '{{title}} Details erweitern',\n    'item.collapseAriaLabel': '{{title}} Details einklappen',\n    'item.expandButtonAriaLabel': 'Element erweitern',\n    'item.collapseButtonAriaLabel': 'Element einklappen',\n    'dev.pageTitle': 'Quickstart Plugin Testseite',\n    'dev.pageDescription':\n      'Dies ist eine Testseite für das Quickstart-Plugin. Verwenden Sie die Schaltflächen unten, um mit dem Quickstart-Drawer zu interagieren.',\n    'dev.drawerControls': 'Drawer-Steuerungen',\n    'dev.currentState': 'Aktueller Drawer-Status: {{state}}',\n    'dev.stateOpen': 'Offen',\n    'dev.stateClosed': 'Geschlossen',\n    'dev.instructions': 'Anweisungen',\n    'dev.step1':\n      '1. Klicken Sie auf \"Schnellstart-Leitfaden öffnen\", um den Drawer zu öffnen',\n    'dev.step2': '2. Navigieren Sie durch die Schnellstart-Schritte',\n    'dev.step3':\n      '3. Testen Sie die Fortschrittsverfolgung durch Abschließen von Schritten',\n    'dev.step4':\n      '4. Der Drawer kann mit der Schließen-Schaltfläche oder den eigenen Steuerelementen des Drawers geschlossen werden',\n    'dev.step5':\n      '5. Der Fortschritt wird automatisch in localStorage gespeichert',\n  },\n});\n\nexport default quickstartTranslationDe;\n"],"names":[],"mappings":";;;AAmBA,MAAM,0BAA0B,yBAA0B,CAAA;AAAA,EACxD,GAAK,EAAA,wBAAA;AAAA,EACL,QAAU,EAAA;AAAA,IACR,cAAgB,EAAA,sCAAA;AAAA,IAChB,iBAAmB,EAAA,kDAAA;AAAA,IACnB,mBAAqB,EAAA,cAAA;AAAA,IACrB,4BAA8B,EAAA,kCAAA;AAAA,IAC9B,oBAAsB,EAAA,qBAAA;AAAA,IACtB,iBAAmB,EAAA,2BAAA;AAAA,IACnB,mBAAqB,EAAA,gBAAA;AAAA,IACrB,aAAe,EAAA,YAAA;AAAA,IACf,0BACE,EAAA,iEAAA;AAAA,IACF,sBAAwB,EAAA,6BAAA;AAAA,IACxB,wBAA0B,EAAA,8BAAA;AAAA,IAC1B,4BAA8B,EAAA,mBAAA;AAAA,IAC9B,8BAAgC,EAAA,oBAAA;AAAA,IAChC,eAAiB,EAAA,6BAAA;AAAA,IACjB,qBACE,EAAA,+IAAA;AAAA,IACF,oBAAsB,EAAA,oBAAA;AAAA,IACtB,kBAAoB,EAAA,oCAAA;AAAA,IACpB,eAAiB,EAAA,OAAA;AAAA,IACjB,iBAAmB,EAAA,aAAA;AAAA,IACnB,kBAAoB,EAAA,aAAA;AAAA,IACpB,WACE,EAAA,mFAAA;AAAA,IACF,WAAa,EAAA,mDAAA;AAAA,IACb,WACE,EAAA,6EAAA;AAAA,IACF,WACE,EAAA,yHAAA;AAAA,IACF,WACE,EAAA;AAAA;AAEN,CAAC;;;;"}

package/dist/translations/es.esm.js

@@ -0,0 +1,36 @@
+import { createTranslationMessages } from '@backstage/core-plugin-api/alpha';
+import { quickstartTranslationRef } from './ref.esm.js';
+
+const quickstartTranslationEs = createTranslationMessages({
+  ref: quickstartTranslationRef,
+  messages: {
+    "header.title": "Comencemos con el Hub del Desarrollador",
+    "header.subtitle": "Te guiaremos a trav\xE9s de algunos pasos r\xE1pidos",
+    "button.quickstart": "Inicio r\xE1pido",
+    "footer.progress": "{{progress}}% de progreso",
+    "footer.notStarted": "No iniciado",
+    "footer.hide": "Ocultar",
+    "content.emptyState.title": "El contenido de inicio r\xE1pido no est\xE1 disponible para tu rol.",
+    "item.expandAriaLabel": "Expandir detalles de {{title}}",
+    "item.collapseAriaLabel": "Contraer detalles de {{title}}",
+    "item.expandButtonAriaLabel": "Expandir elemento",
+    "item.collapseButtonAriaLabel": "Contraer elemento",
+    "button.openQuickstartGuide": "Abrir gu\xEDa de inicio r\xE1pido",
+    "button.closeDrawer": "Cerrar caj\xF3n",
+    "dev.pageTitle": "P\xE1gina de prueba del plugin Quickstart",
+    "dev.pageDescription": "Esta es una p\xE1gina de prueba para el plugin Quickstart. Use los botones de abajo para interactuar con el caj\xF3n de inicio r\xE1pido.",
+    "dev.drawerControls": "Controles del caj\xF3n",
+    "dev.currentState": "Estado actual del caj\xF3n: {{state}}",
+    "dev.stateOpen": "Abierto",
+    "dev.stateClosed": "Cerrado",
+    "dev.instructions": "Instrucciones",
+    "dev.step1": '1. Haga clic en "Abrir gu\xEDa de inicio r\xE1pido" para abrir el caj\xF3n',
+    "dev.step2": "2. Navegue a trav\xE9s de los pasos de inicio r\xE1pido",
+    "dev.step3": "3. Pruebe el seguimiento del progreso completando pasos",
+    "dev.step4": "4. El caj\xF3n puede cerrarse usando el bot\xF3n de cerrar o los controles propios del caj\xF3n",
+    "dev.step5": "5. El progreso se guarda autom\xE1ticamente en localStorage"
+  }
+});
+
+export { quickstartTranslationEs as default };
+//# sourceMappingURL=es.esm.js.map

package/dist/translations/es.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"es.esm.js","sources":["../../src/translations/es.ts"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { createTranslationMessages } from '@backstage/core-plugin-api/alpha';\nimport { quickstartTranslationRef } from './ref';\n\nconst quickstartTranslationEs = createTranslationMessages({\n  ref: quickstartTranslationRef,\n  messages: {\n    'header.title': 'Comencemos con el Hub del Desarrollador',\n    'header.subtitle': 'Te guiaremos a través de algunos pasos rápidos',\n    'button.quickstart': 'Inicio rápido',\n    'footer.progress': '{{progress}}% de progreso',\n    'footer.notStarted': 'No iniciado',\n    'footer.hide': 'Ocultar',\n    'content.emptyState.title':\n      'El contenido de inicio rápido no está disponible para tu rol.',\n    'item.expandAriaLabel': 'Expandir detalles de {{title}}',\n    'item.collapseAriaLabel': 'Contraer detalles de {{title}}',\n    'item.expandButtonAriaLabel': 'Expandir elemento',\n    'item.collapseButtonAriaLabel': 'Contraer elemento',\n    'button.openQuickstartGuide': 'Abrir guía de inicio rápido',\n    'button.closeDrawer': 'Cerrar cajón',\n    'dev.pageTitle': 'Página de prueba del plugin Quickstart',\n    'dev.pageDescription':\n      'Esta es una página de prueba para el plugin Quickstart. Use los botones de abajo para interactuar con el cajón de inicio rápido.',\n    'dev.drawerControls': 'Controles del cajón',\n    'dev.currentState': 'Estado actual del cajón: {{state}}',\n    'dev.stateOpen': 'Abierto',\n    'dev.stateClosed': 'Cerrado',\n    'dev.instructions': 'Instrucciones',\n    'dev.step1':\n      '1. Haga clic en \"Abrir guía de inicio rápido\" para abrir el cajón',\n    'dev.step2': '2. Navegue a través de los pasos de inicio rápido',\n    'dev.step3': '3. Pruebe el seguimiento del progreso completando pasos',\n    'dev.step4':\n      '4. El cajón puede cerrarse usando el botón de cerrar o los controles propios del cajón',\n    'dev.step5': '5. El progreso se guarda automáticamente en localStorage',\n  },\n});\n\nexport default quickstartTranslationEs;\n"],"names":[],"mappings":";;;AAmBA,MAAM,0BAA0B,yBAA0B,CAAA;AAAA,EACxD,GAAK,EAAA,wBAAA;AAAA,EACL,QAAU,EAAA;AAAA,IACR,cAAgB,EAAA,yCAAA;AAAA,IAChB,iBAAmB,EAAA,sDAAA;AAAA,IACnB,mBAAqB,EAAA,kBAAA;AAAA,IACrB,iBAAmB,EAAA,2BAAA;AAAA,IACnB,mBAAqB,EAAA,aAAA;AAAA,IACrB,aAAe,EAAA,SAAA;AAAA,IACf,0BACE,EAAA,qEAAA;AAAA,IACF,sBAAwB,EAAA,gCAAA;AAAA,IACxB,wBAA0B,EAAA,gCAAA;AAAA,IAC1B,4BAA8B,EAAA,mBAAA;AAAA,IAC9B,8BAAgC,EAAA,mBAAA;AAAA,IAChC,4BAA8B,EAAA,mCAAA;AAAA,IAC9B,oBAAsB,EAAA,iBAAA;AAAA,IACtB,eAAiB,EAAA,2CAAA;AAAA,IACjB,qBACE,EAAA,2IAAA;AAAA,IACF,oBAAsB,EAAA,wBAAA;AAAA,IACtB,kBAAoB,EAAA,uCAAA;AAAA,IACpB,eAAiB,EAAA,SAAA;AAAA,IACjB,iBAAmB,EAAA,SAAA;AAAA,IACnB,kBAAoB,EAAA,eAAA;AAAA,IACpB,WACE,EAAA,4EAAA;AAAA,IACF,WAAa,EAAA,yDAAA;AAAA,IACb,WAAa,EAAA,yDAAA;AAAA,IACb,WACE,EAAA,iGAAA;AAAA,IACF,WAAa,EAAA;AAAA;AAEjB,CAAC;;;;"}

package/dist/translations/fr.esm.js

@@ -0,0 +1,36 @@
+import { createTranslationMessages } from '@backstage/core-plugin-api/alpha';
+import { quickstartTranslationRef } from './ref.esm.js';
+
+const quickstartTranslationFr = createTranslationMessages({
+  ref: quickstartTranslationRef,
+  messages: {
+    "header.title": "Commen\xE7ons avec le Hub D\xE9veloppeur",
+    "header.subtitle": "Nous vous guiderons \xE0 travers quelques \xE9tapes rapides",
+    "button.quickstart": "D\xE9marrage rapide",
+    "footer.progress": "{{progress}}% de progression",
+    "footer.notStarted": "Pas encore commenc\xE9",
+    "footer.hide": "Masquer",
+    "content.emptyState.title": "Le contenu de d\xE9marrage rapide n'est pas disponible pour votre r\xF4le.",
+    "item.expandAriaLabel": "D\xE9velopper les d\xE9tails de {{title}}",
+    "item.collapseAriaLabel": "R\xE9duire les d\xE9tails de {{title}}",
+    "item.expandButtonAriaLabel": "D\xE9velopper l'\xE9l\xE9ment",
+    "item.collapseButtonAriaLabel": "R\xE9duire l'\xE9l\xE9ment",
+    "button.openQuickstartGuide": "Ouvrir le guide de d\xE9marrage rapide",
+    "button.closeDrawer": "Fermer le tiroir",
+    "dev.pageTitle": "Page de test du plugin Quickstart",
+    "dev.pageDescription": "Ceci est une page de test pour le plugin Quickstart. Utilisez les boutons ci-dessous pour interagir avec le tiroir de d\xE9marrage rapide.",
+    "dev.drawerControls": "Contr\xF4les du tiroir",
+    "dev.currentState": "\xC9tat actuel du tiroir : {{state}}",
+    "dev.stateOpen": "Ouvert",
+    "dev.stateClosed": "Ferm\xE9",
+    "dev.instructions": "Instructions",
+    "dev.step1": '1. Cliquez sur "Ouvrir le guide de d\xE9marrage rapide" pour ouvrir le tiroir',
+    "dev.step2": "2. Naviguez \xE0 travers les \xE9tapes de d\xE9marrage rapide",
+    "dev.step3": "3. Testez le suivi de progression en compl\xE9tant les \xE9tapes",
+    "dev.step4": "4. Le tiroir peut \xEAtre ferm\xE9 en utilisant le bouton de fermeture ou les contr\xF4les propres du tiroir",
+    "dev.step5": "5. La progression est automatiquement sauvegard\xE9e dans localStorage"
+  }
+});
+
+export { quickstartTranslationFr as default };
+//# sourceMappingURL=fr.esm.js.map

package/dist/translations/fr.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fr.esm.js","sources":["../../src/translations/fr.ts"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { createTranslationMessages } from '@backstage/core-plugin-api/alpha';\nimport { quickstartTranslationRef } from './ref';\n\nconst quickstartTranslationFr = createTranslationMessages({\n  ref: quickstartTranslationRef,\n  messages: {\n    'header.title': 'Commençons avec le Hub Développeur',\n    'header.subtitle': 'Nous vous guiderons à travers quelques étapes rapides',\n    'button.quickstart': 'Démarrage rapide',\n    'footer.progress': '{{progress}}% de progression',\n    'footer.notStarted': 'Pas encore commencé',\n    'footer.hide': 'Masquer',\n    'content.emptyState.title':\n      \"Le contenu de démarrage rapide n'est pas disponible pour votre rôle.\",\n    'item.expandAriaLabel': 'Développer les détails de {{title}}',\n    'item.collapseAriaLabel': 'Réduire les détails de {{title}}',\n    'item.expandButtonAriaLabel': \"Développer l'élément\",\n    'item.collapseButtonAriaLabel': \"Réduire l'élément\",\n    'button.openQuickstartGuide': 'Ouvrir le guide de démarrage rapide',\n    'button.closeDrawer': 'Fermer le tiroir',\n    'dev.pageTitle': 'Page de test du plugin Quickstart',\n    'dev.pageDescription':\n      'Ceci est une page de test pour le plugin Quickstart. Utilisez les boutons ci-dessous pour interagir avec le tiroir de démarrage rapide.',\n    'dev.drawerControls': 'Contrôles du tiroir',\n    'dev.currentState': 'État actuel du tiroir : {{state}}',\n    'dev.stateOpen': 'Ouvert',\n    'dev.stateClosed': 'Fermé',\n    'dev.instructions': 'Instructions',\n    'dev.step1':\n      '1. Cliquez sur \"Ouvrir le guide de démarrage rapide\" pour ouvrir le tiroir',\n    'dev.step2': '2. Naviguez à travers les étapes de démarrage rapide',\n    'dev.step3': '3. Testez le suivi de progression en complétant les étapes',\n    'dev.step4':\n      '4. Le tiroir peut être fermé en utilisant le bouton de fermeture ou les contrôles propres du tiroir',\n    'dev.step5':\n      '5. La progression est automatiquement sauvegardée dans localStorage',\n  },\n});\n\nexport default quickstartTranslationFr;\n"],"names":[],"mappings":";;;AAmBA,MAAM,0BAA0B,yBAA0B,CAAA;AAAA,EACxD,GAAK,EAAA,wBAAA;AAAA,EACL,QAAU,EAAA;AAAA,IACR,cAAgB,EAAA,0CAAA;AAAA,IAChB,iBAAmB,EAAA,6DAAA;AAAA,IACnB,mBAAqB,EAAA,qBAAA;AAAA,IACrB,iBAAmB,EAAA,8BAAA;AAAA,IACnB,mBAAqB,EAAA,wBAAA;AAAA,IACrB,aAAe,EAAA,SAAA;AAAA,IACf,0BACE,EAAA,4EAAA;AAAA,IACF,sBAAwB,EAAA,2CAAA;AAAA,IACxB,wBAA0B,EAAA,wCAAA;AAAA,IAC1B,4BAA8B,EAAA,+BAAA;AAAA,IAC9B,8BAAgC,EAAA,4BAAA;AAAA,IAChC,4BAA8B,EAAA,wCAAA;AAAA,IAC9B,oBAAsB,EAAA,kBAAA;AAAA,IACtB,eAAiB,EAAA,mCAAA;AAAA,IACjB,qBACE,EAAA,4IAAA;AAAA,IACF,oBAAsB,EAAA,wBAAA;AAAA,IACtB,kBAAoB,EAAA,sCAAA;AAAA,IACpB,eAAiB,EAAA,QAAA;AAAA,IACjB,iBAAmB,EAAA,UAAA;AAAA,IACnB,kBAAoB,EAAA,cAAA;AAAA,IACpB,WACE,EAAA,+EAAA;AAAA,IACF,WAAa,EAAA,+DAAA;AAAA,IACb,WAAa,EAAA,kEAAA;AAAA,IACb,WACE,EAAA,8GAAA;AAAA,IACF,WACE,EAAA;AAAA;AAEN,CAAC;;;;"}

package/dist/translations/index.esm.js

@@ -0,0 +1,14 @@
+import { createTranslationResource } from '@backstage/core-plugin-api/alpha';
+import { quickstartTranslationRef } from './ref.esm.js';
+
+const quickstartTranslations = createTranslationResource({
+  ref: quickstartTranslationRef,
+  translations: {
+    de: () => import('./de.esm.js'),
+    fr: () => import('./fr.esm.js'),
+    es: () => import('./es.esm.js')
+  }
+});
+
+export { quickstartTranslationRef, quickstartTranslations };
+//# sourceMappingURL=index.esm.js.map

package/dist/translations/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../../src/translations/index.ts"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { createTranslationResource } from '@backstage/core-plugin-api/alpha';\nimport { quickstartTranslationRef } from './ref';\n\n/**\n * Translation Resource for Quickstart\n * @public\n */\nexport const quickstartTranslations = createTranslationResource({\n  ref: quickstartTranslationRef,\n  translations: {\n    de: () => import('./de'),\n    fr: () => import('./fr'),\n    es: () => import('./es'),\n  },\n});\n\nexport { quickstartTranslationRef };\n"],"names":[],"mappings":";;;AAuBO,MAAM,yBAAyB,yBAA0B,CAAA;AAAA,EAC9D,GAAK,EAAA,wBAAA;AAAA,EACL,YAAc,EAAA;AAAA,IACZ,EAAA,EAAI,MAAM,OAAO,aAAM,CAAA;AAAA,IACvB,EAAA,EAAI,MAAM,OAAO,aAAM,CAAA;AAAA,IACvB,EAAA,EAAI,MAAM,OAAO,aAAM;AAAA;AAE3B,CAAC;;;;"}

package/dist/translations/ref.esm.js

@@ -0,0 +1,50 @@
+import { createTranslationRef } from '@backstage/core-plugin-api/alpha';
+
+const quickstartMessages = {
+  header: {
+    title: "Let's get you started with Developer Hub",
+    subtitle: "We'll guide you through a few quick steps"
+  },
+  button: {
+    quickstart: "Quick start",
+    openQuickstartGuide: "Open Quickstart Guide",
+    closeDrawer: "Close Drawer"
+  },
+  footer: {
+    progress: "{{progress}}% progress",
+    notStarted: "Not started",
+    hide: "Hide"
+  },
+  content: {
+    emptyState: {
+      title: "Quickstart content not available for your role."
+    }
+  },
+  item: {
+    expandAriaLabel: "Expand {{title}} details",
+    collapseAriaLabel: "Collapse {{title}} details",
+    expandButtonAriaLabel: "Expand item",
+    collapseButtonAriaLabel: "Collapse item"
+  },
+  dev: {
+    pageTitle: "Quickstart Plugin Test Page",
+    pageDescription: "This is a test page for the Quickstart plugin. Use the buttons below to interact with the quickstart drawer.",
+    drawerControls: "Drawer Controls",
+    currentState: "Current drawer state: {{state}}",
+    stateOpen: "Open",
+    stateClosed: "Closed",
+    instructions: "Instructions",
+    step1: '1. Click "Open Quickstart Guide" to open the drawer',
+    step2: "2. Navigate through the quickstart steps",
+    step3: "3. Test the progress tracking by completing steps",
+    step4: "4. The drawer can be closed using the close button or the drawer's own controls",
+    step5: "5. Progress is automatically saved to localStorage"
+  }
+};
+const quickstartTranslationRef = createTranslationRef({
+  id: "plugin.quickstart",
+  messages: quickstartMessages
+});
+
+export { quickstartMessages, quickstartTranslationRef };
+//# sourceMappingURL=ref.esm.js.map

package/dist/translations/ref.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ref.esm.js","sources":["../../src/translations/ref.ts"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { createTranslationRef } from '@backstage/core-plugin-api/alpha';\n\n/**\n * Messages object containing all English translations.\n * This is our single source of truth for translations.\n * @public\n */\nexport const quickstartMessages = {\n  header: {\n    title: \"Let's get you started with Developer Hub\",\n    subtitle: \"We'll guide you through a few quick steps\",\n  },\n  button: {\n    quickstart: 'Quick start',\n    openQuickstartGuide: 'Open Quickstart Guide',\n    closeDrawer: 'Close Drawer',\n  },\n  footer: {\n    progress: '{{progress}}% progress',\n    notStarted: 'Not started',\n    hide: 'Hide',\n  },\n  content: {\n    emptyState: {\n      title: 'Quickstart content not available for your role.',\n    },\n  },\n  item: {\n    expandAriaLabel: 'Expand {{title}} details',\n    collapseAriaLabel: 'Collapse {{title}} details',\n    expandButtonAriaLabel: 'Expand item',\n    collapseButtonAriaLabel: 'Collapse item',\n  },\n  dev: {\n    pageTitle: 'Quickstart Plugin Test Page',\n    pageDescription:\n      'This is a test page for the Quickstart plugin. Use the buttons below to interact with the quickstart drawer.',\n    drawerControls: 'Drawer Controls',\n    currentState: 'Current drawer state: {{state}}',\n    stateOpen: 'Open',\n    stateClosed: 'Closed',\n    instructions: 'Instructions',\n    step1: '1. Click \"Open Quickstart Guide\" to open the drawer',\n    step2: '2. Navigate through the quickstart steps',\n    step3: '3. Test the progress tracking by completing steps',\n    step4:\n      \"4. The drawer can be closed using the close button or the drawer's own controls\",\n    step5: '5. Progress is automatically saved to localStorage',\n  },\n};\n\n/**\n * Translation reference for Quickstart plugin\n * @public\n */\nexport const quickstartTranslationRef = createTranslationRef({\n  id: 'plugin.quickstart',\n  messages: quickstartMessages,\n});\n"],"names":[],"mappings":";;AAuBO,MAAM,kBAAqB,GAAA;AAAA,EAChC,MAAQ,EAAA;AAAA,IACN,KAAO,EAAA,0CAAA;AAAA,IACP,QAAU,EAAA;AAAA,GACZ;AAAA,EACA,MAAQ,EAAA;AAAA,IACN,UAAY,EAAA,aAAA;AAAA,IACZ,mBAAqB,EAAA,uBAAA;AAAA,IACrB,WAAa,EAAA;AAAA,GACf;AAAA,EACA,MAAQ,EAAA;AAAA,IACN,QAAU,EAAA,wBAAA;AAAA,IACV,UAAY,EAAA,aAAA;AAAA,IACZ,IAAM,EAAA;AAAA,GACR;AAAA,EACA,OAAS,EAAA;AAAA,IACP,UAAY,EAAA;AAAA,MACV,KAAO,EAAA;AAAA;AACT,GACF;AAAA,EACA,IAAM,EAAA;AAAA,IACJ,eAAiB,EAAA,0BAAA;AAAA,IACjB,iBAAmB,EAAA,4BAAA;AAAA,IACnB,qBAAuB,EAAA,aAAA;AAAA,IACvB,uBAAyB,EAAA;AAAA,GAC3B;AAAA,EACA,GAAK,EAAA;AAAA,IACH,SAAW,EAAA,6BAAA;AAAA,IACX,eACE,EAAA,8GAAA;AAAA,IACF,cAAgB,EAAA,iBAAA;AAAA,IAChB,YAAc,EAAA,iCAAA;AAAA,IACd,SAAW,EAAA,MAAA;AAAA,IACX,WAAa,EAAA,QAAA;AAAA,IACb,YAAc,EAAA,cAAA;AAAA,IACd,KAAO,EAAA,qDAAA;AAAA,IACP,KAAO,EAAA,0CAAA;AAAA,IACP,KAAO,EAAA,mDAAA;AAAA,IACP,KACE,EAAA,iFAAA;AAAA,IACF,KAAO,EAAA;AAAA;AAEX;AAMO,MAAM,2BAA2B,oBAAqB,CAAA;AAAA,EAC3D,EAAI,EAAA,mBAAA;AAAA,EACJ,QAAU,EAAA;AACZ,CAAC;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@red-hat-developer-hub/backstage-plugin-quickstart",
-  "version": "1.2.0",
+  "version": "1.4.0",
   "license": "Apache-2.0",
   "main": "dist/index.esm.js",
   "types": "dist/index.d.ts",
@@ -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",

package/dist/hooks/useQuickstartPermission.esm.js

@@ -1,27 +0,0 @@
-import { useApi, identityApiRef, configApiRef } from '@backstage/core-plugin-api';
-import { useAsync } from 'react-use';
-
-const useQuickstartPermission = () => {
-  const identityApi = useApi(identityApiRef);
-  const configApi = useApi(configApiRef);
-  const getUserAuthorization = async () => {
-    const { token: idToken } = await identityApi.getCredentials();
-    const backendUrl = configApi.getString("backend.baseUrl");
-    const jsonResponse = await fetch(`${backendUrl}/api/permission/`, {
-      headers: {
-        ...idToken && { Authorization: `Bearer ${idToken}` }
-      }
-    });
-    return jsonResponse.json();
-  };
-  const { loading: isUserLoading, value: result } = useAsync(
-    async () => await getUserAuthorization(),
-    []
-  );
-  const isRBACPluginEnabled = configApi.getOptionalBoolean("permission.enabled");
-  if (!isRBACPluginEnabled) return true;
-  return !isUserLoading && result.status === "Authorized";
-};
-
-export { useQuickstartPermission };
-//# sourceMappingURL=useQuickstartPermission.esm.js.map

package/dist/hooks/useQuickstartPermission.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useQuickstartPermission.esm.js","sources":["../../src/hooks/useQuickstartPermission.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {\n  configApiRef,\n  identityApiRef,\n  useApi,\n} from '@backstage/core-plugin-api';\nimport { useAsync } from 'react-use';\n\nexport const useQuickstartPermission = () => {\n  const identityApi = useApi(identityApiRef);\n  const configApi = useApi(configApiRef);\n\n  const getUserAuthorization = async () => {\n    const { token: idToken } = await identityApi.getCredentials();\n    const backendUrl = configApi.getString('backend.baseUrl');\n    const jsonResponse = await fetch(`${backendUrl}/api/permission/`, {\n      headers: {\n        ...(idToken && { Authorization: `Bearer ${idToken}` }),\n      },\n    });\n    return jsonResponse.json();\n  };\n  const { loading: isUserLoading, value: result } = useAsync(\n    async () => await getUserAuthorization(),\n    [],\n  );\n\n  const isRBACPluginEnabled =\n    configApi.getOptionalBoolean('permission.enabled');\n\n  if (!isRBACPluginEnabled) return true;\n\n  return !isUserLoading && result.status === 'Authorized';\n};\n"],"names":[],"mappings":";;;AAuBO,MAAM,0BAA0B,MAAM;AAC3C,EAAM,MAAA,WAAA,GAAc,OAAO,cAAc,CAAA;AACzC,EAAM,MAAA,SAAA,GAAY,OAAO,YAAY,CAAA;AAErC,EAAA,MAAM,uBAAuB,YAAY;AACvC,IAAA,MAAM,EAAE,KAAO,EAAA,OAAA,EAAY,GAAA,MAAM,YAAY,cAAe,EAAA;AAC5D,IAAM,MAAA,UAAA,GAAa,SAAU,CAAA,SAAA,CAAU,iBAAiB,CAAA;AACxD,IAAA,MAAM,YAAe,GAAA,MAAM,KAAM,CAAA,CAAA,EAAG,UAAU,CAAoB,gBAAA,CAAA,EAAA;AAAA,MAChE,OAAS,EAAA;AAAA,QACP,GAAI,OAAW,IAAA,EAAE,aAAe,EAAA,CAAA,OAAA,EAAU,OAAO,CAAG,CAAA;AAAA;AACtD,KACD,CAAA;AACD,IAAA,OAAO,aAAa,IAAK,EAAA;AAAA,GAC3B;AACA,EAAA,MAAM,EAAE,OAAA,EAAS,aAAe,EAAA,KAAA,EAAO,QAAW,GAAA,QAAA;AAAA,IAChD,YAAY,MAAM,oBAAqB,EAAA;AAAA,IACvC;AAAC,GACH;AAEA,EAAM,MAAA,mBAAA,GACJ,SAAU,CAAA,kBAAA,CAAmB,oBAAoB,CAAA;AAEnD,EAAI,IAAA,CAAC,qBAA4B,OAAA,IAAA;AAEjC,EAAO,OAAA,CAAC,aAAiB,IAAA,MAAA,CAAO,MAAW,KAAA,YAAA;AAC7C;;;;"}