ChannelPopover: unify forms

Fixes urbit/landscape#534

pkg/interface/src/views/components/FormGroup.tsx

@@ -71,8 +71,8 @@ export function FormGroup(props: PropFunc<typeof Box>) {
     setSubmits((ss) => ({ ...ss, [id]: s }));
   }, []);
 
-  const submitAll = useCallback(() => {
-    return Promise.all(
+  const submitAll = useCallback(async () => {
+    await Promise.all(
       _.map(
         _.pickBy(submits, (_v, k) => dirty[k]),
         (f) => f()
@@ -125,7 +125,7 @@ export function FormGroup(props: PropFunc<typeof Box>) {
             disabled={hasErrors}
             primary
           >
-            Update
+            Save Changes
           </StatelessAsyncButton>
         </Row>
       )}

pkg/interface/src/views/landscape/components/ChannelPopoverRoutes/ChannelPermissions.tsx

@@ -15,6 +15,7 @@ import GlobalApi from '~/logic/api/global';
 import { resourceFromPath } from '~/logic/lib/group';
 import { FormSubmit } from '~/views/components/FormSubmit';
 import { ChannelWritePerms } from '../ChannelWritePerms';
+import {FormGroupChild} from '~/views/components/FormGroup';
 
 function PermissionsSummary(props: {
   writersSize: number;
@@ -158,7 +159,8 @@ export function GraphPermissions(props: GraphPermissionsProps) {
       onSubmit={onSubmit}
     >
       <Form style={{ display: 'contents' }}>
-        <Col mt="4" flexShrink={0} gapY="5">
+        <FormGroupChild id="permissions" />
+        <Col mx="4" mt="4" flexShrink={0} gapY="5">
           <Col gapY="1" mt="0">
             <Text id="permissions" fontWeight="bold" fontSize="2">
               Permissions
@@ -183,7 +185,6 @@ export function GraphPermissions(props: GraphPermissionsProps) {
               caption="If enabled, all members of the group can comment on this channel"
             />
           )}
-          <FormSubmit>Update Permissions</FormSubmit>
         </Col>
       </Form>
     </Formik>

pkg/interface/src/views/landscape/components/ChannelPopoverRoutes/Details.tsx

@@ -1,19 +1,20 @@
-import React from 'react';
-import { Formik, Form } from 'formik';
+import React from "react";
+import { Formik, Form } from "formik";
 
 import {
   ManagedTextInputField as Input,
   Col,
   Label,
-  Text
-} from '@tlon/indigo-react';
-import { Association } from '@urbit/api';
+  Text,
+} from "@tlon/indigo-react";
+import { Association } from "@urbit/api";
 
-import { FormError } from '~/views/components/FormError';
-import { ColorInput } from '~/views/components/ColorInput';
-import { uxToHex } from '~/logic/lib/util';
-import GlobalApi from '~/logic/api/global';
-import { FormSubmit } from '~/views/components/FormSubmit';
+import { FormError } from "~/views/components/FormError";
+import { ColorInput } from "~/views/components/ColorInput";
+import { uxToHex } from "~/logic/lib/util";
+import GlobalApi from "~/logic/api/global";
+import { FormSubmit } from "~/views/components/FormSubmit";
+import { FormGroupChild } from "~/views/components/FormGroup";
 
 interface FormSchema {
   title: string;
@@ -30,9 +31,9 @@ export function ChannelDetails(props: ChannelDetailsProps) {
   const { association, api } = props;
   const { metadata } = association;
   const initialValues: FormSchema = {
-    title: metadata?.title || '',
-    description: metadata?.description || '',
-    color: metadata?.color || '0x0'
+    title: metadata?.title || "",
+    description: metadata?.description || "",
+    color: metadata?.color || "0x0",
   };
 
   const onSubmit = async (values: FormSchema, actions) => {
@@ -44,8 +45,9 @@ export function ChannelDetails(props: ChannelDetailsProps) {
 
   return (
     <Formik initialValues={initialValues} onSubmit={onSubmit}>
-      <Form style={{ display: 'contents' }}>
-        <Col mb="4" flexShrink={0} gapY="4">
+      <Form style={{ display: "contents" }}>
+        <FormGroupChild id="details" />
+        <Col mx="4" mb="4" flexShrink={0} gapY="4">
           <Col mb={3}>
             <Text id="details" fontSize="2" fontWeight="bold">
               Channel Details
@@ -69,9 +71,6 @@ export function ChannelDetails(props: ChannelDetailsProps) {
             label="Color"
             caption="Change the color of this channel"
           />
-          <FormSubmit>
-            Update Details
-          </FormSubmit>
           <FormError message="Failed to update settings" />
         </Col>
       </Form>

pkg/interface/src/views/landscape/components/ChannelPopoverRoutes/Notifications.tsx

@@ -28,7 +28,7 @@ export function ChannelNotifications(props: ChannelNotificationsProps) {
   const anchorRef = useRef<HTMLElement | null>(null);
 
   return (
-    <Col mb="6" gapY="4" flexShrink={0}>
+    <Col mx="4" mb="6" gapY="4" flexShrink={0}>
       <Text ref={anchorRef} id="notifications" fontSize="2" fontWeight="bold">
         Channel Notifications
       </Text>

pkg/interface/src/views/landscape/components/ChannelPopoverRoutes/Sidebar.tsx

@@ -13,7 +13,7 @@ export function ChannelPopoverRoutesSidebar(props: {
 
   return (
     <Col
-      display={['none', 'flex-column']}
+      display={['none', 'flex']}
       minWidth="200px"
       borderRight="1"
       borderRightColor="washedGray"

pkg/interface/src/views/landscape/components/ChannelPopoverRoutes/index.tsx

@@ -19,6 +19,7 @@ import { useHistory, Link } from 'react-router-dom';
 import { ChannelNotifications } from './Notifications';
 import { StatelessAsyncButton } from '~/views/components/StatelessAsyncButton';
 import { isChannelAdmin, isHost } from '~/logic/lib/group';
+import {FormGroup} from '~/views/components/FormGroup';
 
 interface ChannelPopoverRoutesProps {
   baseUrl: string;
@@ -83,10 +84,10 @@ export function ChannelPopoverRoutes(props: ChannelPopoverRoutesProps) {
           isOwner={isOwner}
           baseUrl={props.baseUrl}
         />
-        <Col height="100%" overflowY="auto" p="5" flexGrow={1}>
+        <FormGroup height="100%" overflowY="auto" pt="5" flexGrow={1}>
           <ChannelNotifications {...props} />
           {!isOwner && (
-            <Col mb="6" flexShrink={0}>
+            <Col mx="4" mb="6" flexShrink={0}>
               <Text id="unsubscribe" fontSize="2" fontWeight="bold">
                 Unsubscribe from Channel
               </Text>
@@ -107,7 +108,7 @@ export function ChannelPopoverRoutes(props: ChannelPopoverRoutesProps) {
               <ChannelDetails {...props} />
               <GraphPermissions {...props} />
               { isOwner ? (
-              <Col mt="5" mb="6" flexShrink={0}>
+              <Col mx="4" mt="5" mb="6" flexShrink={0}>
                 <Text id="archive" fontSize="2" fontWeight="bold">
                   Archive channel
                 </Text>
@@ -143,7 +144,7 @@ export function ChannelPopoverRoutes(props: ChannelPopoverRoutesProps) {
               )}
             </>
           )}
-        </Col>
+      </FormGroup>
       </Row>
     </ModalOverlay>
   );