From 5d26199e5d25501640ecc051774f6385897bf1d1 Mon Sep 17 00:00:00 2001
From: Yassine Bounekhla <56373201+rudream@users.noreply.github.com>
Date: Wed, 26 Apr 2023 16:10:08 -0400
Subject: [PATCH] redesign participant modes join menu (#24961)

---
 .../SessionList/SessionJoinBtn.test.tsx       |   8 +-
 .../Sessions/SessionList/SessionJoinBtn.tsx   | 142 +++++++++++++-----
 .../Sessions.story.test.tsx.snap              |  86 ++++++++++-
 .../teleport/src/Sessions/fixtures/index.ts   |  38 +++++
 4 files changed, 230 insertions(+), 44 deletions(-)

diff --git a/web/packages/teleport/src/Sessions/SessionList/SessionJoinBtn.test.tsx b/web/packages/teleport/src/Sessions/SessionList/SessionJoinBtn.test.tsx
index 13d2e4e4183f2..df7d86724b1f7 100644
--- a/web/packages/teleport/src/Sessions/SessionList/SessionJoinBtn.test.tsx
+++ b/web/packages/teleport/src/Sessions/SessionList/SessionJoinBtn.test.tsx
@@ -35,7 +35,7 @@ test('all participant modes are properly listed and in the correct order', () =>
 
   // Make sure that the join URL is correct.
   const moderatorJoinUrl = screen
-    .queryByText('moderator')
+    .queryByText('As a Moderator')
     .closest('a')
     .getAttribute('href');
 
@@ -46,7 +46,7 @@ test('all participant modes are properly listed and in the correct order', () =>
   // Make sure that the menu items are in the order of observer -> moderator -> peer.
   const menuItems = screen.queryAllByRole<HTMLAnchorElement>('link');
   expect(menuItems).toHaveLength(3);
-  expect(menuItems[0].innerHTML).toBe('observer');
-  expect(menuItems[1].innerHTML).toBe('moderator');
-  expect(menuItems[2].innerHTML).toBe('peer');
+  expect(menuItems[0]).toHaveTextContent('As an Observer');
+  expect(menuItems[1]).toHaveTextContent('As a Moderator');
+  expect(menuItems[2]).toHaveTextContent('As a Peer');
 });
diff --git a/web/packages/teleport/src/Sessions/SessionList/SessionJoinBtn.tsx b/web/packages/teleport/src/Sessions/SessionList/SessionJoinBtn.tsx
index b1a8c35b0cffd..9d687ae3722b3 100644
--- a/web/packages/teleport/src/Sessions/SessionList/SessionJoinBtn.tsx
+++ b/web/packages/teleport/src/Sessions/SessionList/SessionJoinBtn.tsx
@@ -17,7 +17,7 @@ limitations under the License.
 import React, { useState } from 'react';
 
 import { ButtonBorder, Text, Box, Menu, MenuItem } from 'design';
-import { CarrotDown } from 'design/Icon';
+import { CarrotDown, Warning } from 'design/Icon';
 
 import cfg from 'teleport/config';
 import { ParticipantMode } from 'teleport/services/session';
@@ -31,33 +31,32 @@ export const SessionJoinBtn = ({
   clusterId: string;
   participantModes: ParticipantMode[];
 }) => {
-  // Sorts the list of participantModes so that they are consistently shown in the order of "observer" -> "moderator" -> "peer"
-  const modes = {
-    observer: 1,
-    moderator: 2,
-    peer: 3,
-  };
-  const sortedParticipantModes = participantModes.sort(
-    (a, b) => modes[a] - modes[b]
-  );
-
   return (
     <JoinMenu>
-      {sortedParticipantModes.map(participantMode => (
-        <MenuItem
-          key={participantMode}
-          as="a"
-          href={cfg.getSshSessionRoute({ sid, clusterId }, participantMode)}
-          target="_blank"
-          css={`
-            text-transform: capitalize;
-            text-decoration: none;
-            color: ${props => props.theme.colors.text.slightlyMuted};
-          `}
-        >
-          {participantMode}
-        </MenuItem>
-      ))}
+      <JoinMenuItem
+        title="As an Observer"
+        description={modeDescription.observer}
+        url={cfg.getSshSessionRoute({ sid, clusterId }, 'observer')}
+        hasAccess={participantModes.includes('observer')}
+        participantMode="observer"
+        key="observer"
+      />
+      <JoinMenuItem
+        title="As a Moderator"
+        description={modeDescription.moderator}
+        url={cfg.getSshSessionRoute({ sid, clusterId }, 'moderator')}
+        hasAccess={participantModes.includes('moderator')}
+        participantMode="moderator"
+        key="moderator"
+      />
+      <JoinMenuItem
+        title="As a Peer"
+        description={modeDescription.peer}
+        url={cfg.getSshSessionRoute({ sid, clusterId }, 'peer')}
+        hasAccess={participantModes.includes('peer')}
+        participantMode="peer"
+        key="peer"
+      />
     </JoinMenu>
   );
 };
@@ -82,28 +81,95 @@ function JoinMenu({ children }: { children: React.ReactNode }) {
       <Menu
         anchorOrigin={{
           vertical: 'bottom',
-          horizontal: 'center',
+          horizontal: 'right',
         }}
         transformOrigin={{
           vertical: 'top',
-          horizontal: 'center',
+          horizontal: 'right',
         }}
         anchorEl={anchorEl}
         open={Boolean(anchorEl)}
         onClose={handleClose}
       >
-        <Text
-          px="2"
-          fontSize="11px"
-          css={`
-            color: ${props => props.theme.colors.text.main};
-            background: ${props => props.theme.colors.spotBackground[2]};
-          `}
-        >
-          Join as...
-        </Text>
         {children}
       </Menu>
     </Box>
   );
 }
