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
diff --git a/plugins/scaffolder/src/components/ActionsPage/ActionsPage.tsx b/plugins/scaffolder/src/components/ActionsPage/ActionsPage.tsx
index 2f9bcba279..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, useState } from 'react';
+import React, { Fragment, 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,6 +47,7 @@ import {
EmptyState,
ErrorPanel,
Header,
+ Link,
MarkdownContent,
Page,
Progress,
@@ -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 ;
}
@@ -295,9 +307,20 @@ const ActionPageContent = () => {
);
return (
-
+
{action.id}
+
+
+
{action.description && }
{action.schema?.input && (