FileTree and WebDav updates to support module editor scenario

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@labkey/components",
-  "version": "0.63.3",
+  "version": "0.63.3-fb-moduleEditorBrowserWIP.1",
   "description": "Components, models, actions, and utility functions for LabKey applications and pages",
   "main": "dist/components.js",
   "module": "dist/components.js",

packages/components/releaseNotes/labkey/components.md

@@ -1,6 +1,17 @@
 # @labkey/components
 Components, models, actions, and utility functions for LabKey applications and pages.
 
+### version TBD
+*Released*: TBD
+* FileTree component
+    - add prop to remove checkbox selection option from node display
+    - support font awesome icon display for file based on WebDav iconFontCls data
+    - call the onFileSelect callback function on node select for non-checkbox case
+    - make the arrow toggle smaller
+* WebDav model updates for module editor browser scenario
+    - add contentType and options properties to model
+    - add param to getWebDavFiles for the non-@files case
+
 ### version 0.63.3
 *Released*: 27 May 2020
 * Issue 40008: Allow override of heading shown on LineageSummary panel for the Parents and Children of a node

packages/components/src/components/files/FileTree.tsx

@@ -3,7 +3,7 @@ import { Treebeard, decorators } from 'react-treebeard';
 import React, { PureComponent } from 'react';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faFolder, faFileAlt } from '@fortawesome/free-solid-svg-icons';
+import { faFolder, faFileAlt, faFolderOpen } from '@fortawesome/free-solid-svg-icons';
 import { Checkbox, Alert } from 'react-bootstrap';
 import { List } from 'immutable';
 
@@ -46,11 +46,11 @@ const customStyle = {
                     position: 'absolute',
                     top: '50%',
                     left: '50%',
-                    margin: '-7px 0 0 -7px',
-                    height: '14px',
+                    margin: '-10px 0 0 -5px',
+                    height: '10px',
                 },