+
+function JoinMenuItem({
+  title,
+  description,
+  hasAccess,
+  participantMode,
+  url,
+}: {
+  title: string;
+  description: string;
+  hasAccess: boolean;
+  participantMode: ParticipantMode;
+  url: string;
+}) {
+  if (hasAccess) {
+    return (
+      <MenuItem
+        as="a"
+        href={url}
+        target="_blank"
+        css={`
+          text-decoration: none;
+          padding: 8px 12px;
+          color: ${({ theme }) => theme.colors.text.main};
+          user-select: none;
+          border-bottom: 1px solid
+            ${({ theme }) => theme.colors.spotBackground[0]};
+        `}
+      >
+        <Box height="fit-content" width="264px">
+          <Text typography="h6">{title}</Text>
+          <Text color="text.slightlyMuted">{description}</Text>
+        </Box>
+      </MenuItem>
+    );
+  }
+  return (
+    <MenuItem
+      css={`
+        text-decoration: none;
+        padding: 8px 12px;
+        color: ${({ theme }) => theme.colors.text.disabled};
+        user-select: none;
+        cursor: auto;
+        border-bottom: 1px solid
+          ${({ theme }) => theme.colors.spotBackground[0]};
+        &:hover {
+          background-color: ${({ theme }) => theme.colors.levels.elevated};
+          color: ${({ theme }) => theme.colors.text.disabled};
+        }
+      `}
+    >
+      <Box height="fit-content" width="264px">
+        <Text typography="h6">{title}</Text>
+        <Text>{description}</Text>
+        <Box color="text.main" px={1} mt={1}>
+          <Text fontSize="10px" color="text.slightlyMuted">
+            <Warning color="error.main" mr={2} />
+            {modeWarningText[participantMode]}
+          </Text>
+        </Box>
+      </Box>
+    </MenuItem>
+  );
+}
+
+const modeDescription = {
+  observer: 'Can view output but cannot send input.',
+  moderator: 'Can view output & terminate the session.',
+  peer: 'Can view output & send input.',
+};
+
+const modeWarningText = {
+  observer: 'You do not have permission to join as an observer.',
+  moderator: 'You do not have permission to join as a moderator.',
+  peer: 'You do not have permission to join as a peer.',
+};
diff --git a/web/packages/teleport/src/Sessions/__snapshots__/Sessions.story.test.tsx.snap b/web/packages/teleport/src/Sessions/__snapshots__/Sessions.story.test.tsx.snap
index 6e6c9772a20d6..1b91ec1c65cb4 100644
--- a/web/packages/teleport/src/Sessions/__snapshots__/Sessions.story.test.tsx.snap
+++ b/web/packages/teleport/src/Sessions/__snapshots__/Sessions.story.test.tsx.snap
@@ -462,12 +462,12 @@ exports[`loaded 1`] = `
             </strong>
              - 
             <strong>
-              5
+              7
             </strong>
              of
              
             <strong>
-              5
+              7
             </strong>
           </div>
         </div>
@@ -610,6 +610,88 @@ exports[`loaded 1`] = `
             </div>
           </td>
         </tr>
