Directory sharing menu item

packages/design/src/Icon/Icon.jsx

@@ -151,6 +151,8 @@ export const Expand = makeFontIcon('Expand', 'icon-frame-expand');
 export const Facebook = makeFontIcon('Facebook', 'icon-facebook');
 export const FacebookSquare = makeFontIcon('FacebookSquare', 'icon-facebook2');
 export const FileCode = makeFontIcon('Youtube', 'icon-file-code');
+export const FolderPlus = makeFontIcon('FolderPlus', 'icon-folder-plus');
+export const FolderShared = makeFontIcon('FolderShared', 'icon-folder-shared');
 export const ForwarderAdded = makeFontIcon(
   'ForwarderAdded',
   'icon-add-fowarder'

packages/design/src/Icon/Icon.story.js

@@ -99,6 +99,8 @@ export const ListOfIcons = () => (
     <IconBox IconCmpt={Icon.Expand} text="Expand" />
     <IconBox IconCmpt={Icon.Facebook} text="Facebook" />
     <IconBox IconCmpt={Icon.FacebookSquare} text="FacebookSquare" />
+    <IconBox IconCmpt={Icon.FolderPlus} text="FolderPlus" />
+    <IconBox IconCmpt={Icon.FolderShared} text="FolderShared" />
     <IconBox IconCmpt={Icon.ForwarderAdded} text="ForwarderAdded" />
     <IconBox IconCmpt={Icon.Github} text="Github" />
     <IconBox IconCmpt={Icon.Google} text="Google" />

packages/teleport/src/DesktopSession/ActionMenu.tsx

@@ -20,6 +20,8 @@ import * as Icons from 'design/Icon';
 import { Flex } from 'design';
 
 export default function ActionMenu(props: Props) {
+  const { showShareDirectory, onShareDirectory, onDisconnect } = props;
+
   return (
     <Flex alignItems="center">
       <MenuIcon
@@ -31,7 +33,13 @@ export default function ActionMenu(props: Props) {
         }}
         menuProps={menuProps}
       >
-        <MenuItem onClick={props.onDisconnect}>
+        {showShareDirectory && (
+          <MenuItem onClick={onShareDirectory}>
+            <MenuItemIcon as={Icons.FolderPlus} mr="2" />
+            Share Directory
+          </MenuItem>
+        )}
+        <MenuItem onClick={onDisconnect}>
           <MenuItemIcon as={Icons.PowerSwitch} mr="2" />
           Disconnect
         </MenuItem>
@@ -41,6 +49,8 @@ export default function ActionMenu(props: Props) {
 }
 
 type Props = {
+  showShareDirectory: boolean;
+  onShareDirectory: VoidFunction;
   onDisconnect: VoidFunction;
 };
 

packages/teleport/src/DesktopSession/DesktopSession.story.tsx

@@ -53,7 +53,12 @@ const props: State = {
   onWsClose: () => {},
   wsConnection: 'closed',
   disconnected: false,
-  setDisconnected: () => null,
+  setDisconnected: () => {},
+  setClipboardState: () => {},
+  setIsRecording: () => {},
+  canShareDirectory: true,
+  isSharingDirectory: false,
+  setIsSharingDirectory: () => {},
   onPngFrame: () => {},
   onTdpError: () => {},
   onKeyDown: () => {},
@@ -136,6 +141,7 @@ export const ConnectedSettingsTrue = () => {
         errorText: '',
       }}
       isRecording={true}
+      isSharingDirectory={true}
       onPngFrame={(ctx: CanvasRenderingContext2D) => {
         fillGray(ctx.canvas);
       }}

packages/teleport/src/DesktopSession/DesktopSession.tsx

@@ -107,7 +107,12 @@ function Session(props: PropsWithChildren<State>) {
     username,
     hostname,
     clipboardState,
+    setClipboardState,
     isRecording,
+    setIsRecording,
+    canShareDirectory,
+    isSharingDirectory,
+    setIsSharingDirectory,
     onPngFrame,
     onClipboardData,
     onTdpError,
@@ -144,11 +149,22 @@ function Session(props: PropsWithChildren<State>) {
       <TopBar
         onDisconnect={() => {
           setDisconnected(true);
+          setClipboardState(prevState => ({
+            ...prevState,
+            enabled: false,
+          }));
+          setIsRecording(false);
+          setIsSharingDirectory(false);
           tdpClient.nuke();
         }}
         userHost={`${username}@${hostname}`}
-        clipboard={clipboardSharingActive}
-        recording={isRecording}
+        clipboardSharingEnabled={clipboardSharingActive}
+        isRecording={isRecording}
+        canShareDirectory={canShareDirectory}
+        isSharingDirectory={isSharingDirectory}
+        onShareDirectory={() => {
+          setIsSharingDirectory(true);
+        }}
       />
 
       {props.children}

packages/teleport/src/DesktopSession/TopBar.tsx

@@ -16,12 +16,20 @@ limitations under the License.
 import React from 'react';
 import styled, { useTheme } from 'styled-components';
 import { Text, TopNav, Flex } from 'design';
-import { Clipboard } from 'design/Icon';
+import { Clipboard, FolderShared } from 'design/Icon';
 import { colors } from 'teleport/Console/colors';
 import ActionMenu from './ActionMenu';
 
 export default function TopBar(props: Props) {
-  const { userHost, clipboard, recording, onDisconnect } = props;
+  const {
+    userHost,
+    clipboardSharingEnabled,
+    isRecording,
+    onDisconnect,
+    canShareDirectory,
+    isSharingDirectory,
+    onShareDirectory,
+  } = props;
   const theme = useTheme();
 
   const primaryOnTrue = (b: boolean): any => {
@@ -42,30 +50,45 @@ export default function TopBar(props: Props) {
         {userHost}
       </Text>
 
-      <Text
-        style={{
-          ...primaryOnTrue(clipboard),
-          verticalAlign: 'text-bottom',
-        }}
-      >
-        <StyledClipboard style={primaryOnTrue(clipboard)} pr={2} />
-        Clipboard Sharing {clipboard ? 'Enabled' : 'Disabled'}
-      </Text>
-
       <Flex px={3}>
         <Flex alignItems="center">
-          <StyledRecordingIndicator
-            style={{
-              backgroundColor: recording
-                ? theme.colors.error.light
-                : theme.colors.text.secondary,
-            }}
+          <StyledFolderShared
+            style={primaryOnTrue(isSharingDirectory)}
+            pr={3}
+            title={
+              isSharingDirectory
+                ? 'Directory Sharing Enabled'
+                : 'Directory Sharing Disabled'
+            }
           />
-          <Text style={primaryOnTrue(recording)}>
-            {recording ? '' : 'Not '}Recording
-          </Text>
+          <StyledClipboard
+            style={primaryOnTrue(clipboardSharingEnabled)}
+            pr={3}
+            title={
+              clipboardSharingEnabled
+                ? 'Clipboard Sharing Enabled'
+                : 'Clipboard Sharing Disabled'
+            }
+          />
+          <Flex
+            title={isRecording ? 'Recording In Progress' : 'Not Recording'}
+            alignItems="center"
+          >
+            <StyledRecordingIndicator
+              style={{
+                backgroundColor: isRecording
+                  ? theme.colors.error.light
+                  : theme.colors.text.secondary,
+              }}
+            />
+            <Text style={primaryOnTrue(isRecording)}>Recording</Text>
+          </Flex>
         </Flex>
-        <ActionMenu onDisconnect={onDisconnect} />
+        <ActionMenu
+          onDisconnect={onDisconnect}
+          showShareDirectory={canShareDirectory && !isSharingDirectory}
+          onShareDirectory={onShareDirectory}
+        />
       </Flex>
     </TopNav>
   );
@@ -79,6 +102,12 @@ const StyledClipboard = styled(Clipboard)`
   align-self: 'center';
 `;
 
+const StyledFolderShared = styled(FolderShared)`
+  font-weight: ${({ theme }) => theme.fontWeights.bold};
+  font-size: ${({ theme }) => theme.fontSizes[6] + 'px'};
+  align-self: 'center';
+`;
+
 const StyledRecordingIndicator = styled.div`
   width: 10px;
   height: 10px;
@@ -89,7 +118,10 @@ const StyledRecordingIndicator = styled.div`
 
 type Props = {
   userHost: string;
-  clipboard: boolean;
-  recording: boolean;
+  clipboardSharingEnabled: boolean;
+  isRecording: boolean;
+  canShareDirectory: boolean;
+  isSharingDirectory: boolean;
   onDisconnect: VoidFunction;
+  onShareDirectory: VoidFunction;
 };