From 11e162dbd47e8a167d5766f93ba4a206a6975dc0 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Fri, 30 Aug 2024 11:06:14 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=B8(frontend)=20avoid=20blocking=20use?=
 =?UTF-8?q?r=20with=20invitation=20dialog?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Removed annoying overlay that blocked the user. (feedback from @spaccoud)

Previous design required one click too many. As this dialog doesn't need
an overlay, I couldn't use the default primitive.

It's a hacky but functional, creating technical debt here.

Closer to the Gmeet design. Added a warning about permissions
since the rooms are public in beta.

Apologies @manuhabitela, this may impact accessibility for  users unfamiliar
with the copy icon. Let's conduct user testing.
---
 .../rooms/components/InviteDialog.tsx         | 143 ++++++++++++------
 src/frontend/src/locales/de/rooms.json        |   4 +-
 src/frontend/src/locales/en/rooms.json        |   8 +-
 src/frontend/src/locales/fr/rooms.json        |   6 +-
 4 files changed, 109 insertions(+), 52 deletions(-)

diff --git a/src/frontend/src/features/rooms/components/InviteDialog.tsx b/src/frontend/src/features/rooms/components/InviteDialog.tsx
index a4a6c708..c796fa9c 100644
--- a/src/frontend/src/features/rooms/components/InviteDialog.tsx
+++ b/src/frontend/src/features/rooms/components/InviteDialog.tsx
@@ -1,8 +1,31 @@
-import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { getRouteUrl } from '@/navigation/getRouteUrl'
-import { Div, Button, Dialog, Input, type DialogProps } from '@/primitives'
-import { HStack } from '@/styled-system/jsx'
+import { Div, Button, type DialogProps, P } from '@/primitives'
+import { HStack, styled, VStack } from '@/styled-system/jsx'
+import { Heading, Dialog } from 'react-aria-components'
+import { Text, text } from '@/primitives/Text'
+import { RiCloseLine, RiFileCopyLine, RiSpam2Fill } from '@remixicon/react'
+
+// fixme - extract in a proper primitive this dialog without overlay
+const StyledRACDialog = styled(Dialog, {
+  base: {
+    position: 'fixed',
+    left: 30,
+    bottom: 90,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 1000,
+    width: '24.5rem',
+    borderRadius: '8px',
+    padding: '1.5rem',
+    boxShadow:
+      '0 1px 2px 0 rgba(60, 64, 67, .3), 0 2px 6px 2px rgba(60, 64, 67, .15)',
+    backgroundColor: 'white',
+    '&[data-entering]': { animation: 'fade 200ms' },
+    '&[data-exiting]': { animation: 'fade 150ms reverse ease-in' },
+  },
+})
 
 export const InviteDialog = ({
   roomId,
@@ -11,48 +34,82 @@ export const InviteDialog = ({
   const { t } = useTranslation('rooms')
   const roomUrl = getRouteUrl('room', roomId)
 
-  const copyLabel = t('shareDialog.copy')
-  const copiedLabel = t('shareDialog.copied')
-  const [copyLinkLabel, setCopyLinkLabel] = useState(copyLabel)
-  useEffect(() => {
-    if (copyLinkLabel == copiedLabel) {
-      const timeout = setTimeout(() => {
-        setCopyLinkLabel(copyLabel)
-      }, 5000)
-      return () => {
-        clearTimeout(timeout)
-      }
-    }
-  }, [copyLinkLabel, copyLabel, copiedLabel])
-
   return (
-    <Dialog {...dialogProps} title={t('shareDialog.heading')}>
-      <HStack alignItems="stretch" gap="gutter">
-        <Div flex="1">
-          <Input
-            type="text"
-            aria-label={t('shareDialog.inputLabel')}
-            value={roomUrl}
-            readOnly
-            onClick={(e) => {
-              e.currentTarget.select()
-            }}
-          />
-        </Div>
-        <Div minWidth="8rem">
-          <Button
-            variant="primary"
-            size="sm"
-            fullWidth
-            onPress={() => {
-              navigator.clipboard.writeText(roomUrl)
-              setCopyLinkLabel(copiedLabel)
+    <StyledRACDialog {...dialogProps}>
+      {({ close }) => (
+        <VStack
+          alignItems={'left'}
+          justify="start"
+          gap={0}
+          style={{
+            maxWidth: '100%',
+            overflow: 'hidden',
+          }}
+        >
+          <Heading slot="title" level={3} className={text({ variant: 'h2' })}>
+            {t('shareDialog.heading')}
+          </Heading>
+          <Div position="absolute" top="5" right="5">
+            <Button
+              invisible
+              size="xs"
+              onPress={() => {
+                dialogProps.onClose?.()
+                close()
+              }}
+              aria-label={t('closeDialog')}
+            >
+              <RiCloseLine />
+            </Button>
+          </Div>
+          <P>{t('shareDialog.description')}</P>
+          <HStack
+            justify={'space-between'}
+            alignItems="center"
+            style={{
+              backgroundColor: '#f1f3f4',
+              borderRadius: '4px',
+              maxWidth: '100%',
             }}
+            gap={0}
           >
-            {copyLinkLabel}
-          </Button>
-        </Div>
-      </HStack>
-    </Dialog>
+            <div
+              style={{
+                paddingLeft: '0.75rem',
+                textOverflow: 'ellipsis',
+                overflow: 'hidden',
+                textWrap: 'nowrap',
+                userSelect: 'none',
+              }}
+            >
+              {roomUrl.replace(/^https?:\/\//, '')}
+            </div>
+            <Button
+              square
+              invisible
+              tooltip={t('shareDialog.copy')}
+              onPress={() => navigator.clipboard.writeText(roomUrl)}
+            >
+              <RiFileCopyLine size={24} />
+            </Button>
+          </HStack>
+          <HStack>
+            <div
+              style={{
+                backgroundColor: '#d9e5ff',
+                borderRadius: '50%',
+                padding: '4px',
+                marginTop: '1rem',
+              }}
+            >
+              <RiSpam2Fill size={22} style={{ fill: '#4c84fc' }} />
+            </div>
+            <Text variant="sm" style={{ marginTop: '1rem' }}>
+              {t('shareDialog.permissions')}
+            </Text>
+          </HStack>
+        </VStack>
+      )}
+    </StyledRACDialog>
   )
 }
diff --git a/src/frontend/src/locales/de/rooms.json b/src/frontend/src/locales/de/rooms.json
index 766fc3aa..7e6a3b1b 100644
--- a/src/frontend/src/locales/de/rooms.json
+++ b/src/frontend/src/locales/de/rooms.json
@@ -12,10 +12,10 @@
   },
   "leaveRoomPrompt": "",
   "shareDialog": {
-    "copied": "",
     "copy": "",
     "heading": "",
-    "inputLabel": ""
+    "description": "",
+    "permissions": ""
   },
   "error": {
     "createRoom": {
diff --git a/src/frontend/src/locales/en/rooms.json b/src/frontend/src/locales/en/rooms.json
index d1f32332..42f44adb 100644
--- a/src/frontend/src/locales/en/rooms.json
+++ b/src/frontend/src/locales/en/rooms.json
@@ -12,10 +12,10 @@
   },
   "leaveRoomPrompt": "This will make you leave the meeting.",
   "shareDialog": {
-    "copied": "Copied",
-    "copy": "Copy",
-    "heading": "Share the meeting link",
-    "inputLabel": "Meeting link"
+    "copy": "Copy link",
+    "heading": "Your meeting is ready",
+    "description": "Share this link with people you want to invite to the meeting.",
+    "permissions": "People with this link do not need your permission to join this meeting."
   },
   "error": {
     "createRoom": {
diff --git a/src/frontend/src/locales/fr/rooms.json b/src/frontend/src/locales/fr/rooms.json
index 54e6014d..14a44e67 100644
--- a/src/frontend/src/locales/fr/rooms.json
+++ b/src/frontend/src/locales/fr/rooms.json
@@ -12,10 +12,10 @@
   },
   "leaveRoomPrompt": "Revenir à l'accueil vous fera quitter la réunion.",
   "shareDialog": {
-    "copied": "Lien copié",
     "copy": "Copier le lien",
-    "heading": "Partager le lien vers la réunion",
-    "inputLabel": "Lien vers la réunion"
+    "heading": "Votre réunion est prête",
+    "description": "Partagez ce lien avec les personnes que vous souhaitez inviter à la réunion.",
+    "permissions": "Les personnes disposant de ce lien n'ont pas besoin de votre autorisation pour rejoindre cette réunion."
   },
   "error": {
     "createRoom": {