En-1384-file browser (#167)

* State for file browser added

* File browser page added

* Breadcrumb navigation and files table added

* css added

* Reducer splitted, JSON object check added, refactoring and new tests added

.gitignore

@@ -26,3 +26,4 @@ yarn-error.log*
 
 # false folder
 /false
+

__mocks__/api/fileBrowser.js

@@ -0,0 +1,5 @@
+import { mockApi } from 'test/testUtils';
+import { FILE_BROWSER } from 'test/mocks/fileBrowser';
+
+// eslint-disable-next-line import/prefer-default-export
+export const getFileBrowser = jest.fn(mockApi({ payload: FILE_BROWSER }));

sass/file-browser/list/FileBreadcrumb.scss

@@ -0,0 +1,21 @@
+.FileBreadcrumb {
+  // sass-lint:disable class-name-format
+  .breadcrumb {
+    border: 0;
+  }
+  // sass-lint:enable class-name-format
+}
+
+.BreadcrumbItem {
+  &__first-level-folder {
+    cursor: pointer;
+  }
+
+  &__a-item-link {
+    cursor: pointer;
+  }
+
+  &__root-link {
+    cursor: pointer;
+  }
+}

sass/file-browser/list/FilesListTable.scss

@@ -0,0 +1,13 @@
+.FilesListTable {
+  &__link-dir {
+    cursor: pointer;
+  }
+
+  &__link-download {
+    cursor: pointer;
+  }
+
+  &__up-link {
+    cursor: pointer;
+  }
+}

sass/index.scss

@@ -71,3 +71,5 @@
 @import "dashboard/PageStatus";
 @import "dashboard/PagesList";
 @import "reload-configuration/ReloadConfig";
+@import "file-browser/list/FilesListTable";
+@import "file-browser/list/FileBreadcrumb";

src/api/fileBrowser.js

@@ -0,0 +1,12 @@
+import { makeRequest, METHODS } from '@entando/apimanager';
+import { FILE_BROWSER } from 'test/mocks/fileBrowser';
+
+// eslint-disable-next-line import/prefer-default-export
+export const getFileBrowser = (queryString = '') => (
+  makeRequest({
+    uri: `/api/fileBrowser${queryString}`,
+    method: METHODS.GET,
+    mockResponse: FILE_BROWSER,
+    useAuthentication: true,
+  })
+);

src/app-init/router.js

@@ -41,6 +41,7 @@ export const ROUTE_GROUP_ADD = 'groupAdd';
 export const ROUTE_GROUP_EDIT = 'groupEdit';
 export const ROUTE_GROUP_DETAIL = 'groupDetail';
 export const ROUTE_USER_AUTHORITY = 'authorityPage';
+export const ROUTE_LABELS_ADD = 'labelsAdd';
 export const ROUTE_LABELS_AND_LANGUAGES = 'labelsAndLanguages';
 export const ROUTE_LABEL_ADD = 'labelAdd';
 export const ROUTE_LABEL_EDIT = 'labelEdit';
@@ -59,7 +60,7 @@ export const ROUTE_RELOAD_CONFIG = 'reloadConfig';
 export const ROUTE_RELOAD_CONFIRM = 'reloadConfirm';
 
 export const ROUTE_PLUGIN_CONFIG_PAGE = 'pluginConfigPage';
-
+export const ROUTE_FILE_BROWSER = 'fileBrowserPage';
 
 routerConfig(
   store,
@@ -107,6 +108,7 @@ routerConfig(
       { name: ROUTE_GROUP_DETAIL, path: '/group/view/:groupname' },
       { name: ROUTE_GROUP_EDIT, path: '/group/edit/:groupCode' },
       { name: ROUTE_USER_AUTHORITY, path: '/authority/:username' },
+      { name: ROUTE_LABELS_ADD, path: '/labels/add' },
       { name: ROUTE_LABELS_AND_LANGUAGES, path: '/labels-languages' },
       { name: ROUTE_LABEL_ADD, path: '/labels-languages/add' },
       { name: ROUTE_LABEL_EDIT, path: '/labels-languages/edit/:labelCode' },
@@ -122,6 +124,7 @@ routerConfig(
       { name: ROUTE_RELOAD_CONFIRM, path: '/reloadConfiguration/confirm' },
 
       { name: ROUTE_PLUGIN_CONFIG_PAGE, path: '/plugin/:pluginId/config' },
+      { name: ROUTE_FILE_BROWSER, path: '/fileBrowser' },
     ],
     notFoundRoute: { name: 'notFound', path: '/route-not-found' },
   },

src/locales/en.js

@@ -108,6 +108,7 @@ export default {
     'menu.dataModel': 'Data Model',
     'menu.components': 'Components',
     'menu.configuration': 'Configuration',
+    'menu.fileBrowser': 'File browser',
     'menu.widgets': 'Widgets',
     'menu.widgetEdit': 'Widget Edit',
     'menu.fragments': 'Fragments',
@@ -203,6 +204,15 @@ export default {
     'fragment.settings': 'Enable Editing of fragment with empty default gui',
     'fragment.settings.alert.success': 'The settings have been updated',
     'fragment.settings.alert.error': 'The settings have not been updated',
+    'fileBrowser.list.upLink': 'up..',
+    'fileBrowser.list.size': 'Size',
+    'fileBrowser.list.lastModifiedTime': 'Last Edit',
+    'fileBrowser.list.empty': 'This folder is empty',
+    'fileBrowser.createTextFile': 'Create text file',
+    'fileBrowser.createFolder': 'Create folder',
+    'fileBrowser.uploadFile': 'Upload',
+    'fileBrowser.downloadFile': 'Download',
+    'fileBrowser.help': 'The FILE BROWSER section lets system administrators can browse the File System folders.',
     'pages.pageForm.info': 'Info',
     'pages.pageForm.pageGroups': 'Page groups',
     'pages.pageForm.settings': 'Settings',

src/locales/it.js

@@ -108,6 +108,7 @@ export default {
     'menu.dataModel': 'Data Model',
     'menu.components': 'Componenti',
     'menu.configuration': 'Impostazioni',
+    'menu.fileBrowser': 'File browser',
     'menu.widgets': 'Widgets',
     'menu.widgetEdit': 'Modifica Widget',
     'menu.fragments': 'Frammenti',
@@ -203,6 +204,15 @@ export default {
     'fragment.settings': 'Abilita la creazione di fragment con default GUI vuota',
     'fragment.settings.alert.success': 'Le impostazioni sono state aggiornate',
     'fragment.settings.alert.error': 'Le impostazioni non sono state aggiornate',
+    'fileBrowser.list.upLink': 'up..',
+    'fileBrowser.list.size': 'Dimensione',
+    'fileBrowser.list.lastModifiedTime': 'Ultima modifica',
+    'fileBrowser.list.empty': 'Questa cartella è vuota',
+    'fileBrowser.createTextFile': 'Crea file di testo',
+    'fileBrowser.createFolder': 'Crea cartella',
+    'fileBrowser.uploadFile': 'Upload',
+    'fileBrowser.downloadFile': 'Download',
+    'fileBrowser.help': 'La sezione FILE BROWSER permette di navigare le cartelle del file system.',
     'pages.pageForm.info': 'Info',
     'pages.pageForm.pageGroups': 'Gruppi',
     'pages.pageForm.settings': 'Configurazione',

src/state/file-browser/actions.js

@@ -0,0 +1,53 @@
+import { getFileBrowser } from 'api/fileBrowser';
+import { addErrors } from 'state/errors/actions';
+import { SET_FILE_LIST, SET_PATH_INFO } from 'state/file-browser/types';
+import { toggleLoading } from 'state/loading/actions';
+
+export const setFileList = fileList => ({
+  type: SET_FILE_LIST,
+  payload: {
+    fileList,
+  },
+});
+
+export const setPathInfo = pathInfo => ({
+  type: SET_PATH_INFO,
+  payload: {
+    pathInfo,
+  },
+});
+
+export const wrapApiCall = apiFunc => (...args) => async (dispatch) => {
+  const response = await apiFunc(...args);
+  const contentType = response.headers.get('content-type');
+  if (contentType && contentType.includes('application/json')) {
+    const json = await response.json();
+    if (response.ok) {
+      return json;
+    }
+    dispatch(addErrors(json.errors.map(e => e.message)));
+    throw json;
+  }
+  throw new TypeError('No JSON content-type in response headers');
+};
+
+
+// thunks
+export const fetchFileList = (protectedFolder = '', path = '') => dispatch =>
+  new Promise((resolve) => {
+    dispatch(toggleLoading('files'));
+    const queryString = [];
+    if ((protectedFolder !== '') && (protectedFolder !== null)) {
+      queryString.push(`protectedFolder=${protectedFolder}`);
+    }
+    if (path) {
+      queryString.push(`currentPath=${path}`);
+    }
+    const getFileBrowserApi = wrapApiCall(getFileBrowser);
+    getFileBrowserApi((`?${queryString.join('&')}`))(dispatch).then((response) => {
+      dispatch(setFileList(response.payload));
+      dispatch(setPathInfo(response.metaData));
+      dispatch(toggleLoading('files'));
+      resolve();
+    }).catch(() => {});
+  });

src/state/file-browser/reducer.js

@@ -0,0 +1,36 @@
+import { combineReducers } from 'redux';
+import { SET_FILE_LIST, SET_PATH_INFO } from 'state/file-browser/types';
+
+const defaultState = {
+  list: [],
+  pathInfo: {
+    protectedFolder: null,
+    prevPath: '',
+    currentPath: '',
+  },
+};
+
+const list = (state = defaultState.list, action = {}) => {
+  switch (action.type) {
+    case SET_FILE_LIST: {
+      return action.payload.fileList || defaultState.list;
+    }
+    default:
+      return state;
+  }
+};
+
+const pathInfo = (state = defaultState.pathInfo, action = {}) => {
+  switch (action.type) {
+    case SET_PATH_INFO: {
+      return Object.assign({}, defaultState.pathInfo, action.payload.pathInfo);
+    }
+    default:
+      return state;
+  }
+};
+
+export default combineReducers({
+  list,
+  pathInfo,
+});

src/state/file-browser/selectors.js

@@ -0,0 +1,13 @@
+import { createSelector } from 'reselect';
+
+export const getFileBrowser = state => state.fileBrowser;
+
+export const getFileList = createSelector(
+  getFileBrowser,
+  fileBrowser => fileBrowser.list,
+);
+
+export const getPathInfo = createSelector(
+  getFileBrowser,
+  fileBrowser => fileBrowser.pathInfo,
+);

src/state/file-browser/types.js

@@ -0,0 +1,2 @@
+export const SET_FILE_LIST = 'filebrowser/set-file-list';
+export const SET_PATH_INFO = 'filebrowser/set-path-info';

src/state/rootReducer.js

@@ -30,6 +30,7 @@ import permissions from 'state/permissions/reducer';
 import alerts from 'state/alerts/reducer';
 import configuration from 'state/reload-configuration/reducer';
 import dashboard from 'state/dashboard/reducer';
+import fileBrowser from 'state/file-browser/reducer';
 
 const reducerDef = {
   activityStream,
@@ -42,6 +43,7 @@ const reducerDef = {
   dataModels,
   dataTypes,
   errors,
+  fileBrowser,
   form,
   fragments,
   groups,

src/ui/app/App.js

@@ -54,7 +54,7 @@ import {
   ROUTE_ROLE_DETAIL,
   ROUTE_RELOAD_CONFIG,
   ROUTE_RELOAD_CONFIRM,
-
+  ROUTE_FILE_BROWSER,
   ROUTE_PLUGIN_CONFIG_PAGE,
 } from 'app-init/router';
 
@@ -110,6 +110,7 @@ import ReloadConfigPage from 'ui/reload-configuration/ReloadConfigPage';
 import ReloadConfirmPage from 'ui/reload-configuration/ReloadConfirmPage';
 
 import PluginConfigPageContainer from 'ui/integrations/PluginConfigPageContainer';
+import FileBrowserPage from 'ui/file-browser/list/ListFilesPage';
 
 const App = ({ route, username }) => {
   if (username === null && route !== ROUTE_HOME && route) {
@@ -174,6 +175,7 @@ const App = ({ route, username }) => {
     case ROUTE_DATA_TYPE_ATTRIBUTE_ADD: return <AddDataTypeAttributePage />;
     case ROUTE_DATA_TYPE_ATTRIBUTE_EDIT: return <EditDataTypeAttributePage />;
     case ROUTE_ATTRIBUTE_MONOLIST_ADD: return <MonolistPageContainer />;
+    case ROUTE_FILE_BROWSER: return <FileBrowserPage />;
     default: return <NotFoundPage />;
   }
 };