Add warning dialog for unsupported browsers for directory sharing

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

@@ -79,6 +79,9 @@ const props: State = {
     authenticate: () => {},
     setState: () => {},
   },
+  directorySharingBrowserErr: false,
+  setDirectorySharingBrowserErr: () => {},
+  isUsingChrome: true,
 };
 
 export const Processing = () => (

packages/teleport/src/DesktopSession/DesktopSession.tsx

@@ -43,6 +43,8 @@ declare global {
 
 export function DesktopSession(props: State) {
   const {
+    directorySharingBrowserErr,
+    setDirectorySharingBrowserErr,
     clipboardState,
     fetchAttempt,
     tdpConnection,
@@ -62,21 +64,20 @@ export function DesktopSession(props: State) {
   // onDialogClose is called when a user
   // dismisses a non-fatal error dialog.
   const onDialogClose = () => {
-    // This setTdpConnection call will cause the useEffect below
-    // to calculate the errorDialog state.
+    // The following state-setting calls will
+    // cause the useEffect below to calculate the
+    // errorDialog state.
+
     setTdpConnection(prevState => {
-      // onDialogClose should only be called when
-      // the user dismisses a non-fatal error dialog,
-      // and prevState.status === '' means non-fatal
-      // error dialog, so the below if statement should
-      // always be true.
       if (prevState.status === '') {
         // If prevState.status was a non-fatal error,
         // we assume that the TDP connection remains open.
         return { status: 'success' };
       }
       return prevState;
     });
+
+    setDirectorySharingBrowserErr(false);
   };
 
   const computeErrorDialog = () => {
@@ -100,9 +101,16 @@ export function DesktopSession(props: State) {
       errorText = clipboardState.errorText || 'clipboard sharing failed';
     } else if (unknownConnectionError) {
       errorText = 'Session disconnected for an unknown reason.';
+    } else if (directorySharingBrowserErr) {
+      errorText =
+        'Your user role supports directory sharing over desktop access, \
+      however this feature is only available by default on some chromium \
+      based browsers like Google Chrome or Microsoft Edge. Brave users can \
+      use the feature by navigating to brave://flags/#file-system-access-api \
+      and selecting "Enable". Please switch to a supported browser.';
     }
     const open = errorText !== '';
-    const fatal = tdpConnection.status !== '';
+    const fatal = !(tdpConnection.status === '' || directorySharingBrowserErr);
 
     return { open, text: errorText, fatal };
   };
@@ -197,6 +205,7 @@ function Session(props: PropsWithChildren<State>) {
     canShareDirectory,
     isSharingDirectory,
     setIsSharingDirectory,
+    setDirectorySharingBrowserErr,
     onPngFrame,
     onClipboardData,
     onTdpError,
@@ -229,16 +238,20 @@ function Session(props: PropsWithChildren<State>) {
     clipboardSuccess;
 
   const onShareDirectory = () => {
-    window
-      .showDirectoryPicker()
-      .then(sharedDirHandle => {
-        setIsSharingDirectory(true);
-        tdpClient.addSharedDirectory(sharedDirHandle);
-        tdpClient.sendSharedDirectoryAnnounce();
-      })
-      .catch(() => {
-        setIsSharingDirectory(false);
-      });
+    try {
+      window
+        .showDirectoryPicker()
+        .then(sharedDirHandle => {
+          setIsSharingDirectory(true);
+          tdpClient.addSharedDirectory(sharedDirHandle);
+          tdpClient.sendSharedDirectoryAnnounce();
+        })
+        .catch(() => {
+          setIsSharingDirectory(false);
+        });
+    } catch (e) {
+      setDirectorySharingBrowserErr(true);
+    }
   };
 
   return (

packages/teleport/src/DesktopSession/useDesktopSession.tsx

@@ -47,6 +47,8 @@ export default function useDesktopSession() {
 
   const [canShareDirectory, setCanShareDirectory] = useState(false);
   const [isSharingDirectory, setIsSharingDirectory] = useState(false);
+  const [directorySharingBrowserErr, setDirectorySharingBrowserErr] =
+    useState(false);
 
   const { username, desktopName, clusterId } = useParams<UrlDesktopParams>();
 
@@ -155,7 +157,10 @@ export default function useDesktopSession() {
     setClipboardState,
     canShareDirectory,
     isSharingDirectory,
+    directorySharingBrowserErr,
+    setDirectorySharingBrowserErr,
     setIsSharingDirectory,
+    isUsingChrome,
     fetchAttempt,
     tdpConnection,
     wsConnection,