landscape: show groupify form in channel settings

pkg/interface/src/views/landscape/components/ChannelSettings.tsx

@@ -13,7 +13,8 @@ import GlobalApi from "~/logic/api/global";
 import { uxToHex } from '~/logic/lib/util';
 import { FormError } from "~/views/components/FormError";
 import { ColorInput } from "~/views/components/ColorInput";
-import { Association } from "~/types";
+import { Association, Groups, Associations } from "~/types";
+import GroupifyForm from "./GroupifyForm";
 
 interface FormSchema {
   title: string;
@@ -23,6 +24,8 @@ interface FormSchema {
 
 interface ChannelSettingsProps {
   association: Association;
+  groups: Groups;
+  associations: Associations;
   api: GlobalApi;
 }
 
@@ -66,13 +69,9 @@ export function ChannelSettings(props: ChannelSettingsProps) {
     <Box overflowY="auto" p={4}>
       <Formik initialValues={initialValues} onSubmit={onSubmit}>
         <Form style={{ display: "contents" }}>
-          <Box
-            display="grid"
-            gridTemplateColumns="100%"
+          <Col
             maxWidth="512px"
-            gridAutoRows="auto"
-            width="100%"
-            gridRowGap={4}
+            gapY="4"
           >
             <Col mb={3}>
               <Text fontWeight="bold">Channel Settings</Text>
@@ -99,9 +98,10 @@ export function ChannelSettings(props: ChannelSettingsProps) {
               Save
             </AsyncButton>
             <FormError message="Failed to update settings" />
-          </Box>
+          </Col>
         </Form>
       </Formik>
+      <GroupifyForm {...props} />
     </Box>
   );
 }

pkg/interface/src/views/landscape/components/GroupifyForm.tsx

@@ -20,8 +20,6 @@ interface FormSchema {
 }
 
 interface GroupifyFormProps {
-  host: string;
-  book: string;
   groups: Groups;
   api: GlobalApi;
   associations: Associations;
@@ -34,8 +32,12 @@ export function GroupifyForm(props: GroupifyFormProps) {
     actions: FormikHelpers<FormSchema>
   ) => {
     try {
+      const [, , ship, name] = props.association["app-path"].split("/");
       await props.api.graph.groupifyGraph(
-        `~${window.ship}`, props.book, 'publish', values.group || undefined);
+        ship,
+        name,
+        values.group || undefined
+      );
       actions.setStatus({ success: null });
     } catch (e) {
       console.error(e);
@@ -43,7 +45,7 @@ export function GroupifyForm(props: GroupifyFormProps) {
     }
   };
 
-  const groupPath = props.association?.['group-path'];
+  const groupPath = props.association?.["group-path"];
 
   const isUnmanaged = props.groups?.[groupPath]?.hidden || false;
 
@@ -52,7 +54,7 @@ export function GroupifyForm(props: GroupifyFormProps) {
   }
 
   const initialValues: FormSchema = {
-    group: null
+    group: null,
   };
 
   return (
@@ -62,17 +64,19 @@ export function GroupifyForm(props: GroupifyFormProps) {
       onSubmit={onGroupify}
     >
       <Form style={{ display: "contents" }}>
-        <GroupSearch
-          id="group"
-          label="Group"
-          caption="What group should this notebook be added to? If blank, a new group will be made for the notebook"
-          groups={props.groups}
-          associations={props.associations}
-          adminOnly
-        />
-        <AsyncButton loadingText="Groupifying..." border>
-          Groupify
-        </AsyncButton>
+        <Col mt="4" gapY="4" maxWidth="512px">
+          <GroupSearch
+            id="group"
+            label="Group"
+            caption="What group should this channel be added to? If blank, a new group will be made for the channel"
+            groups={props.groups}
+            associations={props.associations}
+            adminOnly
+          />
+          <AsyncButton loadingText="Groupifying..." border>
+            Groupify
+          </AsyncButton>
+        </Col>
       </Form>
     </Formik>
   );

pkg/interface/src/views/landscape/components/Resource.tsx

@@ -44,7 +44,12 @@ export function Resource(props: ResourceProps) {
               baseUrl={props.baseUrl}
               {...skelProps}
             >
-              <ChannelSettings api={api} association={association} />
+              <ChannelSettings 
+                groups={props.groups}
+                associations={props.associations}
+                api={api}
+                association={association} 
+              />
             </ResourceSkeleton>
           );
         }}