[CORL 547] org-wide announcements (#2813)

* CRUD announcements

* only show announcement if not disabled

* make announcements dismissable

* add announcement mutations

* update announcement form logic

* style announcements on stream

* update snap

* localize strings

* close form if announcement is removed

* move announcement config below sitewide commenting config

* move date calculation inside useMemo

* move announcementconfig code to announcementconfigcontainer

* use coralContext for localStorage

* fix type of announcement createdAt

* move announcement form to modal

* remove payload pruning from configure route

* simplify announcement display logic

* make validation message full width

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

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

@@ -32,6 +32,7 @@ const DURATION_UNIT_MAP = {
 
 interface Props extends Pick<TextFieldProps, "color" | "name" | "disabled"> {
   value: string;
+  defaultValue?: string;
   onChange: (v: string) => void;
   /** Specifiy units to include */
   units?: ReadonlyArray<TIME>;
@@ -79,10 +80,14 @@ const DurationField: FunctionComponent<Props> = ({
   value,
   units = [TIME.HOUR, TIME.DAY, TIME.WEEK],
   onChange,
+  defaultValue = "",
   disabled,
   name,
   color,
 }) => {
+  if (value.length < 1) {
+    value = defaultValue;
+  }
   const [selectedUnit, setSelectedUnit] = useState(
     convertFromSeconds(value, units).unit
   );

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

@@ -0,0 +1,7 @@
+.root {
+  color: var(--v2-colors-mono-100);
+  font-size: var(--v2-font-size-2);
+  line-height: var(--v2-line-height-reset);
+  font-weight: var(--v2-font-weight-primary-regular);
+  font-family: var(--v2-font-family-primary);
+}

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

@@ -0,0 +1,32 @@
+import cn from "classnames";
+import React, { FunctionComponent, ReactNode } from "react";
+
+import { withStyles } from "coral-ui/hocs";
+import { Omit, PropTypesOf } from "coral-ui/types";
+
+import HorizontalGutter from "coral-ui/components/HorizontalGutter";
+
+import styles from "./FormFieldFooter.css";
+
+interface Props extends Omit<PropTypesOf<typeof HorizontalGutter>, "ref"> {
+  children: ReactNode;
+  classes: typeof styles;
+  className?: string;
+}
+
+const FormFieldFooter: FunctionComponent<Props> = props => {
+  const { classes, className, children, ...rest } = props;
+
+  return (
+    <HorizontalGutter
+      className={cn(classes.root, className)}
+      spacing={1}
+      {...rest}
+    >
+      {children}
+    </HorizontalGutter>
+  );
+};
+
+const enhanced = withStyles(styles)(FormFieldFooter);
+export default enhanced;

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

@@ -0,0 +1 @@
+export { default } from "./FormFieldFooter";

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

@@ -31,6 +31,7 @@ export { default as Flex } from "./Flex";
 export { default as FormField } from "./FormField";
 export { default as FormFieldDescription } from "./FormFieldDescription";
 export { default as FormFieldHeader } from "./FormFieldHeader";
+export { default as FormFieldFooter } from "./FormFieldFooter";
 export { default as HelperText } from "./HelperText";
 export { default as HorizontalGutter } from "./HorizontalGutter";
 export { default as Icon } from "./Icon";