[v10] backport #951 #952 #960 #965 and #966

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/shared/libs/logger.js

@@ -35,6 +35,10 @@ export class Logger {
     this.log('info', ...args);
   }
 
+  debug(...args) {
+    this.log('debug', ...args);
+  }
+
   error(...args) {
     this.log('error', ...args);
   }

packages/teleport/package.json

@@ -24,6 +24,7 @@
   },
   "devDependencies": {
     "@gravitational/build": "^1.0.0",
+    "@types/wicg-native-file-system": "^2020.6.0",
     "jest-canvas-mock": "^2.3.1"
   }
 }

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

@@ -46,14 +46,17 @@ const props: State = {
     permission: { state: '' },
     errorText: '',
   },
-  isRecording: false,
   tdpClient: fakeClient(),
   username: 'user',
   onWsOpen: () => {},
   onWsClose: () => {},
   wsConnection: 'closed',
   disconnected: false,
-  setDisconnected: () => null,
+  setDisconnected: () => {},
+  setClipboardState: () => {},
+  canShareDirectory: true,
+  isSharingDirectory: false,
+  setIsSharingDirectory: () => {},
   onPngFrame: () => {},
   onTdpError: () => {},
   onKeyDown: () => {},
@@ -108,7 +111,6 @@ export const ConnectedSettingsFalse = () => {
         permission: { state: '' },
         errorText: '',
       }}
-      isRecording={false}
       onPngFrame={(ctx: CanvasRenderingContext2D) => {
         fillGray(ctx.canvas);
       }}
@@ -135,7 +137,7 @@ export const ConnectedSettingsTrue = () => {
         permission: { state: 'granted' },
         errorText: '',
       }}
-      isRecording={true}
+      isSharingDirectory={true}
       onPngFrame={(ctx: CanvasRenderingContext2D) => {
         fillGray(ctx.canvas);
       }}

packages/teleport/src/DesktopSession/DesktopSession.tsx

@@ -107,7 +107,10 @@ function Session(props: PropsWithChildren<State>) {
     username,
     hostname,
     clipboardState,
-    isRecording,
+    setClipboardState,
+    canShareDirectory,
+    isSharingDirectory,
+    setIsSharingDirectory,
     onPngFrame,
     onClipboardData,
     onTdpError,
@@ -139,16 +142,36 @@ function Session(props: PropsWithChildren<State>) {
     !disconnected &&
     clipboardSuccess;
 
+  const onShareDirectory = () => {
+    window
+      .showDirectoryPicker()
+      .then(sharedDirHandle => {
+        setIsSharingDirectory(true);
+        tdpClient.sharedDirectory = sharedDirHandle;
+        tdpClient.sendSharedDirectoryAnnounce();
+      })
+      .catch(() => {
+        setIsSharingDirectory(false);
+      });
+  };
+
   return (
     <Flex flexDirection="column">
       <TopBar
         onDisconnect={() => {
           setDisconnected(true);
+          setClipboardState(prevState => ({
+            ...prevState,
+            enabled: false,
+          }));
+          setIsSharingDirectory(false);
           tdpClient.nuke();
         }}
         userHost={`${username}@${hostname}`}
-        clipboard={clipboardSharingActive}
-        recording={isRecording}
+        clipboardSharingEnabled={clipboardSharingActive}
+        canShareDirectory={canShareDirectory}
+        isSharingDirectory={isSharingDirectory}
+        onShareDirectory={onShareDirectory}
       />
 
       {props.children}

packages/teleport/src/DesktopSession/TopBar.tsx

@@ -16,12 +16,19 @@ 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,
+    onDisconnect,
+    canShareDirectory,
+    isSharingDirectory,
+    onShareDirectory,
+  } = props;
   const theme = useTheme();
 
   const primaryOnTrue = (b: boolean): any => {
@@ -42,30 +49,32 @@ 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'
+            }
+          />
+          <StyledClipboard
+            style={primaryOnTrue(clipboardSharingEnabled)}
+            pr={3}
+            title={
+              clipboardSharingEnabled
+                ? 'Clipboard Sharing Enabled'
+                : 'Clipboard Sharing Disabled'
+            }
           />
-          <Text style={primaryOnTrue(recording)}>
-            {recording ? '' : 'Not '}Recording
-          </Text>
         </Flex>
-        <ActionMenu onDisconnect={onDisconnect} />
+        <ActionMenu
+          onDisconnect={onDisconnect}
+          showShareDirectory={canShareDirectory && !isSharingDirectory}
+          onShareDirectory={onShareDirectory}
+        />
       </Flex>
     </TopNav>
   );
@@ -79,17 +88,17 @@ const StyledClipboard = styled(Clipboard)`
   align-self: 'center';
 `;
 
-const StyledRecordingIndicator = styled.div`
-  width: 10px;
-  height: 10px;
-  border-radius: 10px;
-  margin-right: 6px;
-  vertical-align: text-bottom;
+const StyledFolderShared = styled(FolderShared)`
+  font-weight: ${({ theme }) => theme.fontWeights.bold};
+  font-size: ${({ theme }) => theme.fontSizes[6] + 'px'};
+  align-self: 'center';
 `;
 
 type Props = {
   userHost: string;
-  clipboard: boolean;
-  recording: boolean;
+  clipboardSharingEnabled: boolean;
+  canShareDirectory: boolean;
+  isSharingDirectory: boolean;
   onDisconnect: VoidFunction;
+  onShareDirectory: VoidFunction;
 };