addressing code review comments

Signed-off-by: Brian Fletcher <brian@roadie.io>

plugins/scaffolder-backend/src/scaffolder/actions/builtin/debug/log.ts

@@ -29,7 +29,7 @@ const examples = [
         {
           action: id,
           id: 'write-debug-line',
-          name: 'Write log line',
+          name: 'Write "Hello Backstage!" log line',
           input: {
             message: 'Hello Backstage!',
           },
@@ -43,8 +43,8 @@ const examples = [
       steps: [
         {
           action: id,
-          id: 'write-debug-line',
-          name: 'Write log line',
+          id: 'write-workspace-directory',
+          name: 'List the workspace directory',
           input: {
             listWorkspace: true,
           },

plugins/scaffolder/src/components/ActionsPage/ActionsPage.tsx

@@ -44,7 +44,6 @@ import {
   Header,
   Page,
   ErrorPage,
-  Table as BackstageTable,
   TableColumn,
   CodeSnippet,
 } from '@backstage/core-components';
@@ -76,28 +75,33 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-const examplesColumns: TableColumn<ActionExample>[] = [
-  {
-    title: 'Description',
-    field: 'description',
-    width: '20%',
-  },
-  {
-    title: 'Example',
-    render: ({ example }) => {
-      return (
-        <Grid>
-          <CodeSnippet
-            text={example}
-            showLineNumbers
-            showCopyCodeButton
-            language="JavaScript"
-          />
-        </Grid>
-      );
-    },
-  },
-];
+const ExamplesTable = (props: { examples: ActionExample[] }) => {
+  return (
+    <Grid container>
+      {props.examples.map(example => {
+        return (
+          <Grid container>
+            <Grid lg={3}>
+              <Box padding={4}>
+                <Typography>{example.description}</Typography>
+              </Box>
+            </Grid>
+            <Grid lg={9}>
+              <Box padding={1}>
+                <CodeSnippet
+                  text={example.example}
+                  showLineNumbers
+                  showCopyCodeButton
+                  language="JavaScript"
+                />
+              </Box>
+            </Grid>
+          </Grid>
+        );
+      })}
+    </Grid>
+  );
+};
 
 export const ActionsPage = () => {
   const api = useApi(scaffolderApiRef);
@@ -219,19 +223,7 @@ export const ActionsPage = () => {
             </AccordionSummary>
             <AccordionDetails>
               <Box pb={2}>
-                <BackstageTable
-                  data={action.examples}
-                  columns={examplesColumns}
-                  options={{
-                    search: false,
-                    showTitle: false,
-                    toolbar: false,
-                    loadingType: 'linear',
-                    header: true,
-                    padding: 'dense',
-                    paging: false,
-                  }}
-                />
+                <ExamplesTable examples={action.examples} />
               </Box>
             </AccordionDetails>
           </Accordion>