+        <tr>
+          <td>
+            <span
+              class="c16 c22 icon icon-terminal c16 c22"
+              font-size="3"
+            />
+          </td>
+          <td>
+            im-a-nodename-2
+          </td>
+          <td>
+            b204924e-6b74-5d92-89ea-d95043a969f1
+          </td>
+          <td>
+            lisa3
+          </td>
+          <td>
+            5 seconds
+          </td>
+          <td
+            align="right"
+            height="26px"
+          >
+            <div
+              class="c23"
+              width="80px"
+            >
+              <button
+                class="c24"
+                kind="border"
+              >
+                Join
+                <span
+                  class="c16 c25 icon icon-caret-down "
+                  color="text.slightlyMuted"
+                  font-size="2"
+                />
+              </button>
+            </div>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <span
+              class="c16 c22 icon icon-terminal c16 c22"
+              font-size="3"
+            />
+          </td>
+          <td>
+            im-a-nodename-3
+          </td>
+          <td>
+            8830cfe5-369e-5485-9c3d-19cc50e6f548
+          </td>
+          <td>
+            lisa2
+          </td>
+          <td>
+            5 seconds
+          </td>
+          <td
+            align="right"
+            height="26px"
+          >
+            <div
+              class="c23"
+              width="80px"
+            >
+              <button
+                class="c24"
+                kind="border"
+              >
+                Join
+                <span
+                  class="c16 c25 icon icon-caret-down "
+                  color="text.slightlyMuted"
+                  font-size="2"
+                />
+              </button>
+            </div>
+          </td>
+        </tr>
         <tr>
           <td>
             <span
diff --git a/web/packages/teleport/src/Sessions/fixtures/index.ts b/web/packages/teleport/src/Sessions/fixtures/index.ts
index 2952abdb98557..b15623bfc4a6c 100644
--- a/web/packages/teleport/src/Sessions/fixtures/index.ts
+++ b/web/packages/teleport/src/Sessions/fixtures/index.ts
@@ -55,6 +55,44 @@ export const sessions: Session[] = [
     participantModes: ['observer', 'moderator'],
     moderated: false,
   },
+  {
+    kind: 'ssh',
+    sid: 'b204924e-6b74-5d92-89ea-d95043a969f1',
+    namespace: 'default',
+    parties: [
+      {
+        user: 'lisa3',
+      },
+    ],
+    login: 'root',
+    created: new Date('2022-07-11T14:36:14.491402068Z'),
+    durationText: '5 seconds',
+    serverId: 'd5d6d695-97c5-4bef-b052-0f5c6203d7a1',
+    resourceName: 'im-a-nodename-2',
+    addr: 'd5d6d695-97c5-4bef-b052-0f5c6203d7a1',
+    clusterId: 'im-a-cluster-name',
+    participantModes: ['observer', 'moderator', 'peer'],
+    moderated: false,
+  },
+  {
+    kind: 'ssh',
+    sid: '8830cfe5-369e-5485-9c3d-19cc50e6f548',
+    namespace: 'default',
+    parties: [
+      {
+        user: 'lisa2',
+      },
+    ],
+    login: 'root',
+    created: new Date('2022-07-11T14:36:14.491402068Z'),
+    durationText: '5 seconds',
+    serverId: 'd5d6d695-97c5-4bef-b052-0f5c6203d7a1',
+    resourceName: 'im-a-nodename-3',
+    addr: 'd5d6d695-97c5-4bef-b052-0f5c6203d7a1',
+    clusterId: 'im-a-cluster-name',
+    participantModes: ['observer'],
+    moderated: false,
+  },
   {
     kind: 'desktop',
     sid: 'acacfbb4-3885-4d08-a466-de832a73ffac',