Directory sharing menu item

packages/design/src/Icon/Icon.jsx

@@ -21,7 +21,7 @@ import '../assets/icomoon/style.css';
 
 const Icon = styled.span`
   display: inline-block;
-  transition: color .3s;
+  transition: color 0.3s;
   ${space} ${width} ${color} ${fontSize}
 `;
 
@@ -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/teleport/src/DesktopSession/ActionMenu.tsx

@@ -31,6 +31,12 @@ export default function ActionMenu(props: Props) {
         }}
         menuProps={menuProps}
       >
+        {props.canShareDirectory && !props.isSharingDirectory && (
+          <MenuItem onClick={props.onShareDirectory}>
+            <MenuItemIcon as={Icons.FolderPlus} mr="2" />
+            Share Directory
+          </MenuItem>
+        )}
         <MenuItem onClick={props.onDisconnect}>
           <MenuItemIcon as={Icons.PowerSwitch} mr="2" />
           Disconnect
@@ -41,6 +47,9 @@ export default function ActionMenu(props: Props) {
 }
 
 type Props = {
+  canShareDirectory: boolean;
+  isSharingDirectory: 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,31 @@ 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">
+          <StyledFolderShared
+            style={primaryOnTrue(isSharingDirectory)}
+            pr={3}
+          />
+          <StyledClipboard
+            style={primaryOnTrue(clipboardSharingEnabled)}
+            pr={3}
+          />
           <StyledRecordingIndicator
             style={{
-              backgroundColor: recording
+              backgroundColor: isRecording
                 ? theme.colors.error.light
                 : theme.colors.text.secondary,
             }}
           />
-          <Text style={primaryOnTrue(recording)}>
-            {recording ? '' : 'Not '}Recording
-          </Text>
+          <Text style={primaryOnTrue(isRecording)}>Recording</Text>
         </Flex>
-        <ActionMenu onDisconnect={onDisconnect} />
+        <ActionMenu
+          onDisconnect={onDisconnect}
+          canShareDirectory={canShareDirectory}
+          isSharingDirectory={isSharingDirectory}
+          onShareDirectory={onShareDirectory}
+        />
       </Flex>
     </TopNav>
   );
@@ -79,6 +88,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 +104,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;
 };