docs: part 3 and cleanup

docs/appendix/part-3-code.md

@@ -0,0 +1,59 @@
+# Part 3: Code - React Cat Preview Field Extension
+
+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.
+
+```typescript
+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>
+  );
+};
+```

docs/clean-up.md

@@ -0,0 +1,31 @@
+# Clean up
+
+??? Info "Pro tip"
+
+    You can delete via the `gh cli` as well. Run the following command to delete the repository:
+
+    ```bash
+    gh repo delete <repo-name> --confirm
+    ```
+
+    The same you can do with the Codespaces. Run the following command to delete the Codespace:
+
+    ```bash
+    gh codespace list
+    gh codespace delete -c <codespace-id>
+    ```
+
+    Be-careful with the `gh cli` as it can delete things without asking for confirmation.
+
+## Codespaces
+
+During the workshop we used GitHub Codespaces. The Codespace will be automatically stopped after 30 minutes of inactivity. But now the workshop is over, you can delete the Codespace to avoid any burning down your free tier or generate costs depending on your payment plan.
+
+Go to the [Codespace overview page](https://github.com/codespaces) and delete the Codespace created for this workshops.
+
+## Repositories
+
+During the workshops you have created several repositories. You can delete the repositories now safely as they are not needed anymore.
+
+Go to the the your user page, select the repositories tab. Next select the repository you want to delete and go to the settings. Scroll down to the danger zone and delete the repository.
+

docs/part-1.md

@@ -123,6 +123,8 @@ in GitHub for you. Use for "owner" your GitHub handle and choose a name for the
 
 ![Cat scanner repo](./assets/part_1_cat_scanner_repo.png)
 
+After this point we do not need the newly created repository anymore, so you can delete it in GitHub.
+
 ??? Warning "Authentication"
 
     Authentication is needed to enable your backstage to log into GitHub and

docs/part-3.md

@@ -190,13 +190,15 @@ scaffolder.
     ```
 
 Now we need to export the component from the plugin by modifying the `index.ts`
-in the `RandomCatPix` folder and in the components folder.
+in the `RandomCatPix` folder.
 
 ```typescript
 // plugins/catscanner-react/src/components/RandomCatPix/index.ts
 export { RandomCatPixFieldExtension } from "./extensions";
 ```
 
+Next we do the same in the `components` folder to export the `RandomCatPix`.
+
 ```typescript
 // plugins/catscanner-react/src/components/index.ts
 export * from "./RandomCatPix";

mkdocs.yml

@@ -35,8 +35,10 @@ nav:
       - Part 1 - Creating a template: "part-1.md"
       - Part 2 - Creating a new action: "part-2.md"
       - Part 3 - Customize the UI: "part-3.md"
+  - Clean up: "clean-up.md"
   - Appendix:
       - Part 2 - Code: "appendix/part-2-code.md"
+      - Part 3 - Code: "appendix/part-3-code.md"
 markdown_extensions:
   - admonition
   - pymdownx.details