Merge pull request #5476 from urbit/lf/fix-redirect-behaviour

interface: address design nits for group joining

pkg/interface/src/views/apps/launch/App.tsx

@@ -83,7 +83,7 @@ export const LaunchApp = (props: LaunchAppProps): ReactElement | null => {
               <Tiles />
               <ModalButton
                 icon="Plus"
-                bg="washedGray"
+                bg="white"
                 color="black"
                 text="New Group"
                 style={{ gridColumnStart: 1 }}
@@ -91,14 +91,12 @@ export const LaunchApp = (props: LaunchAppProps): ReactElement | null => {
                 <NewGroup />
               </ModalButton>
               <Button
-                backgroundColor="washedGray"
-                color="black"
                 border={0}
                 p={0}
                 borderRadius={2}
                 onClick={() => history.push({ search: "?join-kind=group" })}
               >
-                <Row gapX="2" p={2} height="100%" width="100%" alignItems="center">
+                <Row backgroundColor="white" gapX="2" p={2} height="100%" width="100%" alignItems="center">
                   <Icon icon="BootNode" />
                   <Text fontWeight="medium" whiteSpace="nowrap">Join Group</Text>
                 </Row>

pkg/interface/src/views/apps/launch/components/Groups.tsx

@@ -69,7 +69,7 @@ export default function Groups(props: Parameters<typeof Box>[0]) {
 
   const joining = useGroupState((s) =>
     _.omit(
-      _.pickBy(s.pendingJoin || {}, req => req.app === 'groups'),
+      _.pickBy(s.pendingJoin || {}, req => req.app === 'groups' && req.progress != 'abort'),
       groups.map((g) => g.group)
     )
   );

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

@@ -48,10 +48,10 @@ function JoinForm(props: {
     );
   };
 
-  const onDecline =  () => {
+  const onDecline = () => {
     airlock.poke(decline(desc.kind, invite.uid));
     dismiss();
-  }
+  };
   const isGroups = desc.kind === "groups";
 
   return (
@@ -117,7 +117,7 @@ function JoinLoading(props: {
   const { desc, request, dismiss, modal, finished } = props;
   const history = useHistory();
   useEffect(() => {
-    if (request.progress === "done") {
+    if (desc.kind === "graph" && request.progress === "done") {
       history.push(finished);
     }
   }, [request]);
@@ -205,13 +205,18 @@ export function Join(props: JoinProps) {
     joinRequest && joinLoad.includes(joinRequest.progress as any);
 
   useEffect(() => {
-    if (isDone) {
+    if (isDone && desc.kind == "graph") {
       history.push(finishedPath);
     }
   }, [isDone, desc]);
 
   return isDone ? (
-    <JoinDone modal={modal} desc={desc} />
+    <JoinDone
+      dismiss={dismiss}
+      modal={modal}
+      desc={desc}
+      finished={finishedPath}
+    />
   ) : isLoading ? (
     <JoinLoading
       modal={modal}
@@ -312,21 +317,30 @@ function JoinProgressIndicator(props: { progress: JoinProgress }) {
 export interface JoinDoneProps {
   desc: JoinDesc;
   modal: boolean;
+  finished: string;
+  dismiss: () => void;
 }
 
 export function JoinDone(props: JoinDoneProps) {
-  const { desc, modal } = props;
+  const { desc, modal, finished, dismiss } = props;
   const { preview, error } = usePreview(desc.group);
   const name = desc.kind === "groups" ? "Group" : "Group Chat";
   const title = `Joined ${name} successfully`;
+  const history = useHistory();
+
+  const onView = () => {
+    history.push(finished);
+  };
 
   return (
     <JoinSkeleton title={title} modal={modal} desc={desc}>
       <Col p="4" gapY="4">
         <JoinProgressIndicator progress="done" />
         <Row gapX="2">
-          <Button>Dismiss</Button>
-          <Button primary>View Group</Button>
+          <Button onClick={dismiss}>Dismiss</Button>
+          <Button onClick={onView} primary>
+            View Group
+          </Button>
         </Row>
       </Col>
     </JoinSkeleton>

pkg/interface/src/views/landscape/components/Join/Skeleton.tsx

@@ -17,6 +17,7 @@ import { resourceFromPath } from "~/logic/lib/group";
 
 import useMetadataState, { usePreview } from "~/logic/state/metadata";
 import useInviteState, { useInviteForResource } from "~/logic/state/invite";
+import {useHistory} from "react-router-dom";
 
 const SUMMARY_HEIGHT = "96px";
 
@@ -38,6 +39,10 @@ interface JoinSkeletonProps {
 
 export function JoinSkeleton(props: JoinSkeletonProps) {
   const { title, body, children, onJoin, desc, modal } = props;
+  const history = useHistory();
+  const dismiss = () => {
+    history.push({ search: '' });
+  };
 
   const inner = (
     <Col
@@ -64,7 +69,7 @@ export function JoinSkeleton(props: JoinSkeletonProps) {
     </Col>
   );
   return modal ? (
-    <ModalOverlay dismiss={() => {}}>{inner}</ModalOverlay>
+    <ModalOverlay dismiss={dismiss}>{inner}</ModalOverlay>
   ) : (
     inner
   );

pkg/npm/api/groups/lib.ts

@@ -168,7 +168,7 @@ export const groupBunts = {
   policy: (): GroupPolicy => ({ open: { banned: new Set(), banRanks: new Set() } })
 };
 
-export const joinError = ['no-perms', 'strange'] as const;
+export const joinError = ['no-perms', 'strange', 'abort'] as const;
 export const joinResult = ['done', ...joinError] as const;
 export const joinLoad = ['start', 'added', 'metadata'] as const;
 export const joinProgress = [...joinLoad, ...joinResult] as const;