[v12] Connect: Allow config customization

docs/pages/connect-your-client/teleport-connect.mdx

@@ -158,27 +158,74 @@ installation directory to the `Path` user environment variable.
 </TabItem>
 </Tabs>
 
+## Configuration
+
+Teleport Connect can be configured by editing the `app_config.json` file, which it creates on first launch.
+To open it, click the More Options icon `⋮` -> Open Config File.
+The file will open in your default editor.
+
+<Admonition
+  type="note"
+  title="Note"
+>
+  Any changes to the config file will take effect at the next launch.
+</Admonition>
+
+Below is the list of the supported config properties.
+
+
+| Property                      | Default                                                                                                              | Description                                                            |
+|-------------------------------|----------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------|
+| `usageReporting.enabled`      | `false`                                                                                                              | Enables collecting anonymous usage data (see [Telemetry](#telemetry)). |
+| `keymap.tab1` - `keymap.tab9` | `Command+1` - `Command+9` on macOS <br/> `Ctrl+1` - `Ctrl+9` on Windows<br/>`Alt+1` - `Alt+9` on Linux               | Shortcut to open tab 1–9.                                              |
+| `keymap.closeTab`             | `Command+W` on macOS<br/>`Ctrl+W` on Windows/Linux                                                                   | Shortcut to close a tab.                                               |
+| `keymap.newTab`               | `Command+T` on macOS<br/>`Ctrl+T` on Windows/Linux                                                                   | Shortcut to open a new tab.                                            |
+| `keymap.previousTab`          | `Shift+Command+Tab` on macOS<br/>`Ctrl+Shift+Tab` on Windows/Linux                                                   | Shortcut to go to the previous tab.                                    |
+| `keymap.nextTab`              | `Command+Tab` on macOS<br/>`Ctrl+Tab` on Windows/Linux                                                               | Shortcut to go to the next tab.                                        |
+| `keymap.openConnections`      | `Command+P` on macOS<br/>`Ctrl+P` on Windows/Linux                                                                   | Shortcut to open the connection list.                                  |
+| `keymap.openClusters`         | `Command+E` on macOS<br/>`Ctrl+E` on Windows/Linux                                                                   | Shortcut to open the cluster selector.                                 |
+| `keymap.openProfiles`         | `Command+I` on macOS<br/>`Ctrl+I` on Windows/Linux                                                                   | Shortcut to open the profile selector.                                 |
+| `keymap.openCommandBar`       | `Command+K` on macOS<br/>`Ctrl+K` on Windows/Linux                                                                   | Shortcut to open the command bar.                                      |
+| `terminal.fontFamily`         | `Menlo, Monaco, monospace` on macOS<br/>`Consolas, monospace` on Windows<br/>`'Droid Sans Mono', monospace` on Linux | Font family for the terminal.                                          |
+| `terminal.fontSize`           | 15                                                                                                                   | Font size for the terminal.                                            |
+
+<Admonition
+  type="note"
+  title="Note"
+>
+  The additional `$schema` property present in the config file allows text editors to provide autocompletion.
+  It should not be modified.
+</Admonition>
+
+### Configuring keyboard shortcuts
+
+A valid shortcut contains at least one modifier and a single key code, for example `Shift+Tab`.
+Function keys such as `F1` do not require a modifier.
+Modifiers and a key code must be combined by the `+` character.
+
+Available modifiers:
+
+- `Control`, `Option`, `Shift`, `Command` on macOS.
+- `Ctrl`, `Alt`, `Shift` on Windows and Linux.
+
+Available key codes:
+- `0` to `9`
+- `A` to `Z`
+- `F1` to `F24`
+- `,`, `.`, `/`, `\`, `` ` ``, `-`, `=`, `;`, `'`, `[`, `]`
+- `Space`, `Tab`, `CapsLock`, `NumLock`, `ScrollLock`, `Backspace`, `Delete`, `Insert`, `Enter`, `Up`, `Down`, `Left`, `Right`, `Home`, `End`, `PageUp`, `PageDown`, `Escape`, `IntlBackslash`
+
+
 ## Telemetry
 
 (!docs/pages/includes/teleport-connect-telemetry.mdx!)
 
 ### Disabling telemetry
 
-If you initially agreed to share telemetry data, but now want to opt out, you need to update the `app_config.json` file:
+If you initially agreed to share telemetry data, but now want to opt out, you need to set `usageReporting.enabled` in the config to `false` (see [Configuration](#configuration)):
 ```json
 "usageReporting.enabled": false
 ```
-<Tabs>
-<TabItem label="macOS">
-The Teleport Connect configuration file is located at `~/Library/Application Support/Teleport Connect/app_config.json`.
-</TabItem>
-<TabItem label="Linux">
-The Teleport Connect configuration file is located at `~/.config/Teleport Connect/app_config.json`.
-</TabItem>
-<TabItem label="Windows">
-The Teleport Connect configuration file is located at `C:\Users\%UserName%\AppData\Roaming\Teleport Connect\app_config.json`.
-</TabItem>
-</Tabs>
 
 The changes will take effect at the next launch.
 

web/packages/shared/components/Notification/Notification.story.tsx

@@ -26,7 +26,13 @@ export default {
 
 export const Notifications = () => {
   return (
-    <Flex gap={8}>
+    <div
+      css={`
+        display: grid;
+        grid-gap: ${props => props.theme.space[8]}px;
+        grid-template-columns: auto auto auto;
+      `}
+    >
       <Flex flexDirection="column" gap={4}>
         <Notification
           item={{
@@ -149,7 +155,109 @@ export const Notifications = () => {
           isAutoRemovable={false}
         />
       </Flex>
-    </Flex>
+
+      <Flex flexDirection="column" gap={4}>
+        <Notification
+          item={{
+            id: crypto.randomUUID(),
+            severity: 'info',
+            content: {
+              title: 'Info with link',
+              description: loremIpsum,
+              link: {
+                href: 'https://goteleport.com',
+                text: 'goteleport.com',
+              },
+            },
+          }}
+          Icon={Info}
+          getColor={theme => theme.colors.info}
+          onRemove={() => {}}
+          isAutoRemovable={false}
+        />
+        <Notification
+          item={{
+            id: crypto.randomUUID(),
+            severity: 'warn',
+            content: {
+              title: 'Warning with link',
+              description: loremIpsum,
+              link: {
+                href: 'https://goteleport.com',
+                text: 'goteleport.com',
+              },
+            },
+          }}
+          Icon={Warning}
+          getColor={theme => theme.colors.warning}
+          onRemove={() => {}}
+          isAutoRemovable={false}
+        />
+        <Notification
+          item={{
+            id: crypto.randomUUID(),
+            severity: 'error',
+            content: {
+              title: 'Error with link',
+              description: loremIpsum,
+              link: {
+                href: 'https://goteleport.com',
+                text: 'goteleport.com',
+              },
+            },
+          }}
+          Icon={Warning}
+          getColor={theme => theme.colors.danger}
+          onRemove={() => {}}
+          isAutoRemovable={false}
+        />
+      </Flex>
+
+      <Flex flexDirection="column" gap={4}>
+        <Notification
+          item={{
+            id: crypto.randomUUID(),
+            severity: 'info',
+            content: {
+              title: 'Info with list',
+              list: [loremIpsum, loremIpsum],
+            },
+          }}
+          Icon={Info}
+          getColor={theme => theme.colors.info}
+          onRemove={() => {}}
+          isAutoRemovable={false}
+        />
+        <Notification
+          item={{
+            id: crypto.randomUUID(),
+            severity: 'warn',
+            content: {
+              title: 'Warning with list',
+              list: [loremIpsum, loremIpsum],
+            },
+          }}
+          Icon={Warning}
+          getColor={theme => theme.colors.warning}
+          onRemove={() => {}}
+          isAutoRemovable={false}
+        />
+        <Notification
+          item={{
+            id: crypto.randomUUID(),
+            severity: 'error',
+            content: {
+              title: 'Error with list',
+              list: [loremIpsum, loremIpsum],
+            },
+          }}
+          Icon={Warning}
+          getColor={theme => theme.colors.danger}
+          onRemove={() => {}}
+          isAutoRemovable={false}
+        />
+      </Flex>
+    </div>
   );
 };
 

web/packages/shared/components/Notification/Notification.tsx

@@ -16,16 +16,20 @@ limitations under the License.
 
 import React, { useEffect, useRef, useState } from 'react';
 import styled, { css, useTheme } from 'styled-components';
-import { ButtonIcon, Flex, Text } from 'design';
+import { ButtonIcon, Flex, Link, Text } from 'design';
 import { Close } from 'design/Icon';
 
 import type { NotificationItem, NotificationItemContent } from './types';
 
 interface NotificationProps {
   item: NotificationItem;
+
   onRemove(): void;
+
   Icon: React.ElementType;
+
   getColor(theme): string;
+
   isAutoRemovable: boolean;
   autoRemoveDurationMs?: number;
   // Workaround until `styled` gets types.
@@ -171,13 +175,46 @@ function getRenderedContent(
           color="text.secondary"
           css={longerTextCss}
         >
+          {content.list && <List items={content.list} />}
           {content.description}
+          {content.link && (
+            <Link
+              css={`
+                display: block;
+              `}
+              href={content.link.href}
+              target="_blank"
+            >
+              {content.link.text}
+            </Link>
+          )}
         </Text>
       </Flex>
     );
   }
 }
 
+function List(props: { items: string[] }) {
+  return (
+    <ul
+      // Ideally we'd align the bullet point to the left without using list-style-position: inside
+      // (because it looks bad when the list item spans multiple lines).
+      //
+      // However, it seems impossible to use padding-inline-start for that because the result looks
+      // different on Retina vs non-Retina screens, the bullet point looks cut off on the latter if
+      // padding-inline-start is set to 1em. So instead we just set it to 2em.
+      css={`
+        margin: 0;
+        padding-inline-start: 2em;
+      `}
+    >
+      {props.items.map((item, index) => (
+        <li key={index}>{item}</li>
+      ))}
+    </ul>
+  );
+}
+
 const textCss = css`
   line-height: 20px;
   overflow-wrap: break-word;

web/packages/shared/components/Notification/types.ts

@@ -20,6 +20,14 @@ export interface NotificationItem {
   id: string;
 }
 
-export type NotificationItemContent =
-  | string
-  | { title: string; description: string };
+export type NotificationItemContent = string | NotificationItemObjectContent;
+
+export type NotificationItemObjectContent = {
+  title: string;
+  list?: string[];
+  description?: string;
+  link?: {
+    href: string;
+    text: string;
+  };
+};

web/packages/teleterm/package.json

@@ -56,7 +56,8 @@
     "winston": "^3.3.3",
     "xterm": "^5.0.0",
     "xterm-addon-fit": "^0.7.0",
-    "zod": "^3.20.0"
+    "zod": "^3.21.2",
+    "zod-to-json-schema": "^3.20.4"
   },
   "productName": "Teleport Connect"
 }