Below is the code for the action that we will be creating in this exercise. This +action will download a random cat image from the Cat API and save it to the +workspace.
+import { createTemplateAction } from "@backstage/plugin-scaffolder-node";
+import fs from "fs";
+import { Readable } from "stream";
+import { ReadableStream } from "stream/web";
+import { finished } from "stream/promises";
+import path from "path";
+
+// types
+export interface CatResult {
+ id: string;
+ url: string;
+ width: number;
+ height: number;
+}
+
+/**
+ * Creates an `acme:example` Scaffolder action.
+ *
+ * @remarks
+ *
+ * See {@link https://example.com} for more information.
+ *
+ * @public
+ */
+export function createAcmeExampleAction() {
+ // For more information on how to define custom actions, see
+ // https://backstage.io/docs/features/software-templates/writing-custom-actions
+ return createTemplateAction<{
+ myParameter: string;
+ }>({
+ id: "catscanner:randomcat",
+ description: "Downloads a random cat image into the workspace",
+ schema: {
+ input: {
+ type: "object",
+ required: [],
+ properties: {},
+ },
+ },
+ async handler(ctx) {
+ ctx.logger.info(
+ `Running example template with parameters: ${ctx.input.myParameter}`
+ );
+
+ const catResult = await fetch(
+ "https://api.thecatapi.com/v1/images/search"
+ );
+
+ const catData: Record<string, CatResult> = await catResult.json();
+
+ const stream = fs.createWriteStream(
+ path.join(ctx.workspacePath, "catimage.jpeg")
+ );
+ const { body } = await fetch(catData[0].url);
+
+ await finished(Readable.fromWeb(body as ReadableStream).pipe(stream));
+
+ ctx.logger.info("Cat image downloaded");
+ },
+ });
+}
+Below is the code for the React component that we will be creating in this exercise. This component will display a random cat picture from the Cat API.
+import React, { useEffect, useState } from 'react';
+import { FieldExtensionComponentProps } from '@backstage/plugin-scaffolder-react';
+import FormControl from '@material-ui/core/FormControl';
+import { Button, FormHelperText, FormLabel } from '@material-ui/core';
+
+export interface CatResult {
+ id: string;
+ url: string;
+ width: number;
+ height: number;
+}
+
+/*
+ This is the actual component that will get rendered in the form
+*/
+export const RandomCatPixExtension = ({
+ onChange,
+ rawErrors,
+ required,
+ formData,
+}: FieldExtensionComponentProps<string>) => {
+ const [catPic, setCatPic] = useState('');
+
+ const refreshPic = async () => {
+ const catResult = await fetch('https://api.thecatapi.com/v1/images/search');
+ const catData: Record<string, CatResult> = await catResult.json();
+ setCatPic(catData[0].url);
+ onChange(catData[0].url);
+ };
+
+ useEffect(() => {
+ refreshPic();
+ }, []);
+
+ return (
+ <FormControl
+ margin="normal"
+ required={required}
+ error={rawErrors?.length > 0 && !formData}
+ >
+ <FormLabel>Random Cat Picture</FormLabel>
+ <Button variant="contained" color="primary" onClick={() => refreshPic()}>
+ Refresh 😻
+ </Button>
+
+ <img src={catPic} alt="Random Cat" width={'500px'} />
+
+ <FormHelperText id="entityName">
+ Giving you a random cat picture, all day, every day.
+ </FormHelperText>
+ </FormControl>
+ );
+};
+