Merge pull request #4435 from urbit/mp/qa/2021-2-12

landscape: front-end fixes post-1.6

pkg/interface/src/views/apps/chat/css/custom.css

@@ -95,16 +95,8 @@ h2 {
   font-family: "Inter", sans-serif;
 }
 
-.embed-container {
-  width: 100%;
-  height: 14rem;
-}
-
 .embed-container iframe {
-  max-width: 24rem;
-  width: 100%;
-  height: 100%;
-  max-height: 26rem;
+  max-width: 100%;
 }
 
 .mh-16 {

pkg/interface/src/views/apps/profile/components/Profile.tsx

@@ -14,6 +14,7 @@ import {
   Button,
   Text
 } from "@tlon/indigo-react";
+import RichText from '~/views/components/RichText'
 import useLocalState from "~/logic/state/local";
 import { useHistory } from "react-router-dom";
 import {useTutorialModal} from "~/views/components/useTutorialModal";
@@ -65,8 +66,9 @@ export function Profile(props: any) {
         maxWidth="600px"
         width="100%">
         <Row alignItems="center" justifyContent="space-between">
+          <Row>
           {ship === `~${window.ship}` ? (
-            <Row>
+            <>
             <Text
               py='2'
               cursor='pointer'
@@ -80,11 +82,12 @@ export function Profile(props: any) {
                 ship={`~${window.ship}`}
                 contact={contact}
               />
-            </Row>
+              </>
           ) : null}
-          <Text maxWidth='18rem' overflowX='hidden' textOverflow="ellipsis"
+          </Row>
+          <RichText mb='0' py='2' disableRemoteContent maxWidth='18rem' overflowX='hidden' textOverflow="ellipsis"
             whiteSpace="nowrap"
-            overflow="hidden" display="inline-block" verticalAlign="middle">{contact?.status ?? ""}</Text>
+            overflow="hidden" display="inline-block" verticalAlign="middle">{contact?.status ?? ""}</RichText>
         </Row>
         <Row  width="100%" height="300px">
           {cover}

pkg/interface/src/views/components/Invite/index.tsx

@@ -61,7 +61,7 @@ export function InviteItem(props: InviteItemProps) {
 
     if (props.groups?.[resource]?.hidden) {
       const { metadata } = associations.graph[resource];
-      if (name.startsWith("dm--")) {
+      if (metadata?.module === 'chat') {
         history.push(`/~landscape/messages/resource/${metadata.module}${resource}`);
       } else {
         history.push(`/~landscape/home/resource/${metadata.module}${resource}`);
@@ -126,7 +126,7 @@ export function InviteItem(props: InviteItemProps) {
           <Icon display="block" color="blue" icon="Bullet" mr="2" />
           <Text mr="1">You are joining a DM with</Text>
           <Text mr="1" mono>
-            {cite("~hastuc-dibtux")}
+            {cite(`~${invite!.ship}`)}
           </Text>
         </Row>
       </JoinSkeleton>

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

@@ -14,6 +14,7 @@ import {
   ColProps,
   Icon
 } from '@tlon/indigo-react';
+import RichText from './RichText';
 import { withLocalState } from '~/logic/state/local';
 import { ProfileStatus } from './ProfileStatus';
 
@@ -132,7 +133,7 @@ class ProfileOverlay extends PureComponent<ProfileOverlayProps, {}> {
           onClick={() => history.push(`/~profile/~${ship}`)}>
           {img}
         </Box>
-        <Col alignItems="end" justifyContent="flex-end" overflow="hidden">
+        <Col alignItems="end" justifyContent="flex-end" overflow="hidden" minWidth='0'>
           <Row width="100%" >
             <Text
               fontWeight='600'
@@ -152,9 +153,12 @@ class ProfileOverlay extends PureComponent<ProfileOverlayProps, {}> {
               contact={contact}
             />
           ) : (
-            <Text gray>
+              <RichText display='inline-block' width='100%' minWidth='0' textOverflow='ellipsis'
+                overflow='hidden'
+                whiteSpace='pre'
+                lineHeight="tall" disableRemoteContent gray>
               {contact?.status ? contact.status : ''}
-            </Text>
+            </RichText>
           )
           }
         </Col>

pkg/interface/src/views/components/RichText.js

@@ -33,10 +33,10 @@ const RichText = React.memo(({ disableRemoteContent, ...props }) => (
           videoShown: false,
           oembedShown: false
         } : null;
-        if (hasProvider(linkProps.href)) {
+        if (!disableRemoteContent && hasProvider(linkProps.href)) {
           return <RemoteContent className="mw-100" url={linkProps.href} />;
         }
-        
+
         return <BaseAnchor target='_blank' rel='noreferrer noopener' borderBottom='1px solid' remoteContentPolicy={remoteContentPolicy} {...linkProps}>{linkProps.children}</BaseAnchor>;
       },
       linkReference: (linkProps) => {

pkg/interface/src/views/components/StatusBar.js

@@ -107,7 +107,7 @@ const StatusBar = (props) => {
           width="auto"
           alignY="top"
           alignX="right"
-          flexShrink={0}
+          flexShrink={'0'}
           options={
             <Col
               mt='6'

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

@@ -40,7 +40,9 @@ export function GroupsPane(props: GroupsPaneProps) {
   const relativePath = (path: string) => baseUrl + path;
   const groupPath = getGroupFromWorkspace(workspace);
 
-  const groupContacts = (groupPath && contacts[groupPath]) || undefined;
+  const groupContacts = Object.assign({}, ...Array.from(groups?.[groupPath]?.members ?? []).filter(e => contacts[`~${e}`]).map(e => {
+      return {[e]: contacts[`~${e}`]};
+  })) || {};
   const rootIdentity = contacts?.["/~/default"]?.[window.ship];
   const groupAssociation =
     (groupPath && associations.groups[groupPath]) || undefined;

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

@@ -100,7 +100,7 @@ export function NewChannel(props: NewChannelProps & RouteComponentProps) {
         await waiter(p => Boolean(p?.groups?.[`/ship/~${window.ship}/${resId}`]));
       }
       actions.setStatus({ success: null });
-      const resourceUrl = parentPath(location.pathname);
+      const resourceUrl = (location.pathname.includes("/messages")) ? "/~landscape/messages" : parentPath(location.pathname);
       history.push(
         `${resourceUrl}/resource/${moduleType}/ship/~${window.ship}/${resId}`
       );

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

@@ -33,10 +33,12 @@ import { StatelessAsyncAction } from '~/views/components/StatelessAsyncAction';
 import styled from 'styled-components';
 import useLocalState from '~/logic/state/local';
 
-const TruncText = styled(Box)`
+const TruncText = styled(Text)`
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  display: inline-block;
+  min-width: 0;
 `;
 
 type Participant = Contact & { patp: string; pending: boolean };
@@ -57,8 +59,10 @@ function getParticipants(cs: Contacts, group: Group) {
     patp,
     pending: false
   }));
-  const members: Participant[] = _.map(Array.from(group.members), m =>
-    emptyContact(m, false)
+  const members: Participant[] = _.map(
+    Array.from(group.members)
+    .filter(e => group?.policy?.invite?.pending ? !group.policy.invite.pending.has(e) : true), m =>
+      emptyContact(m, false)
   );
   const allMembers = _.unionBy(contacts, members, 'patp');
   const pending: Participant[] =
@@ -305,11 +309,13 @@ function Participant(props: {
   return (
     <>
       <Box>{avatar}</Box>
-      <Col justifyContent="center" gapY="1" height="100%">
+      <Col justifyContent="center" gapY="1" height="100%" minWidth='0'>
         {hasNickname && (
-          <TruncText title={contact.nickname} maxWidth="85%" color="black">
+          <Row minWidth='0' flexShrink='1'>
+          <TruncText title={contact.nickname} color="black">
             {contact.nickname}
           </TruncText>
+          </Row>
         )}
         <Text title={contact.patp} color="gray" fontFamily="mono">
           {cite(contact.patp)}