Add overview page to show service description in DocService (#4537)

Motivation:

Currently no page shows service description / documentation info.

Modifications:

- Update tooltip on service name to include service description.
- Add an `overview` page to the top level `services` dropdown too see all services and their descriptions in a single page.

Result:

- Closes #4480 

<img width="453" alt="Screenshot 2022-11-15 at 01 23 50" src="https://user-images.githubusercontent.com/7023385/201781360-16919731-4d8f-4cdc-89f3-256f451a2469.png">
<img width="1258" alt="Screenshot 2022-11-15 at 01 22 17" src="https://user-images.githubusercontent.com/7023385/201781368-9fed4b4e-9c3b-4f19-925f-6cd9d45f44f8.png">
<img width="611" alt="Screenshot 2022-11-15 at 01 01 21" src="https://user-images.githubusercontent.com/7023385/201781372-7a2edb48-febe-48dc-ad51-84e9f84a49f7.png">


<!--
Visit this URL to learn more about how to write a pull request description:
https://armeria.dev/community/developer-guide#how-to-write-pull-request-description
-->

docs-client/src/containers/App/index.tsx

@@ -40,6 +40,7 @@ import EnumPage from '../EnumPage';
 import HomePage from '../HomePage';
 import MethodPage from '../MethodPage';
 import StructPage from '../StructPage';
+import OverviewPage from '../OverviewPage';
 
 import {
   packageName,
@@ -183,11 +184,18 @@ const AppDrawer: React.FunctionComponent<AppDrawerProps> = ({
         <>
           <ListItem button onClick={toggleServicesOpen}>
             <ListItemText disableTypography>
-              <Typography variant="h5">Services</Typography>
+              <Typography variant="h5">Services </Typography>
             </ListItemText>
             {servicesSectionOpen ? <ExpandLess /> : <ExpandMore />}
           </ListItem>
           <Collapse in={servicesSectionOpen} timeout="auto">
+            <ListItem button onClick={() => navigateTo('/overview')}>
+              <ListItemText>
+                <Typography variant="subtitle1">
+                  <code> Overview </code>
+                </Typography>
+              </ListItemText>
+            </ListItem>
             {specification.getServices().map((service) => (
               <div key={service.name}>
                 <ListItem
@@ -197,7 +205,15 @@ const AppDrawer: React.FunctionComponent<AppDrawerProps> = ({
                   {specification.hasUniqueServiceNames() ? (
                     <ListItemText>
                       <Typography display="inline" variant="subtitle1">
-                        <Tooltip title={service.name} placement="top">
+                        <Tooltip
+                          title={
+                            <>
+                              <code>{service.name}</code> <br />
+                              <code>{service.descriptionInfo?.docString}</code>
+                            </>
+                          }
+                          placement="top"
+                        >
                           <code>{simpleName(service.name)}</code>
                         </Tooltip>
                       </Typography>
@@ -383,6 +399,10 @@ const RouterServices: React.FunctionComponent<RouterServicesProps> = ({
         path="/"
         render={(p) => <HomePage {...p} versions={versions} />}
       />
+      <Route
+        path="/overview"
+        render={(p) => <OverviewPage {...p} specification={specification} />}
+      />
       <Route
         path="/enums/:name"
         render={(p) => <EnumPage {...p} specification={specification} />}

docs-client/src/containers/OverviewPage/index.tsx

@@ -0,0 +1,81 @@
+/*
+ * Copyright 2022 LINE Corporation
+ *
+ * LINE Corporation licenses this file to you under the Apache License,
+ * version 2.0 (the "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at:
+ *
+ *   https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ */
+
+import Table from '@material-ui/core/Table';
+import TableBody from '@material-ui/core/TableBody';
+import TableCell from '@material-ui/core/TableCell';
+import TableHead from '@material-ui/core/TableHead';
+import TableRow from '@material-ui/core/TableRow';
+import Typography from '@material-ui/core/Typography';
+import TableContainer from '@material-ui/core/TableContainer';
+import React from 'react';
+import { RouteComponentProps } from 'react-router-dom';
+
+import { Specification } from '../../lib/specification';
+
+import Section from '../../components/Section';
+
+interface OwnProps {
+  specification: Specification;
+}
+
+type Props = OwnProps & RouteComponentProps;
+
+const OverviewPage: React.FunctionComponent<Props> = ({ specification }) => {
+  const data = specification.getServices();
+  if (!data) {
+    return <>Not found.</>;
+  }
+
+  return (
+    <>
+      <Typography variant="h5">
+        <code>Overview</code>
+      </Typography>
+      <Section>
+        <Typography variant="h6">Services</Typography>
+        <TableContainer>
+          <Table>
+            <TableHead>
+              <TableRow>
+                <TableCell>Name</TableCell>
+                <TableCell>Description</TableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {data.length > 0 ? (
+                data.map((service) => (
+                  <TableRow key={service.name}>
+                    <TableCell>
+                      <code>{service.name}</code>
+                    </TableCell>
+                    <TableCell>{service.descriptionInfo?.docString}</TableCell>
+                  </TableRow>
+                ))
+              ) : (
+                <TableRow>
+                  <TableCell colSpan={2}>There are no services.</TableCell>
+                </TableRow>
+              )}
+            </TableBody>
+          </Table>
+        </TableContainer>
+      </Section>
+    </>
+  );
+};
+
+export default React.memo(OverviewPage);