[CORL-687] Webhooks (#2738)

* feat: initial webhook impl

* feat: added support for key rotation

* feat: harmonized fetcher

* feat: added expired secrets cleaning

* feat: event system refactor

* feat: added story event

* feat: simplfiied webhook handler

* feat: added ref's to locations where user events can be added

* feat: added UI to support webhooks

* fix: renaming some Webhook -> WebhookEndpoint

* fix: review comments to adjuist flow

* feat: added localizations

* fix: linting, updated snapshots

* fix: adapted for new fluent

* fix: rearranged folders

* fix: linting

* feat: added webhooks documentation

* feat: improved toc generation

* feat: added some tests to webhooks

* fix: chain transition hooks

* feat: added tests around webhook ui

* fix: renamed events

* fix: adjusted circle markdown linting

* fix: adjusted doctoc script call

* review: review fixes

* review: review comments

* review: adjusted signing secret confirmation

* review: adjusted styles to harmonize button usage

* fix: updated snapshots and tests

* review: move form out of webhooks

Moved the form out of the webhooks by relocating the layout used for the
route associated with the configure routes.

* fix: fixed bugs and snapshots with tests

* feat: revised slack message format to use block api

* fix: fixed a small text bug

Co-authored-by: Vinh <vinh@vinh.tech>
Co-authored-by: Kim Gardner <kgardnr@gmail.com>

src/core/client/ui/components/v2/ListGroup/ListGroup.css

@@ -0,0 +1,5 @@
+.root {
+  border: 1px solid var(--v2-colors-grey-300);
+  border-radius: var(--round-corners);
+  overflow-y: auto;
+}

src/core/client/ui/components/v2/ListGroup/ListGroup.tsx

@@ -0,0 +1,20 @@
+import cn from "classnames";
+import React, { FunctionComponent } from "react";
+
+import { Flex } from "coral-ui/components/v2";
+
+import styles from "./ListGroup.css";
+
+interface Props {
+  className?: string;
+}
+
+const ListGroup: FunctionComponent<Props> = ({ className, children }) => {
+  return (
+    <Flex direction="column" className={cn(styles.root, className)}>
+      {children}
+    </Flex>
+  );
+};
+
+export default ListGroup;

src/core/client/ui/components/v2/ListGroup/ListGroupRow.css

@@ -0,0 +1,8 @@
+.root {
+  border-bottom: 1px solid var(--v2-colors-grey-200);
+  padding: var(--v2-spacing-2);
+
+  &:last-child {
+    border-bottom: none;
+  }
+}

src/core/client/ui/components/v2/ListGroup/ListGroupRow.tsx

@@ -0,0 +1,14 @@
+import cn from "classnames";
+import React, { FunctionComponent } from "react";
+
+import styles from "./ListGroupRow.css";
+
+interface Props {
+  className?: string;
+}
+
+const ListGroupRow: FunctionComponent<Props> = ({ className, children }) => {
+  return <div className={cn(styles.root, className)}>{children}</div>;
+};
+
+export default ListGroupRow;

src/core/client/ui/components/v2/ListGroup/index.ts

@@ -0,0 +1,2 @@
+export { default as ListGroup } from "./ListGroup";
+export { default as ListGroupRow } from "./ListGroupRow";

src/core/client/ui/components/v2/index.ts

@@ -36,6 +36,7 @@ export { default as HelperText } from "./HelperText";
 export { default as HorizontalGutter } from "./HorizontalGutter";
 export { default as Icon } from "./Icon";
 export { default as Label } from "./Label";
+export { ListGroup, ListGroupRow } from "./ListGroup";
 export { Marker, Count as MarkerCount } from "./Marker";
 export { default as Message, MessageIcon } from "./Message";
 export { default as Modal, ModalProps } from "./Modal";