fix: Show disk name

Composer/packages/client/src/CreationFlow/DefineConversation/index.tsx

@@ -9,6 +9,7 @@ import { PrimaryButton, DefaultButton } from 'office-ui-fabric-react/lib/Button'
 import { DialogFooter } from 'office-ui-fabric-react/lib/Dialog';
 import { Stack, StackItem } from 'office-ui-fabric-react/lib/Stack';
 import { TextField } from 'office-ui-fabric-react/lib/TextField';
+import get from 'lodash/get';
 
 import { LocationSelectContent } from '../LocationBrowser/LocationSelectContent';
 import { styles as wizardStyles } from '../StepWizard/styles';
@@ -26,30 +27,24 @@ interface FormData {
 
 interface FormDataError {
   name?: string;
-}
-
-interface Files {
-  name: '';
-  path: '';
+  location?: string;
 }
 
 interface DefineConversationProps {
   onSubmit: (formData: FormData) => void;
   onDismiss: () => void;
-  onCurrentPathUpdate?: (newPath?: string, storageId?: string) => void;
+  onCurrentPathUpdate: (newPath?: string, storageId?: string) => void;
   onGetErrorMessage?: (text: string) => void;
-  focusedStorageFolder?: StorageFolder;
-  currentPath?: string;
-  files?: Files[];
+  focusedStorageFolder: StorageFolder;
 }
 
 const initialFormDataError: FormDataError = {};
 
 export const DefineConversation: React.FC<DefineConversationProps> = props => {
-  const { onSubmit, onDismiss, onCurrentPathUpdate, focusedStorageFolder, currentPath, files } = props;
+  const { onSubmit, onDismiss, onCurrentPathUpdate, focusedStorageFolder } = props;
   const { state } = useContext(StoreContext);
   const { templateId } = state;
-
+  const files = get(focusedStorageFolder, 'children', []);
   const getDefaultName = () => {
     let i = -1;
     const bot = templateId;
@@ -82,7 +77,6 @@ export const DefineConversation: React.FC<DefineConversationProps> = props => {
   const validateForm = (data: FormData) => {
     const errors: FormDataError = {};
     const { name } = data;
-
     if (!name || !nameRegex.test(name)) {
       errors.name = formatMessage(
         'Spaces and special characters are not allowed. Use letters, numbers, -, or _., numbers, -, and _'
@@ -105,18 +99,19 @@ export const DefineConversation: React.FC<DefineConversationProps> = props => {
   };
 
   useEffect(() => {
+    const currentPath = Path.join(focusedStorageFolder.parent, focusedStorageFolder.name);
     updateForm('location')(null, currentPath);
-  }, [currentPath]);
+  }, [focusedStorageFolder]);
 
   useEffect(() => {
     const errors = validateForm(formData);
-    if (Object.keys(errors).length) {
+    if (Object.keys(errors).length || !focusedStorageFolder.writable) {
       setDisable(true);
     } else {
       setDisable(false);
     }
     setFormDataErrors(errors);
-  }, [files, formData.name]);
+  }, [focusedStorageFolder, formData.name]);
 
   const handleSubmit = e => {
     e.preventDefault();
@@ -157,13 +152,11 @@ export const DefineConversation: React.FC<DefineConversationProps> = props => {
             />
           </StackItem>
         </Stack>
-        {focusedStorageFolder && onCurrentPathUpdate && currentPath && (
-          <LocationSelectContent
-            onCurrentPathUpdate={onCurrentPathUpdate}
-            focusedStorageFolder={focusedStorageFolder}
-            currentPath={currentPath}
-          />
-        )}
+        <LocationSelectContent
+          operationMode={{ read: true, write: true }}
+          onCurrentPathUpdate={onCurrentPathUpdate}
+          focusedStorageFolder={focusedStorageFolder}
+        />
 
         <DialogFooter>
           <DefaultButton onClick={onDismiss} text={formatMessage('Cancel')} />

Composer/packages/client/src/CreationFlow/LocationBrowser/FileSelector.tsx

@@ -31,8 +31,11 @@ import { getFileIconName, formatBytes, calculateTimeDiff } from '../../utils';
 import { dropdown, loading, detailListContainer, detailListClass, fileSelectorContainer } from './styles';
 
 interface FileSelectorProps {
+  operationMode: {
+    read: boolean;
+    write: boolean;
+  };
   focusedStorageFolder: StorageFolder;
-  currentPath: string;
   onCurrentPathUpdate: (newPath?: string, storageId?: string) => void;
   onSelectionChanged: (file: any) => void;
   checkShowItem: (file: File) => boolean;
@@ -44,11 +47,12 @@ export const FileSelector: React.FC<FileSelectorProps> = props => {
     onSelectionChanged,
     focusedStorageFolder,
     checkShowItem,
-    currentPath,
     onCurrentPathUpdate,
     storageFileLoadingStatus,
+    operationMode,
   } = props;
   // for detail file list in open panel
+  const currentPath = path.join(focusedStorageFolder.parent, focusedStorageFolder.name);
   const tableColums = [
     {
       key: 'column1',
@@ -127,7 +131,7 @@ export const FileSelector: React.FC<FileSelectorProps> = props => {
       isPadded: true,
     },
   ];
-
+  const diskRootPattern = /[a-zA-Z]:\/$/;
   const storageFiles = useMemo(() => {
     if (!focusedStorageFolder.children) return [];
     const files = focusedStorageFolder.children.reduce((result, file) => {
@@ -146,12 +150,13 @@ export const FileSelector: React.FC<FileSelectorProps> = props => {
       return result;
     }, [] as any[]);
     // add parent folder
+    const p = path.join(focusedStorageFolder.parent, focusedStorageFolder.name);
     files.unshift({
       name: '..',
       value: '..',
       fileType: 'folder',
       iconName: 'folder',
-      filePath: focusedStorageFolder.parent,
+      filePath: diskRootPattern.test(p) || p === '/' ? '/' : focusedStorageFolder.parent,
     });
     return files;
   }, [focusedStorageFolder]);
@@ -185,24 +190,26 @@ export const FileSelector: React.FC<FileSelectorProps> = props => {
 
   const separator = path.sep;
   const pathItems = currentPath.split(separator).filter(p => p !== '');
+  const breadcrumbItems = pathItems.map((item, index) => {
+    let itemPath = getNavItemPath(pathItems, separator, 0, index);
+    // put a leading / back on the path if it started as a unix style path
+    itemPath = currentPath.startsWith('/') ? `/${itemPath}` : itemPath;
+    // add a trailing / if the last path is something like c:
+    itemPath = itemPath[itemPath.length - 1] === ':' ? `${itemPath}/` : itemPath;
+    const displayText = itemPath.startsWith('/') ? itemPath : `/${itemPath}`;
+    return {
+      text: displayText, // displayed text
+      key: itemPath, // value returned
+      title: item, // title shown on hover
+    };
+  });
+  breadcrumbItems.splice(0, 0, {
+    text: '/', // displayed text
+    key: '/', // value returned
+    title: '/', // title shown on hover
+  });
 
-  const breadcrumbItems = pathItems
-    .map((item, index) => {
-      let itemPath = getNavItemPath(pathItems, separator, 0, index);
-
-      // put a leading / back on the path if it started as a unix style path
-      itemPath = currentPath.startsWith('/') ? `/${itemPath}` : itemPath;
-      // add a trailing / if the last path is something like c:
-      itemPath = itemPath[itemPath.length - 1] === ':' ? `${itemPath}/` : itemPath;
-
-      return {
-        text: itemPath, // displayed text
-        key: itemPath, // value returned
-        title: item, // title shown on hover
-      };
-    })
-    .reverse();
-
+  breadcrumbItems.reverse();
   const updateLocation = (e, item?: IDropdownOption) => {
     onCurrentPathUpdate(item ? (item.key as string) : '');
   };
@@ -219,6 +226,11 @@ export const FileSelector: React.FC<FileSelectorProps> = props => {
                 options={breadcrumbItems}
                 onChange={updateLocation}
                 selectedKey={currentPath}
+                errorMessage={
+                  operationMode.write && !focusedStorageFolder.writable
+                    ? formatMessage('You do not have permission to save bots here')
+                    : ''
+                }
               />
             </StackItem>
           </Stack>

Composer/packages/client/src/CreationFlow/LocationBrowser/LocationSelectContent.tsx

@@ -2,6 +2,7 @@
 // Licensed under the MIT License.
 
 /** @jsx jsx */
+
 import { jsx } from '@emotion/core';
 import { Fragment, useContext, useRef } from 'react';
 
@@ -12,19 +13,20 @@ import { FileSelector } from './FileSelector';
 import { StoreContext } from './../../store';
 import { FileTypes } from './../../constants';
 interface LocationSelectContentProps {
+  operationMode: {
+    read: boolean;
+    write: boolean;
+  };
   onOpen?: (path: string, storage: string) => void;
   focusedStorageFolder: StorageFolder;
   onCurrentPathUpdate: (newPath?: string, storageId?: string) => void;
-  currentPath: string;
 }
 
 export const LocationSelectContent: React.FC<LocationSelectContentProps> = props => {
-  const { onOpen, focusedStorageFolder, onCurrentPathUpdate, currentPath } = props;
+  const { onOpen, focusedStorageFolder, onCurrentPathUpdate, operationMode } = props;
   const { state } = useContext(StoreContext);
   const { storages, storageFileLoadingStatus, creationFlowStatus } = state;
-
   const currentStorageIndex = useRef(0);
-
   const onSelectionChanged = item => {
     if (item) {
       const type = item.fileType;
@@ -48,9 +50,9 @@ export const LocationSelectContent: React.FC<LocationSelectContentProps> = props
   return (
     <Fragment>
       <FileSelector
+        operationMode={operationMode}
         storageFileLoadingStatus={storageFileLoadingStatus}
         checkShowItem={checkShowItem}
-        currentPath={currentPath}
         focusedStorageFolder={focusedStorageFolder}
         onCurrentPathUpdate={onCurrentPathUpdate}
         onSelectionChanged={onSelectionChanged}

Composer/packages/client/src/CreationFlow/OpenProject/index.tsx

@@ -15,19 +15,21 @@ interface OpenProjectProps {
   onOpen: (path: string, storage: string) => void;
   focusedStorageFolder: StorageFolder;
   onCurrentPathUpdate: (newPath?: string, storageId?: string) => void;
-  currentPath: string;
   onDismiss: () => void;
 }
 
 export const OpenProject: React.FC<OpenProjectProps> = props => {
-  const { onOpen, onDismiss, focusedStorageFolder, currentPath, onCurrentPathUpdate } = props;
+  const { onOpen, onDismiss, focusedStorageFolder, onCurrentPathUpdate } = props;
 
   return (
     <div data-testid="SelectLocation">
       <LocationSelectContent
+        operationMode={{
+          read: true,
+          write: false,
+        }}
         onOpen={onOpen}
         focusedStorageFolder={focusedStorageFolder}
-        currentPath={currentPath}
         onCurrentPathUpdate={onCurrentPathUpdate}
       />
       <DialogFooter>

Composer/packages/client/src/CreationFlow/index.js

@@ -4,7 +4,6 @@
 import Path from 'path';
 
 import React, { useState, useEffect, useContext, useRef } from 'react';
-import get from 'lodash/get';
 
 import { CreationFlowStatus, DialogCreationCopy, Steps, FileTypes } from '../constants';
 
@@ -17,7 +16,7 @@ import { navigateTo } from './../utils/navigation';
 
 export function CreationFlow(props) {
   const { state, actions } = useContext(StoreContext);
-  const [files, setFiles] = useState([]);
+  //const [files, setFiles] = useState([]);
   const [step, setStep] = useState();
   // eslint-disable-next-line react/prop-types
   const { creationFlowStatus, setCreationFlowStatus } = props;
@@ -34,7 +33,6 @@ export function CreationFlow(props) {
   const currentStorageIndex = useRef(0);
   const storage = storages[currentStorageIndex.current];
   const currentStorageId = storage ? storage.id : 'default';
-  const [currentPath, setCurrentPath] = useState('');
   useEffect(() => {
     if (storages && storages.length) {
       const storageId = storage.id;
@@ -44,15 +42,6 @@ export function CreationFlow(props) {
     }
   }, [storages]);
 
-  useEffect(() => {
-    const allFilesInFolder = get(focusedStorageFolder, 'children', []);
-
-    setFiles(allFilesInFolder);
-    if (Object.keys(focusedStorageFolder).length) {
-      setCurrentPath(Path.join(focusedStorageFolder.parent, focusedStorageFolder.name));
-    }
-  }, [focusedStorageFolder]);
-
   useEffect(() => {
     init();
   }, [creationFlowStatus]);
@@ -147,7 +136,6 @@ export function CreationFlow(props) {
           onOpen={openBot}
           onDismiss={handleDismiss}
           focusedStorageFolder={focusedStorageFolder}
-          currentPath={currentPath}
           onCurrentPathUpdate={updateCurrentPath}
         />
       ),
@@ -160,8 +148,6 @@ export function CreationFlow(props) {
           onDismiss={handleDismiss}
           onCurrentPathUpdate={updateCurrentPath}
           focusedStorageFolder={focusedStorageFolder}
-          currentPath={currentPath}
-          files={files}
         />
       ),
     },