Frontend authorization docs for plugin authors (#11034)

* Frontend authorization docs for plugin authors

Signed-off-by: Joon Park <joonp@spotify.com>

* Wording changes

Signed-off-by: Joon Park <joonp@spotify.com>

* Clarify name of example create permission variable

Signed-off-by: Joon Park <joonp@spotify.com>

* Refactor todo list frontend code to reduce diff

Signed-off-by: Joon Park <joonp@spotify.com>

* API reports

Signed-off-by: Joon Park <joonp@spotify.com>

Signed-off-by: Joon Park <joonp@spotify.com>

plugins/example-todo-list-common/api-report.md

@@ -8,5 +8,8 @@ import { BasicPermission } from '@backstage/plugin-permission-common';
 // @public
 export const tempExamplePermission: BasicPermission;
 
+// @public
+export const todoListPermissions: BasicPermission[];
+
 // (No @packageDocumentation comment for this package)
 ```

plugins/example-todo-list-common/src/permissions.ts

@@ -25,3 +25,10 @@ export const tempExamplePermission = createPermission({
   name: 'temp.example.noop',
   attributes: {},
 });
+
+/**
+ * List of all todo list permissions.
+ *
+ * @public
+ */
+export const todoListPermissions = [tempExamplePermission];

plugins/example-todo-list/src/components/TodoListPage/TodoListPage.tsx

@@ -45,17 +45,16 @@ export const TodoListPage = () => {
   const discoveryApi = useApi(discoveryApiRef);
   const { fetch } = useApi(fetchApiRef);
   const alertApi = useApi(alertApiRef);
-  const title = useRef('');
   const [key, refetchTodos] = useReducer(i => i + 1, 0);
   const [editElement, setEdit] = useState<Todo | undefined>();
 
-  const handleAdd = async () => {
+  const handleAdd = async (title: string) => {
     try {
       const response = await fetch(
         `${await discoveryApi.getBaseUrl('todolist')}/todos`,
         {
           method: 'POST',
-          body: JSON.stringify({ title: title.current }),
+          body: JSON.stringify({ title }),
           headers: {
             'Content-Type': 'application/json',
           },
@@ -117,21 +116,7 @@ export const TodoListPage = () => {
         </ContentHeader>
         <Grid container spacing={3} direction="column">
           <Grid item>
-            <Typography variant="body1">Add todo</Typography>
-            <Box
-              component="span"
-              alignItems="flex-end"
-              display="flex"
-              flexDirection="row"
-            >
-              <TextField
-                placeholder="Write something here..."
-                onChange={e => (title.current = e.target.value)}
-              />
-              <Button variant="contained" onClick={handleAdd}>
-                Add
-              </Button>
-            </Box>
+            <AddTodo onAdd={handleAdd} />
           </Grid>
           <Grid item>
             <TodoList key={key} onEdit={setEdit} />
@@ -149,6 +134,30 @@ export const TodoListPage = () => {
   );
 };
 
+function AddTodo({ onAdd }: { onAdd: (title: string) => any }) {
+  const title = useRef('');
+
+  return (
+    <>
+      <Typography variant="body1">Add todo</Typography>
+      <Box
+        component="span"
+        alignItems="flex-end"
+        display="flex"
+        flexDirection="row"
+      >
+        <TextField
+          placeholder="Write something here..."
+          onChange={e => (title.current = e.target.value)}
+        />
+        <Button variant="contained" onClick={() => onAdd(title.current)}>
+          Add
+        </Button>
+      </Box>
+    </>
+  );
+}
+
 function EditModal({
   todo,
   onCancel,