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 && (