-                height: 14,
-                width: 14,
+                height: 10,
+                width: 10,
                 arrow: {
                     fill: '#777',
                     strokeWidth: 0,
@@ -103,9 +103,10 @@ const nodeIsEmpty = (id: string): boolean => {
 };
 
 const Header = props => {
-    const { style, onSelect, node, customStyles, checked, handleCheckbox } = props;
-    const iconType = node.children ? 'folder' : 'file-text';
-    const icon = iconType === 'folder' ? faFolder : faFileAlt;
+    const { style, onSelect, node, customStyles, checked, handleCheckbox, useFileIconCls } = props;
+    const isDirectory = node.children !== undefined;
+    const iconType = isDirectory ? 'folder' : 'file-text';
+    const icon = isDirectory ? (node.toggled ? faFolderOpen : faFolder) : faFileAlt;
 
     if (nodeIsEmpty(node.id)) {
         return <div className="filetree-empty-directory">No Files Found</div>;
@@ -125,11 +126,14 @@ const Header = props => {
     };
 
     return (
-        <span className={'filetree-checkbox-container' + (iconType === 'folder' ? '' : ' filetree-leaf-node')}>
-            <Checkbox id={CHECK_ID_PREFIX + node.id} checked={checked} onChange={handleCheckbox} onClick={checkClick} />
+        <span className={'filetree-checkbox-container' + (iconType === 'folder' ? '' : ' filetree-leaf-node') + (node.active ? ' active' : '')}>
+            {handleCheckbox && <Checkbox id={CHECK_ID_PREFIX + node.id} checked={checked} onChange={handleCheckbox} onClick={checkClick} />}
             <div style={style.base} onClick={onSelect}>
                 <div style={node.selected ? { ...style.title, ...customStyles.header.title } : style.title}>
-                    <FontAwesomeIcon icon={icon} className="filetree-folder-icon" />
+                    {!isDirectory && useFileIconCls && node.data && node.data.iconFontCls
+                        ? <i className={node.data.iconFontCls + ' filetree-folder-icon'} />
+                        : <FontAwesomeIcon icon={icon} className="filetree-folder-icon" />
+                    }
                     {node.name}
                 </div>
             </div>
@@ -139,7 +143,9 @@ const Header = props => {
 
 interface FileTreeProps {
     loadData: (directory?: string) => Promise<any>;
-    onFileSelect: (name: string, path: string, checked: boolean, isDirectory: boolean) => void;
+    onFileSelect: (name: string, path: string, checked: boolean, isDirectory: boolean, node: any) => void;
+    allowMultiSelect?: boolean;
+    useFileIconCls?: boolean;
 }
 
 interface FileTreeState {
@@ -151,6 +157,11 @@ interface FileTreeState {
 }
 
 export class FileTree extends PureComponent<FileTreeProps, FileTreeState> {
+    static defaultProps = {
+        allowMultiSelect: true,
+        useFileIconCls: false,
+    };
+
     constructor(props: FileTreeProps) {
         super(props);
 
@@ -197,8 +208,14 @@ export class FileTree extends PureComponent<FileTreeProps, FileTreeState> {
     }
 
     headerDecorator = props => {
+        const { allowMultiSelect, useFileIconCls } = this.props;
         const { checked } = this.state;
-        return <Header {...props} checked={checked.contains(props.node.id)} handleCheckbox={this.handleCheckbox} />;
+
+        if (allowMultiSelect) {
+            return <Header {...props} useFileIconCls={useFileIconCls} checked={checked.contains(props.node.id)} handleCheckbox={this.handleCheckbox} />;
+        } else {
+            return <Header {...props} useFileIconCls={useFileIconCls} />;
+        }
     };
 
     getNodeIdFromId = (id: string): string => {
@@ -246,11 +263,11 @@ export class FileTree extends PureComponent<FileTreeProps, FileTreeState> {
     };
 
     // Callback to parent with actual path of selected file
-    onFileSelect = (id: string, checked: boolean, isDirectory: boolean): void => {
+    onFileSelect = (id: string, checked: boolean, isDirectory: boolean, node: any): void => {
         const { onFileSelect } = this.props;
 
         if (!nodeIsEmpty(id)) {
-            onFileSelect(this.getNameFromId(id), this.getPathFromId(id), checked, isDirectory);
+            onFileSelect(this.getNameFromId(id), this.getPathFromId(id), checked, isDirectory, node);
         }
     };
 
@@ -267,7 +284,7 @@ export class FileTree extends PureComponent<FileTreeProps, FileTreeState> {
             if (checked) {
                 this.setState(
                     state => ({ checked: state.checked.push(node.id) }),
-                    () => this.onFileSelect(node.id, checked, !!node.children)
+                    () => this.onFileSelect(node.id, checked, !!node.children, node)
                 );
             } else {
                 this.setState(
@@ -276,7 +293,7 @@ export class FileTree extends PureComponent<FileTreeProps, FileTreeState> {
                             return check !== node.id;
                         }) as List<string>,
                     }),
-                    () => this.onFileSelect(node.id, checked, !!node.children)
+                    () => this.onFileSelect(node.id, checked, !!node.children, node)
                 );
             }
         }
@@ -350,27 +367,31 @@ export class FileTree extends PureComponent<FileTreeProps, FileTreeState> {
     // we make a clone of this.state.data for setState.  Directly manipulating anything in this.state is NOT a recommended React
     // pattern.  This is done in this case to work with the treebeard package, but should not be copied elsewhere.
     onToggle = (node: any, toggled: boolean, callback?: () => any): void => {
+        const { allowMultiSelect } = this.props;
         const { cursor, data } = this.state;
 
         if (cursor) {
-            node.active = false;
+            cursor.active = false;
+            this.setState(() => ({ cursor, data: { ...data } }));
         }
         node.active = true;
         node.toggled = toggled;
 
-        if (node.children) {
-            // load data if not already loaded
-            if (node.children.length === 0) {
-                node.children = [{ id: node.id + '|' + LOADING_FILE_NAME }];
-                this.setState(
-                    () => ({ cursor: node, data: { ...data } }),
-                    () => {
-                        this.loadDirectory(node.id, callback);
-                    }
-                );
-            } else {
-                this.setState(() => ({ cursor: node, data: { ...data }, error: undefined }), callback);
-            }
+        // load data if not already loaded
+        if (node.children && node.children.length === 0) {
+            node.children = [{ id: node.id + '|' + LOADING_FILE_NAME }];
+            this.setState(
+                () => ({ cursor: node, data: { ...data } }),
+                () => {
+                    this.loadDirectory(node.id, callback);
+                }
+            );
+        } else {
+            this.setState(() => ({ cursor: node, data: { ...data }, error: undefined }), callback);
+        }
+
+        if (!allowMultiSelect) {
+            this.onFileSelect(node.id, true, !!node.children, node);
         }
     };
 

packages/components/src/components/files/WebDav.ts

@@ -6,6 +6,7 @@ import { DEFAULT_FILE, IFile } from './models';
 
 export class WebDavFile extends Record(DEFAULT_FILE) implements IFile {
     contentLength: number;
+    contentType: string;
     created: string;
     createdBy: string;
     createdById: number;
@@ -19,6 +20,7 @@ export class WebDavFile extends Record(DEFAULT_FILE) implements IFile {
     isLeaf: boolean;
     lastModified: string;
     name: string;
+    options: string;
     propertiesRowId?: number;
 
     constructor(params?: IFile) {
@@ -36,17 +38,17 @@ export class WebDavFile extends Record(DEFAULT_FILE) implements IFile {
             lastModified: values.lastmodified,
             downloadUrl: values.href ? values.href + '?contentDisposition=attachment' : undefined,
             name: values.text,
+            contentType: values.contenttype || webDavFile.contentType,
         }) as WebDavFile;
     }
 }
 
-function getWebDavUrl(containerPath: string, directory?: string, createIntermediates?: boolean) {
+function getWebDavUrl(containerPath: string, directory?: string, createIntermediates?: boolean, skipAtFiles?: boolean) {
     let url =
         ActionURL.getContextPath() +
         '/_webdav' +
         ActionURL.encodePath(containerPath) +
-        '/' +
-        encodeURIComponent('@files');
+        (!skipAtFiles ? '/' + encodeURIComponent('@files') : '');
 
     if (directory) {
         url += '/' + directory;
@@ -62,10 +64,11 @@ function getWebDavUrl(containerPath: string, directory?: string, createIntermedi
 export function getWebDavFiles(
     containerPath: string,
     directory?: string,
-    includeDirectories?: boolean
+    includeDirectories?: boolean,
+    skipAtFiles?: boolean
 ): Promise<Map<string, WebDavFile>> {
     return new Promise((resolve, reject) => {
-        const url = getWebDavUrl(containerPath, directory);
+        const url = getWebDavUrl(containerPath, directory, false, skipAtFiles);
 
         return Ajax.request({
             url: url + '?method=JSON',

packages/components/src/components/files/__snapshots__/FileTree.spec.tsx.snap

@@ -130,12 +130,12 @@ exports[`FileTree with data 1`] = `
                 "verticalAlign": "top",
                 "width": "24px",
               },
-              "height": 14,
-              "width": 14,
+              "height": 10,
+              "width": 10,
               "wrapper": Object {
-                "height": "14px",
+                "height": "10px",
                 "left": "50%",
-                "margin": "-7px 0 0 -7px",
+                "margin": "-10px 0 0 -5px",
                 "position": "absolute",
                 "top": "50%",
               },

packages/components/src/components/files/models.ts

@@ -24,6 +24,7 @@ export interface FileAttachmentFormModel {
 
 export interface IFile {
     contentLength: number;
+    contentType: string;
     created: string;
     createdBy: string;
     createdById: number;
@@ -37,11 +38,13 @@ export interface IFile {
     isLeaf: boolean;
     lastModified: string;
     name: string;
+    options: string;
     propertiesRowId?: number;
 }
 
 export const DEFAULT_FILE: IFile = {
     contentLength: 0,
+    contentType: undefined,
     created: undefined,
     createdBy: undefined,
     createdById: -1,
@@ -55,6 +58,7 @@ export const DEFAULT_FILE: IFile = {
     isLeaf: false,
     lastModified: undefined,
     name: undefined,
+    options: undefined,
     propertiesRowId: undefined,
 };
 

packages/components/src/stories/FileTree.tsx

@@ -1,5 +1,5 @@
 import { storiesOf } from '@storybook/react';
-import { withKnobs } from '@storybook/addon-knobs';
+import { withKnobs, boolean } from '@storybook/addon-knobs';
 
 import React from 'react';
 
@@ -11,8 +11,11 @@ storiesOf('FileTree', module)
     .add('With basic data', () => (
         <div>
             <FileTree
+                allowMultiSelect={boolean('allowMultiSelect', true)}
                 loadData={fetchFileTestTree}
-                onFileSelect={(name: string, path: string, checked: boolean, isDirectory: boolean) => {}}
+                onFileSelect={(name: string, path: string, checked: boolean, isDirectory: boolean, node: any) => {
+                    console.log(path, checked);
+                }}
             />
         </div>
     ));

packages/components/src/theme/fileTree.scss

@@ -17,6 +17,10 @@
     & input[type='checkbox'] {
         margin-top: 15%;
     }
+
+    &.active {
+        font-weight: bold;
+    }
 }
 
 .filetree-container {