document cleaning - tutorial quickstarts (#2520)

* Formatting & spelling

* Update quickstart-app-plugin.md

* adding md's to contrib folder

contrib/docs/tutorials/quickstart-app-plugin/ExampleComponent.md

@@ -0,0 +1,58 @@
+### Source repo: https://github.com/johnson-jesse/simple-backstage-app-plugin
+
+ExampleComponent.tsx reference
+
+```tsx
+import React, { FC } from 'react';
+import { Typography, Grid } from '@material-ui/core';
+import {
+  InfoCard,
+  Header,
+  Page,
+  pageTheme,
+  Content,
+  ContentHeader,
+  HeaderLabel,
+  SupportButton,
+  identityApiRef,
+} from '@backstage/core';
+import { useApi } from '@backstage/core-api';
+import ExampleFetchComponent from '../ExampleFetchComponent';
+
+const ExampleComponent: FC<{}> = () => {
+  const identityApi = useApi(identityApiRef);
+  const userId = identityApi.getUserId();
+  const profile = identityApi.getProfile();
+
+  return (
+    <Page theme={pageTheme.tool}>
+      <Header
+        title="Welcome to github-playground!"
+        subtitle="Optional subtitle"
+      >
+        <HeaderLabel label="Owner" value="Team X" />
+        <HeaderLabel label="Lifecycle" value="Alpha" />
+      </Header>
+      <Content>
+        <ContentHeader title="Plugin title">
+          <SupportButton>A description of your plugin goes here.</SupportButton>
+        </ContentHeader>
+        <Grid container spacing={3} direction="column">
+          <Grid item>
+            <InfoCard title={userId}>
+              <Typography variant="body1">
+                {`${profile.displayName} | ${profile.email}`}
+              </Typography>
+            </InfoCard>
+          </Grid>
+          <Grid item>
+            <ExampleFetchComponent />
+          </Grid>
+        </Grid>
+      </Content>
+    </Page>
+  );
+};
+
+export default ExampleComponent;
+```

contrib/docs/tutorials/quickstart-app-plugin/ExampleFetchComponent.md

@@ -0,0 +1,111 @@
+### Source repo: https://github.com/johnson-jesse/simple-backstage-app-plugin
+
+ExampleFetchComponent.tsx reference
+
+```tsx
+import React, { FC } from 'react';
+import { useAsync } from 'react-use';
+import Alert from '@material-ui/lab/Alert';
+import {
+  Table,
+  TableColumn,
+  Progress,
+  githubAuthApiRef,
+} from '@backstage/core';
+import { useApi } from '@backstage/core-api';
+import { graphql } from '@octokit/graphql';
+
+const query = `{
+  viewer {
+    repositories(first: 100) {
+      totalCount
+      nodes {
+        name
+        createdAt
+        description
+        diskUsage
+        isFork
+      }
+      pageInfo {
+        endCursor
+        hasNextPage
+      }
+    }
+  }
+}`;
+
+type Node = {
+  name: string;
+  createdAt: string;
+  description: string;
+  diskUsage: number;
+  isFork: boolean;
+};
+
+type Viewer = {
+  repositories: {
+    totalCount: number;
+    nodes: Node[];
+    pageInfo: {
+      endCursor: string;
+      hasNextPage: boolean;
+    };
+  };
+};
+
+type DenseTableProps = {
+  viewer: Viewer;
+};
+
+export const DenseTable: FC<DenseTableProps> = ({ viewer }) => {
+  const columns: TableColumn[] = [
+    { title: 'Name', field: 'name' },
+    { title: 'Created', field: 'createdAt' },
+    { title: 'Description', field: 'description' },
+    { title: 'Disk Usage', field: 'diskUsage' },
+    { title: 'Fork', field: 'isFork' },
+  ];
+
+  return (
+    <Table
+      title="List Of User's Repositories"
+      options={{ search: false, paging: false }}
+      columns={columns}
+      data={viewer.repositories.nodes}
+    />
+  );
+};
+
+const ExampleFetchComponent: FC<{}> = () => {
+  const auth = useApi(githubAuthApiRef);
+
+  const { value, loading, error } = useAsync(async (): Promise<any> => {
+    const token = await auth.getAccessToken();
+
+    const gqlEndpoint = graphql.defaults({
+      // Uncomment baseUrl if using enterprise
+      // baseUrl: 'https://github.MY-BIZ.com/api',
+      headers: {
+        authorization: `token ${token}`,
+      },
+    });
+    const { viewer } = await gqlEndpoint(query);
+    return viewer;
+  }, []);
+
+  if (loading) return <Progress />;
+  if (error) return <Alert severity="error">{error.message}</Alert>;
+  if (value && value.repositories) return <DenseTable viewer={value} />;
+
+  return (
+    <Table
+      title="List Of User's Repositories"
+      options={{ search: false, paging: false }}
+      columns={[]}
+      data={[]}
+    />
+  );
+};
+
+export default ExampleFetchComponent;
+```