From 5492eb6d8c83dae33e7de74b0c89a1c26c72940c Mon Sep 17 00:00:00 2001
From: Johan Haals <johan.haals@gmail.com>
Date: Wed, 18 Sep 2024 13:56:41 +0200
Subject: [PATCH 1/4] Scaffolder: Add ability to reference specific actions

Signed-off-by: Johan Haals <johan.haals@gmail.com>
---
 .changeset/nasty-lamps-greet.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/nasty-lamps-greet.md

diff --git a/.changeset/nasty-lamps-greet.md b/.changeset/nasty-lamps-greet.md
new file mode 100644
index 0000000000..75d8086db7
--- /dev/null
+++ b/.changeset/nasty-lamps-greet.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-scaffolder': minor
+---
+
+Added ability to link to a specific action on the actions page

From a6be9058bf0308a71d88a855bf80f745ee8c294a Mon Sep 17 00:00:00 2001
From: Johan Haals <johan.haals@gmail.com>
Date: Wed, 18 Sep 2024 13:58:10 +0200
Subject: [PATCH 2/4] Scaffolder: Add ability to reference specific actions

Signed-off-by: Johan Haals <johan.haals@gmail.com>
---
 .../components/ActionsPage/ActionsPage.tsx    | 31 ++++++++++++++++---
 1 file changed, 27 insertions(+), 4 deletions(-)

diff --git a/plugins/scaffolder/src/components/ActionsPage/ActionsPage.tsx b/plugins/scaffolder/src/components/ActionsPage/ActionsPage.tsx
index 2f9bcba279..1bb2f7faae 100644
--- a/plugins/scaffolder/src/components/ActionsPage/ActionsPage.tsx
+++ b/plugins/scaffolder/src/components/ActionsPage/ActionsPage.tsx
@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React, { Fragment, useState } from 'react';
+import React, { Fragment, useCallback, useEffect, useState } from 'react';
 import useAsync from 'react-use/esm/useAsync';
 import {
   ActionExample,
@@ -38,6 +38,7 @@ import { JSONSchema7, JSONSchema7Definition } from 'json-schema';
 import classNames from 'classnames';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import ExpandLessIcon from '@material-ui/icons/ExpandLess';
+import LinkIcon from '@material-ui/icons/Link';
 
 import { useApi, useRouteRef } from '@backstage/core-plugin-api';
 import {
@@ -46,13 +47,14 @@ import {
   EmptyState,
   ErrorPanel,
   Header,
+  Link,
   MarkdownContent,
   Page,
   Progress,
 } from '@backstage/core-components';
 import Chip from '@material-ui/core/Chip';
 import { ScaffolderPageContextMenu } from '@backstage/plugin-scaffolder-react/alpha';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 import {
   editRouteRef,
   rootRouteRef,
@@ -85,6 +87,9 @@ const useStyles = makeStyles(theme => ({
       color: theme.palette.error.light,
     },
   },
+  link: {
+    paddingLeft: theme.spacing(1),
+  },
 }));
 
 const ExamplesTable = (props: { examples: ActionExample[] }) => {
@@ -122,9 +127,16 @@ const ActionPageContent = () => {
   const classes = useStyles();
   const { loading, value, error } = useAsync(async () => {
     return api.listActions();
-  });
+  }, [api]);
+
   const [isExpanded, setIsExpanded] = useState<{ [key: string]: boolean }>({});
 
+  useEffect(() => {
+    if (value && window.location.hash) {
+      document.querySelector(window.location.hash)?.scrollIntoView();
+    }
+  }, [value]);
+
   if (loading) {
     return <Progress />;
   }
@@ -295,9 +307,20 @@ const ActionPageContent = () => {
     );
     return (
       <Box pb={4} key={action.id}>
-        <Typography variant="h4" component="h2" className={classes.code}>
+        <Typography
+          id={action.id.replaceAll(':', '-')}
+          variant="h4"
+          component="h2"
+          className={classes.code}
+        >
           {action.id}
         </Typography>
+        <Link
+          className={classes.link}
+          to={`#${action.id.replaceAll(':', '-')}`}
+        >
+          <LinkIcon />
+        </Link>
         {action.description && <MarkdownContent content={action.description} />}
         {action.schema?.input && (
           <Box pb={2}>

From e6d71e67e5a0ccf52c162a1bd1c838f3c862eb7a Mon Sep 17 00:00:00 2001
From: Johan Haals <johan.haals@gmail.com>
Date: Wed, 18 Sep 2024 14:01:06 +0200
Subject: [PATCH 3/4] chore: remove unused import

Signed-off-by: Johan Haals <johan.haals@gmail.com>
---
 plugins/scaffolder/src/components/ActionsPage/ActionsPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/plugins/scaffolder/src/components/ActionsPage/ActionsPage.tsx b/plugins/scaffolder/src/components/ActionsPage/ActionsPage.tsx
index 1bb2f7faae..4f6bca1689 100644
--- a/plugins/scaffolder/src/components/ActionsPage/ActionsPage.tsx
+++ b/plugins/scaffolder/src/components/ActionsPage/ActionsPage.tsx
@@ -54,7 +54,7 @@ import {
 } from '@backstage/core-components';
 import Chip from '@material-ui/core/Chip';
 import { ScaffolderPageContextMenu } from '@backstage/plugin-scaffolder-react/alpha';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import {
   editRouteRef,
   rootRouteRef,

From e86e4a5ff4437a447388e038dab8c0d427d46d7d Mon Sep 17 00:00:00 2001
From: Johan Haals <johan.haals@gmail.com>
Date: Wed, 18 Sep 2024 15:00:58 +0200
Subject: [PATCH 4/4] Remove unused imports

Signed-off-by: Johan Haals <johan.haals@gmail.com>
---
 plugins/scaffolder/src/components/ActionsPage/ActionsPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/plugins/scaffolder/src/components/ActionsPage/ActionsPage.tsx b/plugins/scaffolder/src/components/ActionsPage/ActionsPage.tsx
index 4f6bca1689..240f2f8707 100644
--- a/plugins/scaffolder/src/components/ActionsPage/ActionsPage.tsx
+++ b/plugins/scaffolder/src/components/ActionsPage/ActionsPage.tsx
@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React, { Fragment, useCallback, useEffect, useState } from 'react';
+import React, { Fragment, useEffect, useState } from 'react';
 import useAsync from 'react-use/esm/useAsync';
 import {
   ActionExample,