-
-
-
-
-
- - Acme -
-
-
-
+ Some files or folders need to be renamed, because their name is invalid or you have not the permission to overwrite them
- Pages in Storybook -
-- We recommend building UIs with a - - - - component-driven - - - - process starting with atomic components and ending with pages. -
-- Render pages with mock data. This makes it easy to build and review page states without needing to navigate to them in your app. Here are some handy patterns for managing page data in Storybook: -
--
-
- - Use a higher-level connected component. Storybook helps you compose such data from the "args" of child component stories - -
- - Assemble data in the page component from your services. You can mock these services out using Storybook. - -
- Get a guided tutorial on component-driven development at - - - Learn Storybook - - . Read more in the - - - docs - - . -
-
- Tip
-
- Adjust the width of the canvas with the
-
-
- Viewports addon in the toolbar
-
-
-
-
-
-
+ Cancel
+
- Acme -
-- Pages in Storybook -
-- We recommend building UIs with a - - - - component-driven - - - - process starting with atomic components and ending with pages. -
-- Render pages with mock data. This makes it easy to build and review page states without needing to navigate to them in your app. Here are some handy patterns for managing page data in Storybook: -
--
-
- - Use a higher-level connected component. Storybook helps you compose such data from the "args" of child component stories - -
- - Assemble data in the page component from your services. You can mock these services out using Storybook. - -
- Get a guided tutorial on component-driven development at - - - Learn Storybook - - . Read more in the - - - docs - - . -
-
-
- Tip
-
- Adjust the width of the canvas with the
-
-
- Viewports addon in the toolbar
-
-
-
-
-
-
+
+ ((resolve, reject) => {
- let config = {
- headers: {
- "X-FF-PATH": path
- }
+import {FsEntity} from "./filesystemTypes";
+import {filesystemPath, hostname} from "./api";
+import Axios, {AxiosResponse} from "axios";
+import {constants} from "../constants";
+
+import store from "../redux/store";
+import {ApiAction, ApiActionStatus, ApiActionType} from "../redux/actions/apiActionsTypes";
+import {addApiAction, changeStatus, nextFsEntity} from "../redux/actions/apiActions";
+import {addToContents, removeFromContents} from "../redux/actions/filesystem";
+import {EditableFileWithPreflightInfo, PreflightEntity} from "../../components/pages/filesytem/upload/preflightTypes";
+import {isFsEntityInFolder} from "../methods/filesystem";
+
+
+const fhHostname = constants.url.FH_URL;
+
+export const getFolderContents = (path: string) => {
+ console.log("[Get folder content", path)
+ return new Promise>((resolve, reject) => {
+ let config = {
+ headers: {
+ "X-FF-PATH": path
+ }
+ };
+ Axios.get(hostname + filesystemPath + "contents", config)
+ .then((response: AxiosResponse) => resolve(response))
+ .catch((error) => reject(error));
+ })
+}
+
+
+export const uploadPreflight = (
+ files: File[] | EditableFileWithPreflightInfo[],
+ parentFolderID: string
+): Promise => {
+ const postData = files.map((f: File | EditableFileWithPreflightInfo) => ({
+ // @ts-ignore
+ name: f.newName ?? f.name,
+ // @ts-ignore
+ path: f.newPath ?? f.path,
+ // @ts-ignore
+ mimeType: f.type,
+ size: f.size
+ }));
+ return new Promise((resolve, reject) => {
+ Axios.post(
+ hostname + filesystemPath + parentFolderID + "/upload/preflight", postData
+ )
+ .then((response: AxiosResponse) => {
+ resolve(response.data);
+ })
+ .catch((error: Error) => reject(error));
+ });
+};
+
+export const uploadFiles = (files: File[] | EditableFileWithPreflightInfo[], parentFolderID: string) => {
+ console.log("[API filesystem] uploading files to folderID", parentFolderID , files);
+ const apiCall = (file: File | EditableFileWithPreflightInfo) => {
+ return new Promise((resolve, reject) => {
+ let formData = new FormData();
+ formData.append("file", file);
+ Axios.post<[FsEntity]>(
+ fhHostname + "/upload/" + parentFolderID,
+ formData,
+ {
+ headers: {
+ "Content-Type": "multipart/form-data",
+ // @ts-ignore
+ "X-FF-NAME": file.newName ?? file.name,
+ // @ts-ignore
+ "X-FF-PATH": file.newPath ?? file.path,
+ "X-FF-SIZE": file.size
+ },
+ onUploadProgress(progress) {
+ console.log("upload progress:", progress);
+ }
+ }
+ )
+ .then((response: AxiosResponse<[FsEntity]>) => {
+ const currentPath = store.getState().filesystem.currentPath;
+
+ const fsEntityToShow = response.data.find((fsEntity: FsEntity) =>
+ isFsEntityInFolder(fsEntity, currentPath)
+ )
+
+ if (fsEntityToShow) {
+ store.dispatch(addToContents(fsEntityToShow));
+ }
+ resolve(response);
+ })
+ .catch((error) => reject(error));
+ });
+ };
+ handleMultipleApiActions(files, apiCall, ApiActionType.UPLOAD);
+};
+
+
+export const deleteFsEntities = (files: FsEntity[]) => {
+ const apiCall = (fsEntity: FsEntity) => {
+ return new Promise((resolve, reject) => {
+ Axios.delete(
+ fhHostname + "/delete/" + fsEntity.fileSystemId
+ )
+ .then((response: AxiosResponse) => {
+ response.data.forEach((e) => store.dispatch(removeFromContents(e)));
+ resolve(response);
+ })
+ .catch((error) => reject(error));
+ });
};
+ handleMultipleApiActions(files, apiCall, ApiActionType.DELETE);
+};
+
+
+function handleMultipleApiActions(
+ items: Type[],
+ action: (a: Type) => Promise,
+ type: ApiActionType,
+ apiAction?: ApiAction
+) {
+ let currentIndex;
+ if (!apiAction) {
+ currentIndex = 0;
+ apiAction = {
+ key: Date.now() + type,
+ timestamp: Date.now(),
+ type: type,
+ status: ApiActionStatus.ONGOING,
+ progress: currentIndex,
+ totalAmount: items.length,
+ currentFsEntity: items[0]
+ };
+ store.dispatch(addApiAction(apiAction));
+ } else {
+ // get the info from the store
+ apiAction = store
+ .getState()
+ .apiActions.actions.find((a: ApiAction) => a.key === apiAction?.key);
+
+ if (
+ !apiAction ||
+ apiAction.status === ApiActionStatus.ABORTED ||
+ apiAction.status === ApiActionStatus.ERROR
+ ) {
+ return;
+ }
+ currentIndex = apiAction.progress + 1;
+ console.log(
+ "current amout " + currentIndex + " total: " + apiAction.totalAmount
+ );
+
+ if (currentIndex === apiAction.totalAmount) {
+ store.dispatch(
+ changeStatus({key: apiAction.key, status: ApiActionStatus.FINISHED})
+ );
+ return;
+ } else {
+ console.log("dispatch nextFsEntity");
+ store.dispatch(
+ nextFsEntity({
+ key: apiAction.key,
+ currentFsEntity: items[currentIndex]
+ })
+ );
+ }
+ }
- Axios.get(hostname + filesystemPath + "/contents", config)
- .then((response) => resolve(response.data))
- .catch((error) => reject(error));
- });
+ action(items[currentIndex])
+ .then((response) => {
+ console.log("[API filesystem] handleMultipleApiActions next iteration");
+ handleMultipleApiActions(items, action, type, apiAction);
+ })
+ .catch((error) => {
+ console.log("errorr", error);
+ store.dispatch(
+ changeStatus({
+ key: apiAction?.key ?? "ts sucks",
+ status: ApiActionStatus.ERROR,
+ error: error.response?.data.message
+ })
+ );
+ });
+}
diff --git a/src/background/api/filesystemTypes.ts b/src/background/api/filesystemTypes.ts
index 8d610d09..66cb3e3d 100644
--- a/src/background/api/filesystemTypes.ts
+++ b/src/background/api/filesystemTypes.ts
@@ -1,5 +1,3 @@
-import { UserState } from "../redux/actions/userTypes";
-
export interface UsersSet {
groups: string[];
id: number;
@@ -12,6 +10,7 @@ export interface PermissionSet {
visibleForGroups: string[];
visibleForUsers: UsersSet[];
}
+
export interface User {
id: number;
username: string;
diff --git a/src/background/constants.ts b/src/background/constants.ts
index a37f61e7..1a65fcfe 100644
--- a/src/background/constants.ts
+++ b/src/background/constants.ts
@@ -1,19 +1,24 @@
interface constantsdef {
- url: { API_URL: string };
+ url: { API_URL: string
+ FH_URL: string};
}
const prod: constantsdef = {
url: {
- API_URL: window.location.origin + "/api"
+ API_URL: window.location.origin + "/api",
+ FH_URL: window.location.origin + "/data"
}
};
const dev: constantsdef = {
url: {
- API_URL: "https://demo.filefighter.de/api"
- // API_URL: 'http://localhost:8081/https://filefighter.de/api',
- // API_URL: 'http://localhost:8080',
- //API_URL: 'https://filefighter.de/api',
+ API_URL: "https://demo.filefighter.de/api",
+ // API_URL: "http://localhost:8080",
+ //API_URL: "http://localhost/api",
+ //FH_URL: "http://localhost:5000/data"
+ //FH_URL: "http://localhost/data"
+ FH_URL: "https://demo.filefighter.de/data"
+
}
};
export const constants = process.env.NODE_ENV === "development" ? dev : prod;
diff --git a/src/background/methods/arrays.ts b/src/background/methods/arrays.ts
new file mode 100644
index 00000000..84169bd4
--- /dev/null
+++ b/src/background/methods/arrays.ts
@@ -0,0 +1,16 @@
+export function divideArrayByCondition(
+ input: T[],
+ condition: (a: T) => boolean
+) {
+ let output: T[][] = [[], []];
+
+ input.forEach((el: T) => {
+ if (condition(el)) {
+ output[0].push(el);
+ } else {
+ output[1].push(el);
+ }
+ });
+
+ return output;
+}
diff --git a/src/background/methods/filesystem.ts b/src/background/methods/filesystem.ts
new file mode 100644
index 00000000..943c2017
--- /dev/null
+++ b/src/background/methods/filesystem.ts
@@ -0,0 +1,24 @@
+import {FsEntity} from "../api/filesystemTypes";
+
+export const getPathWithoutName = (
+ pathWithName: string,
+ name: string
+): string => {
+ return pathWithName.substr(0, pathWithName.lastIndexOf(name.toLowerCase()));
+};
+
+
+export const removeTrailingBackslash = (path : string): string => {
+ if (path.lastIndexOf("/") +1 === path.length){
+ return path.substr(0,path.length -1)
+ }
+ return path
+}
+
+
+export const isFsEntityInFolder = (fsEntity: FsEntity, path :string) =>{
+ let fsEntityPath = getPathWithoutName(fsEntity.path,fsEntity.name);
+ fsEntityPath = removeTrailingBackslash(fsEntityPath);
+
+ return fsEntityPath === path.toLocaleLowerCase();
+}
diff --git a/src/background/redux/actions/apiActions.ts b/src/background/redux/actions/apiActions.ts
new file mode 100644
index 00000000..64c919a3
--- /dev/null
+++ b/src/background/redux/actions/apiActions.ts
@@ -0,0 +1,34 @@
+import {
+ ADD_API_ACTION,
+ AddApiAction,
+ ApiAction,
+ CHANGE_STATUS,
+ ChangeStatus,
+ ChangeStatusPayload,
+ NEXT_FS_ENTITY,
+ NextFsEntity,
+ NextFsEntityPayload,
+ REPLACE_API_ACTION, ReplaceApiAction
+} from "./apiActionsTypes";
+
+
+export const addApiAction = (content: ApiAction): AddApiAction =>({
+ type: ADD_API_ACTION,
+ payload: content,
+})
+
+export const replaceApiAction = (content: ApiAction): ReplaceApiAction =>({
+ type: REPLACE_API_ACTION,
+ payload: content,
+})
+
+export const changeStatus = (content: ChangeStatusPayload) : ChangeStatus =>({
+ type: CHANGE_STATUS,
+ payload: content,
+})
+
+
+export const nextFsEntity = (content: NextFsEntityPayload) : NextFsEntity=>({
+ type: NEXT_FS_ENTITY,
+ payload: content
+})
diff --git a/src/background/redux/actions/apiActionsTypes.ts b/src/background/redux/actions/apiActionsTypes.ts
new file mode 100644
index 00000000..d48f6350
--- /dev/null
+++ b/src/background/redux/actions/apiActionsTypes.ts
@@ -0,0 +1,69 @@
+import { FsEntity } from "../../api/filesystemTypes";
+
+export const ADD_API_ACTION = "ADD_API_ACTION";
+export const REPLACE_API_ACTION = "REPLACE_API_ACTION";
+export const CHANGE_STATUS = "CHANGE_STATUS";
+export const NEXT_FS_ENTITY = "NEXT_FS_ENTITY";
+
+export interface ApiActionsState {
+ actions: ApiAction[];
+}
+
+export interface ApiAction {
+ key: string;
+ timestamp: number;
+ type: ApiActionType;
+ status: ApiActionStatus;
+ progress: number;
+ totalAmount: number;
+ currentFsEntity: FsEntity | File;
+ error?: string;
+}
+
+export enum ApiActionType {
+ UPLOAD = "Uploading",
+ DELETE = "Deleting"
+}
+
+export enum ApiActionStatus {
+ ONGOING = "Ongoing",
+ ABORTED = "Aborted",
+ ERROR = "Error",
+ FINISHED = "Finished"
+}
+
+export interface AddApiAction {
+ type: typeof ADD_API_ACTION;
+ payload: ApiAction;
+}
+export interface ReplaceApiAction {
+ type: typeof REPLACE_API_ACTION;
+ payload: ApiAction;
+}
+
+export interface ChangeStatusPayload {
+ key: string;
+ status: ApiActionStatus;
+ error?: string;
+}
+
+export interface ChangeStatus {
+ type: typeof CHANGE_STATUS;
+ payload: ChangeStatusPayload;
+}
+
+export interface NextFsEntityPayload {
+ key: string;
+ currentFsEntity: FsEntity | File;
+}
+
+export interface NextFsEntity {
+ type: typeof NEXT_FS_ENTITY;
+ payload: NextFsEntityPayload;
+}
+
+export type ApiActionsTypes =
+ | ChangeStatus
+ | ReplaceApiAction
+ | AddApiAction
+ | NextFsEntity;
diff --git a/src/background/redux/actions/filesystem.ts b/src/background/redux/actions/filesystem.ts
index acb7c469..2b5b6704 100644
--- a/src/background/redux/actions/filesystem.ts
+++ b/src/background/redux/actions/filesystem.ts
@@ -1,21 +1,63 @@
-import {FsEntity} from "../../api/filesystemTypes";
-import {ADD_TO_SELECTED, AddToSelected, CLEAR_SELECTED, ClearSelected, REMOVE_FROM_SELECTED, RemoveFromSelected, REPLACE_SELECTED, ReplaceSelected} from "./filesystemTypes";
+import { FsEntity } from "../../api/filesystemTypes";
+import {
+ ADD_TO_CONTENTS,
+ ADD_TO_SELECTED,
+ AddToContents,
+ AddToSelected,
+ CLEAR_SELECTED,
+ ClearSelected,
+ REMOVE_FROM_CONTENTS,
+ REMOVE_FROM_SELECTED,
+ RemoveFromContents,
+ RemoveFromSelected,
+ REPLACE_SELECTED,
+ ReplaceSelected,
+ SET_CONTENTS,
+ SET_CURRENT_FSITEMID, SET_CURRENT_PATH,
+ SetContents,
+ SetCurrentFsItemId, SetCurrentPath
+} from "./filesystemTypes";
export const addToSelected = (content: FsEntity): AddToSelected => ({
- type: ADD_TO_SELECTED,
- payload: content,
-})
+ type: ADD_TO_SELECTED,
+ payload: content
+});
export const removeFromSelected = (content: FsEntity): RemoveFromSelected => ({
- type: REMOVE_FROM_SELECTED,
- payload: content,
-})
+ type: REMOVE_FROM_SELECTED,
+ payload: content
+});
export const clearSelected = (): ClearSelected => ({
- type: CLEAR_SELECTED,
-})
+ type: CLEAR_SELECTED
+});
export const replaceSelected = (content: FsEntity[]): ReplaceSelected => ({
- type: REPLACE_SELECTED,
- payload: content,
-})
+ type: REPLACE_SELECTED,
+ payload: content
+});
+
+export const setContents = (content: FsEntity[]): SetContents => ({
+ type: SET_CONTENTS,
+ payload: content
+});
+
+export const addToContents = (content: FsEntity): AddToContents => ({
+ type: ADD_TO_CONTENTS,
+ payload: content
+});
+
+export const removeFromContents = (content: FsEntity): RemoveFromContents => ({
+ type: REMOVE_FROM_CONTENTS,
+ payload: content
+});
+
+export const setCurrentFsItemId = (content: string): SetCurrentFsItemId => ({
+ type: SET_CURRENT_FSITEMID,
+ payload: content
+});
+
+export const setCurrentPath = (content: string): SetCurrentPath => ({
+ type: SET_CURRENT_PATH,
+ payload: content
+});
diff --git a/src/background/redux/actions/filesystemTypes.ts b/src/background/redux/actions/filesystemTypes.ts
index 32854212..57e5d2f4 100644
--- a/src/background/redux/actions/filesystemTypes.ts
+++ b/src/background/redux/actions/filesystemTypes.ts
@@ -1,30 +1,70 @@
-import {FsEntity} from "../../api/filesystemTypes";
+import { FsEntity } from "../../api/filesystemTypes";
export const ADD_TO_SELECTED = "ADD_TO_SELECTED";
export const CLEAR_SELECTED = "CLEAR_SELECTED";
export const REMOVE_FROM_SELECTED = "REMOVE_FROM_SELECTED";
export const REPLACE_SELECTED = "REPLACE_SELECTED";
+export const SET_CURRENT_FSITEMID = "SET_CURRENT_FSITEMID";
+export const SET_CURRENT_PATH = "SET_CURRENT_PATH";
+export const SET_CONTENTS = "SET_CONTENTS";
+export const ADD_TO_CONTENTS = "ADD_TO_CONTENTS";
+export const REMOVE_FROM_CONTENTS = "REMOVE_FROM_CONTENTS";
export interface FilesystemState {
- selectedFsEnties: FsEntity[],
+ selectedFsEntities: FsEntity[];
+ folderContents: FsEntity[];
+ currentFsItemId: string;
+ currentPath: string
}
export interface AddToSelected {
- type: typeof ADD_TO_SELECTED,
- payload: FsEntity,
+ type: typeof ADD_TO_SELECTED;
+ payload: FsEntity;
}
export interface RemoveFromSelected {
- type: typeof REMOVE_FROM_SELECTED,
- payload: FsEntity,
+ type: typeof REMOVE_FROM_SELECTED;
+ payload: FsEntity;
}
export interface ClearSelected {
- type: typeof CLEAR_SELECTED,
+ type: typeof CLEAR_SELECTED;
}
export interface ReplaceSelected {
- type: typeof REPLACE_SELECTED,
- payload: FsEntity[],
+ type: typeof REPLACE_SELECTED;
+ payload: FsEntity[];
}
-export type FilesystemActionTypes = AddToSelected | RemoveFromSelected | ClearSelected | ReplaceSelected;
+export interface SetCurrentFsItemId {
+ type: typeof SET_CURRENT_FSITEMID;
+ payload: string;
+}
+export interface SetCurrentPath {
+ type: typeof SET_CURRENT_PATH;
+ payload: string;
+}
+
+export interface SetContents {
+ type: typeof SET_CONTENTS;
+ payload: FsEntity[];
+}
+
+export interface AddToContents {
+ type: typeof ADD_TO_CONTENTS;
+ payload: FsEntity;
+}
+export interface RemoveFromContents {
+ type: typeof REMOVE_FROM_CONTENTS;
+ payload: FsEntity;
+}
+
+export type FilesystemActionTypes =
+ | AddToSelected
+ | RemoveFromSelected
+ | ClearSelected
+ | ReplaceSelected
+ | SetContents
+ | AddToContents
+ | RemoveFromContents
+ | SetCurrentFsItemId
+ | SetCurrentPath;
diff --git a/src/background/redux/reducers/apiActions.ts b/src/background/redux/reducers/apiActions.ts
new file mode 100644
index 00000000..6b243ba8
--- /dev/null
+++ b/src/background/redux/reducers/apiActions.ts
@@ -0,0 +1,76 @@
+import {
+ ADD_API_ACTION,
+ ApiAction,
+ ApiActionsState,
+ ApiActionsTypes,
+ CHANGE_STATUS,
+ NEXT_FS_ENTITY,
+ REPLACE_API_ACTION
+} from "../actions/apiActionsTypes";
+
+const initialState: ApiActionsState = {
+ actions: []
+};
+
+export default function apiActions(
+ state = initialState,
+ action: ApiActionsTypes
+) {
+ switch (action.type) {
+ case ADD_API_ACTION: {
+ return {
+ actions: [...state.actions, action.payload]
+ };
+ }
+ case REPLACE_API_ACTION: {
+ return {
+ actions: [
+ ...state.actions.filter(
+ (a: ApiAction) => a.key !== action.payload.key
+ ),
+ action.payload
+ ]
+ };
+ }
+ case CHANGE_STATUS: {
+ let actionToChange = state.actions.find(
+ (a: ApiAction) => a.key === action.payload.key
+ );
+ console.log(actionToChange);
+ console.log(action.payload);
+ if (actionToChange) {
+ actionToChange.status = action.payload.status;
+ actionToChange.error = action.payload.error;
+ return {
+ actions: [
+ ...state.actions.filter(
+ (a: ApiAction) => a.key !== action.payload.key
+ ),
+ actionToChange
+ ]
+ };
+ } else return state;
+ }
+ case NEXT_FS_ENTITY: {
+ let actionToChange = state.actions.find(
+ (a: ApiAction) => a.key === action.payload.key
+ );
+ console.log("[Reducer ApiAction] new progress", actionToChange);
+ if (actionToChange) {
+ actionToChange.currentFsEntity = action.payload.currentFsEntity;
+ actionToChange.progress = actionToChange.progress + 1;
+
+ return {
+ actions: [
+ ...state.actions.filter(
+ (a: ApiAction) => a.key !== action.payload.key
+ ),
+ actionToChange
+ ]
+ };
+ } else return state;
+ }
+ default:
+ return state;
+ }
+}
diff --git a/src/background/redux/reducers/filesystem.ts b/src/background/redux/reducers/filesystem.ts
index b0d61e97..9f10f66f 100644
--- a/src/background/redux/reducers/filesystem.ts
+++ b/src/background/redux/reducers/filesystem.ts
@@ -1,46 +1,111 @@
import {
- ADD_TO_SELECTED,
- CLEAR_SELECTED,
- FilesystemActionTypes,
- FilesystemState,
- REMOVE_FROM_SELECTED,
- REPLACE_SELECTED
+ ADD_TO_CONTENTS,
+ ADD_TO_SELECTED,
+ CLEAR_SELECTED,
+ FilesystemActionTypes,
+ FilesystemState,
+ REMOVE_FROM_CONTENTS,
+ REMOVE_FROM_SELECTED,
+ REPLACE_SELECTED,
+ SET_CONTENTS,
+ SET_CURRENT_FSITEMID,
+ SET_CURRENT_PATH
} from "../actions/filesystemTypes";
-import { FsEntity } from "../../api/filesystemTypes";
+import {FsEntity} from "../../api/filesystemTypes";
const initialState: FilesystemState = {
- selectedFsEnties: []
+ selectedFsEntities: [],
+ folderContents: [],
+ currentFsItemId: "-1",
+ currentPath: ""
};
export default function filesystem(
- state = initialState,
- action: FilesystemActionTypes
-) {
- switch (action.type) {
- case ADD_TO_SELECTED: {
- console.log("[REDUX] ADD_TO_SELECTED", action.payload);
- return {
- selectedFsEnties: [...state.selectedFsEnties, action.payload] //concat because it does not modify the original array
- };
+ state = initialState,
+ action: FilesystemActionTypes
+): FilesystemState {
+ switch (action.type) {
+ case ADD_TO_SELECTED: {
+ console.log("[REDUX] ADD_TO_SELECTED", action.payload);
+ return {
+ selectedFsEntities: [...state.selectedFsEntities, action.payload], //concat because it does not modify the original array
+ folderContents: state.folderContents,
+ currentFsItemId: state.currentFsItemId,
+ currentPath: state.currentPath
+ };
+ }
+ case REMOVE_FROM_SELECTED: {
+ return {
+ selectedFsEntities: state.selectedFsEntities.filter(
+ (e: FsEntity) => e.fileSystemId !== action.payload.fileSystemId
+ ), //filter return a new array
+ folderContents: state.folderContents,
+ currentFsItemId: state.currentFsItemId,
+ currentPath: state.currentPath
+ };
+ }
+ case CLEAR_SELECTED: {
+ return {
+ selectedFsEntities: [],
+ folderContents: state.folderContents,
+ currentFsItemId: state.currentFsItemId,
+ currentPath: state.currentPath
+ };
+ }
+ case REPLACE_SELECTED: {
+ return {
+ selectedFsEntities: action.payload,
+ folderContents: state.folderContents,
+ currentFsItemId: state.currentFsItemId,
+ currentPath: state.currentPath
+ };
+ }
+ case SET_CONTENTS: {
+ return {
+ selectedFsEntities: state.selectedFsEntities,
+ folderContents: action.payload,
+ currentFsItemId: state.currentFsItemId,
+ currentPath: state.currentPath
+ };
+ }
+ case ADD_TO_CONTENTS: {
+ return {
+ selectedFsEntities: state.selectedFsEntities,
+ folderContents: [...state.folderContents.filter((fsEntity: FsEntity) => dontReplaceFsEntity(fsEntity, action.payload)), action.payload],
+ currentFsItemId: state.currentFsItemId,
+ currentPath: state.currentPath
+ };
+ }
+ case REMOVE_FROM_CONTENTS: {
+ return {
+ selectedFsEntities: state.selectedFsEntities,
+ folderContents: state.folderContents.filter(
+ (fse: FsEntity) => fse.fileSystemId !== action.payload.fileSystemId
+ ),
+ currentFsItemId: state.currentFsItemId,
+ currentPath: state.currentPath
+ };
+ }
+ case SET_CURRENT_FSITEMID: {
+ return {
+ selectedFsEntities: state.selectedFsEntities,
+ folderContents: state.folderContents,
+ currentFsItemId: action.payload,
+ currentPath: state.currentPath
+ };
+ }
+ case SET_CURRENT_PATH: {
+ return {
+ selectedFsEntities: state.selectedFsEntities,
+ folderContents: state.folderContents,
+ currentFsItemId: state.currentFsItemId,
+ currentPath: action.payload
+ };
+ }
+ default:
+ return state;
}
- case REMOVE_FROM_SELECTED: {
- return {
- selectedFsEnties: state.selectedFsEnties.filter(
- (e: FsEntity) => e.fileSystemId !== action.payload.fileSystemId
- ) //filter return a new array
- };
- }
- case CLEAR_SELECTED: {
- return {
- selectedFsEnties: []
- };
- }
- case REPLACE_SELECTED: {
- return {
- selectedFsEnties: action.payload
- };
- }
- default:
- return state;
- }
+}
+const dontReplaceFsEntity = (existingFsEntity: FsEntity, newFsEntity: FsEntity): boolean => {
+ return existingFsEntity.fileSystemId !== newFsEntity.fileSystemId && existingFsEntity.path !== newFsEntity.path;
}
diff --git a/src/background/redux/reducers/index.tsx b/src/background/redux/reducers/index.tsx
index ae39a403..32328ab4 100644
--- a/src/background/redux/reducers/index.tsx
+++ b/src/background/redux/reducers/index.tsx
@@ -2,7 +2,8 @@ import { combineReducers } from "redux";
import tokens from "./tokens";
import user from "./user";
import filesystem from "./filesystem";
+import apiActions from "./apiActions";
// this combines all the stores from the reducers
-export default combineReducers({ tokens, user, filesystem });
+export default combineReducers({ tokens, user, filesystem, apiActions });
diff --git a/src/background/redux/store.tsx b/src/background/redux/store.tsx
index 97ab1ba9..bb41d320 100644
--- a/src/background/redux/store.tsx
+++ b/src/background/redux/store.tsx
@@ -3,4 +3,6 @@ import rootReducer from "./reducers";
export default createStore(rootReducer);
-export type RootState = ReturnType;
\ No newline at end of file
+
+export type RootState = ReturnType;
+
diff --git a/src/components/App.tsx b/src/components/App.tsx
index 2540483b..d130d644 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -46,11 +46,12 @@ type PropsFromRedux = ConnectedProps;
type Props = PropsFromRedux;
function App(props: Props): ReactElement {
- console.log("[App] props.tokens: ");
- console.log(props.tokens.refreshToken);
- console.log(props.tokens);
- console.log(props.user);
- console.log("[App]---------------");
+ console.log(
+ "[App] props.tokens: ",
+ props.tokens.refreshToken,
+ props.tokens,
+ props.user
+ );
if (props.tokens.checkedCookies === CookieStatus.FINISHED) {
if (props.tokens.refreshToken && props.tokens.accessToken?.token) {
@@ -59,11 +60,9 @@ function App(props: Props): ReactElement {
+
;
type Props = PropsFromRedux & {};
function FileList(props: Props): ReactElement {
- let location = useLocation();
-
- const [path, setPath] = useState(
- location.pathname.slice(filesBaseUrl.length) || "/"
- );
- const [filesAndFolders, setFilesAndFolders] = useState(
- null
- );
- const [error, setError] = useState("");
- const [sortedBy, setSortedBy] = useState(null);
- const [sortIncreasing, setSortIncreasing] = useState(false);
- const allAreSelected =
- filesAndFolders?.length === props.filesystem.selectedFsEnties.length;
-
- const clearSelected = props.clearSelected;
-
- useEffect(() => {
- function updateStates(): void {
- getFolderContents(path)
- .then((response: FsEntity[]) => {
- console.log("got folder content");
- setFilesAndFolders([
- ...response.filter(
- (fsEntiy: FsEntity) => fsEntiy.type === "FOLDER"
- ),
- ...response.filter((fsEntiy: FsEntity) => fsEntiy.type !== "FOLDER")
- ]);
- setError("");
- })
- .catch((err) => {
- setError(err.response?.data?.message);
- setFilesAndFolders(null);
- });
+ let location = useLocation();
+
+ const [path, setPath] = useState(
+ location.pathname.slice(filesBaseUrl.length) || "/"
+ );
+
+ const filesAndFolders = props.filesystem.folderContents;
+ const setFilesAndFolders = props.setContents;
+ const [error, setError] = useState("");
+ const [sortedBy, setSortedBy] = useState(null);
+ const [sortIncreasing, setSortIncreasing] = useState(false);
+ const allAreSelected =
+ filesAndFolders?.length === props.filesystem.selectedFsEntities.length &&
+ !!filesAndFolders?.length;
+
+ const clearSelected = props.clearSelected;
+ const setContents = props.setContents;
+ const setCurrentPath = props.setCurrentPath;
+ const setCurrentFsItemId = props.setCurrentFsItemId;
+
+
+ useEffect(() => {
+ function updateStates(): void {
+ getFolderContents(path)
+ .then((response: AxiosResponse) => {
+ console.log("got folder content",response);
+
+ setContents([
+ ...response.data.filter(
+ (fsEntity: FsEntity) => fsEntity.type === "FOLDER"
+ ),
+ ...response.data.filter((fsEntity: FsEntity) => fsEntity.type !== "FOLDER")
+ ]);
+ setError("");
+ setCurrentFsItemId(response.headers["x-ff-current"]);
+ })
+ .catch((err) => {
+ setError(err.response?.data?.message);
+ setFilesAndFolders([]);
+ });
+ }
+
+ setPath(location.pathname.slice(filesBaseUrl.length) || "/");
+ setCurrentPath(path)
+ clearSelected();
+ updateStates();
+ }, [
+ setContents,
+ setCurrentFsItemId,
+ setFilesAndFolders,
+ clearSelected,
+ path,
+ setCurrentPath,
+ location
+ ]);
+
+ const handleSelectAllChanged = () => {
+ if (allAreSelected) {
+ props.clearSelected();
+ } else {
+ if (filesAndFolders) {
+ props.replaceSelected([...filesAndFolders]);
+ }
+ }
+ };
+
+ function handleSortClick(property: keyof FsEntity) {
+ if (!filesAndFolders || filesAndFolders.length < 2) return;
+ if (sortedBy === property) {
+ setSortIncreasing(!sortIncreasing);
+ } else {
+ setSortedBy(property);
+ setSortIncreasing(true);
+ }
+ let toSort = [...(filesAndFolders ?? [])];
+
+ if (property === "lastUpdated" || property === "size") {
+ toSort.sort((a, b) =>
+ a[property] - b[property] === 0
+ ? a.fileSystemId - b.fileSystemId
+ : a[property] - b[property]
+ );
+ } else if (property === "name" || property === "type") {
+ toSort.sort((a, b) =>
+ a[property].toLowerCase().localeCompare(b[property].toLowerCase()) === 0
+ ? a.fileSystemId - b.fileSystemId
+ : a[property].toLowerCase().localeCompare(b[property].toLowerCase())
+ );
+ } else if (property === "lastUpdatedBy") {
+ toSort.sort((a, b) =>
+ a.lastUpdatedBy.username
+ .toLowerCase()
+ .localeCompare(b.lastUpdatedBy.username.toLowerCase()) === 0
+ ? a.fileSystemId - b.fileSystemId
+ : a.lastUpdatedBy.username
+ .toLowerCase()
+ .localeCompare(b.lastUpdatedBy.username.toLowerCase())
+ );
+ }
+ setFilesAndFolders(sortIncreasing ? toSort.reverse() : toSort);
}
- setPath(location.pathname.slice(filesBaseUrl.length) || "/");
- clearSelected();
- updateStates();
- }, [clearSelected, path, location]);
-
- const handleSelectAllChanged = () => {
- if (allAreSelected) {
- props.clearSelected();
- } else {
- if (filesAndFolders) {
- props.replaceSelected([...filesAndFolders]);
- }
- }
- };
-
- function handleSortClick(property: keyof FsEntity) {
- if (!filesAndFolders || filesAndFolders.length < 2) return;
- if (sortedBy === property) {
- setSortIncreasing(!sortIncreasing);
- } else {
- setSortedBy(property);
- setSortIncreasing(true);
- }
- let toSort = [...(filesAndFolders ?? [])];
-
- if (property === "lastUpdated" || property === "size") {
- toSort.sort((a, b) =>
- a[property] - b[property] === 0
- ? a.fileSystemId - b.fileSystemId
- : a[property] - b[property]
- );
- } else if (property === "name" || property === "type") {
- toSort.sort((a, b) =>
- a[property].toLowerCase().localeCompare(b[property].toLowerCase()) === 0
- ? a.fileSystemId - b.fileSystemId
- : a[property].toLowerCase().localeCompare(b[property].toLowerCase())
- );
- } else if (property === "lastUpdatedBy") {
- toSort.sort((a, b) =>
- a.lastUpdatedBy.username
- .toLowerCase()
- .localeCompare(b.lastUpdatedBy.username.toLowerCase()) === 0
- ? a.fileSystemId - b.fileSystemId
- : a.lastUpdatedBy.username
- .toLowerCase()
- .localeCompare(b.lastUpdatedBy.username.toLowerCase())
- );
- }
- setFilesAndFolders(sortIncreasing ? toSort.reverse() : toSort);
- }
-
- console.log("[FileList path]" + path);
- return (
-
-
-
-
-
-
-
-
- {error ? (
-
-
- );
- })}
-
-
- );
+ console.log("[FileList path]" + path, filesAndFolders);
+ return (
+
+
+
+
+
+
+
+
+
+ {error ? (
+
+
+
+ );
+ })}
+
+
+ );
}
export default connector(FileList);
diff --git a/src/components/pages/filesytem/FileListItem.tsx b/src/components/pages/filesytem/FileListItem.tsx
index 85f4e20e..3b2d821f 100644
--- a/src/components/pages/filesytem/FileListItem.tsx
+++ b/src/components/pages/filesytem/FileListItem.tsx
@@ -27,7 +27,7 @@ import {
const mapState = (state: SystemState) => ({
filesystem: {
- selectedFsEnties: state.filesystem.selectedFsEnties
+ selectedFsEntities: state.filesystem.selectedFsEntities
}
});
@@ -47,7 +47,7 @@ type Props = PropsFromRedux & {
};
function FileListItem(props: Props): ReactElement {
- let isSelected = !!props.filesystem.selectedFsEnties.find(
+ let isSelected = !!props.filesystem.selectedFsEntities.find(
(e: FsEntity) => e.fileSystemId === props.fileListItem.fileSystemId
);
diff --git a/src/components/pages/filesytem/FilesBreadcrumb.tsx b/src/components/pages/filesytem/FilesBreadcrumb.tsx
index 5bbd7ea3..50d79f50 100644
--- a/src/components/pages/filesytem/FilesBreadcrumb.tsx
+++ b/src/components/pages/filesytem/FilesBreadcrumb.tsx
@@ -9,7 +9,6 @@ type Props = {
};
export function FilesBreadcrumb(props: Props): ReactElement {
- console.log("[FilesBreadcrumb]: " + props.path);
return (
props.setPath("/")}
>
- Home{" "}
+ Home
{props.path
.split("/")
diff --git a/src/components/pages/filesytem/Filesystem.stories.tsx b/src/components/pages/filesytem/Filesystem.stories.tsx
index 92fb69b3..b652f2a9 100644
--- a/src/components/pages/filesytem/Filesystem.stories.tsx
+++ b/src/components/pages/filesytem/Filesystem.stories.tsx
@@ -11,7 +11,7 @@ import axios from "axios";
import folderContentMock from "./__tests__/folderContentMock.json";
const mock = new MockAdapter(axios);
-const API_REQUEST = hostname + filesystemPath + "/contents";
+const API_REQUEST = hostname + filesystemPath + "contents";
storiesOf("Filesystem", module).add("default", () => {
mock.onGet(API_REQUEST).reply(200, folderContentMock);
diff --git a/src/components/pages/filesytem/Filesystem.tsx b/src/components/pages/filesytem/Filesystem.tsx
index b55a540b..a41b014a 100644
--- a/src/components/pages/filesytem/Filesystem.tsx
+++ b/src/components/pages/filesytem/Filesystem.tsx
@@ -3,20 +3,31 @@ import FileList from "./FileList";
import SelectedFsEntities from "./SelectedFsEntities";
import { Container } from "react-bootstrap";
import ToolbarActions from "./ToolbarActions";
+import { ApiActionsInfo } from "./ApiActionsInfo";
+import UploadZone from "./upload/UploadZone";
export const filesBaseUrl = "/file";
type Props = {};
function FileSystem(props: Props): ReactElement {
+
return (
- <>
-
-
- ;
type Props = PropsFromRedux & {};
function SelectedFsEntities(props: Props): ReactElement {
- if (props.selectedFsEnties?.length > 0)
+ if (props.selectedFsEntities?.length > 0)
return (
-
+
`;
exports[`Storyshots Health default 1`] = `
diff --git a/src/background/api/api.ts b/src/background/api/api.ts
index b14db53b..61c51d51 100644
--- a/src/background/api/api.ts
+++ b/src/background/api/api.ts
@@ -5,12 +5,12 @@ export const hostname: string = constants.url.API_URL;
export const userPath: string = "/v1/users";
-export const filesystemPath: string = "/v1/filesystem";
+export const filesystemPath: string = "/v1/filesystem/";
enum DataIntegrity {
STABLE = "bg-success",
POSSIBLE_RISK = "bg-warning",
- UNSTABLE = "bg-danger",
+ UNSTABLE = "bg-danger"
}
interface SystemHealthData {
diff --git a/src/background/api/filesystem.ts b/src/background/api/filesystem.ts
index 9d668293..48fadea0 100644
--- a/src/background/api/filesystem.ts
+++ b/src/background/api/filesystem.ts
@@ -1,16 +1,182 @@
-import { FsEntity } from "./filesystemTypes";
-import { filesystemPath, hostname } from "./api";
-import Axios from "axios";
-
-export const getFolderContents = (path: string) =>
- new Promise
+
+
+
+
+
+
-
-
-
,
-
-
+
-
-
-
+
+ {ongoingActions
+ .sort((a, b) => {
+ return a.timestamp - b.timestamp;
+ })
+ .map((a) => (
+
+ );
+};
diff --git a/src/components/pages/filesytem/FileList.tsx b/src/components/pages/filesytem/FileList.tsx
index f23e5a53..40bc80c1 100644
--- a/src/components/pages/filesytem/FileList.tsx
+++ b/src/components/pages/filesytem/FileList.tsx
@@ -1,33 +1,34 @@
-import React, { ReactElement, useEffect, useState } from "react";
-import { getFolderContents } from "../../../background/api/filesystem";
-import { FsEntity } from "../../../background/api/filesystemTypes";
-import { Col, Container, Form, Row } from "react-bootstrap";
-import { useLocation } from "react-router-dom";
-import { FilesBreadcrumb } from "./FilesBreadcrumb";
-import { filesBaseUrl } from "./Filesystem";
+import React, {ReactElement, useEffect, useState} from "react";
+import {getFolderContents} from "../../../background/api/filesystem";
+import {FsEntity} from "../../../background/api/filesystemTypes";
+import {Col, Container, Form, Row} from "react-bootstrap";
+import {useLocation} from "react-router-dom";
+import {FilesBreadcrumb} from "./FilesBreadcrumb";
+import {filesBaseUrl} from "./Filesystem";
import FileListItem from "./FileListItem";
-import { SystemState } from "../../../background/redux/actions/sytemState";
-import {
- addToSelected,
- clearSelected,
- removeFromSelected,
- replaceSelected
-} from "../../../background/redux/actions/filesystem";
-import { connect, ConnectedProps } from "react-redux";
-import { FFLoading } from "../../basicElements/Loading";
+import {SystemState} from "../../../background/redux/actions/sytemState";
+import {addToSelected, clearSelected, removeFromSelected, replaceSelected, setContents, setCurrentFsItemId, setCurrentPath} from "../../../background/redux/actions/filesystem";
+import {connect, ConnectedProps} from "react-redux";
+import {FFLoading} from "../../basicElements/Loading";
+import {AxiosResponse} from "axios";
const mapState = (state: SystemState) => ({
- filesystem: {
- selectedFsEnties: state.filesystem.selectedFsEnties
- }
+ filesystem: {
+ selectedFsEntities: state.filesystem.selectedFsEntities,
+ folderContents: state.filesystem.folderContents,
+ currentFsItemId: state.filesystem.currentFsItemId
+ }
});
// this takes the redux actions and maps them to the props
const mapDispatch = {
- addToSelected,
- removeFromSelected,
- replaceSelected,
- clearSelected
+ addToSelected,
+ removeFromSelected,
+ replaceSelected,
+ clearSelected,
+ setContents,
+ setCurrentFsItemId,
+ setCurrentPath
};
const connector = connect(mapState, mapDispatch);
@@ -37,151 +38,167 @@ type PropsFromRedux = ConnectedProps
+
+ {a.status} {a.type}
+
+ {a.totalAmount > 1 && (
+
+ {a.progress + 1} / {a.totalAmount}
+
+ )}
+ {a.currentFsEntity.name}
+
+ ))}
+ -
+
+
);
}
diff --git a/src/components/pages/filesytem/SelectedFsEntities.tsx b/src/components/pages/filesytem/SelectedFsEntities.tsx
index 9f898211..74d72aa1 100644
--- a/src/components/pages/filesytem/SelectedFsEntities.tsx
+++ b/src/components/pages/filesytem/SelectedFsEntities.tsx
@@ -6,7 +6,7 @@ import { FsEntity } from "../../../background/api/filesystemTypes";
import { clearSelected } from "../../../background/redux/actions/filesystem";
const mapState = (state: SystemState) => ({
- selectedFsEnties: state.filesystem.selectedFsEnties
+ selectedFsEntities: state.filesystem.selectedFsEntities
});
const mapDispatch = {
@@ -20,15 +20,15 @@ type PropsFromRedux = ConnectedProps
+
+
+
+
+
+
({
- selectedFsEntiesCount: state.filesystem.selectedFsEnties.length
+ selectedFsEntities: state.filesystem.selectedFsEntities
});
const connector = connect(mapState);
@@ -14,20 +17,30 @@ type PropsFromRedux = ConnectedProps;
type Props = PropsFromRedux & {};
function ToolbarActions(props: Props): ReactElement | null {
- return (
-
-
+ function handleDeleteClicked() {
+ deleteFsEntities(props.selectedFsEntities);
+ }
+
+ /* function handleDownloadClicked() {
+ downloadFiles(props.selectedFsEnties)
+ } */
+
+ return (
+
+
- 0}>
+ 0}>
-
-
+
+
- );
+ );
}
export default connector(ToolbarActions);
diff --git a/src/components/pages/filesytem/__tests__/__snapshots__/FilesBreadcrumb.test.tsx.snap b/src/components/pages/filesytem/__tests__/__snapshots__/FilesBreadcrumb.test.tsx.snap
index 255baea4..6b17be25 100644
--- a/src/components/pages/filesytem/__tests__/__snapshots__/FilesBreadcrumb.test.tsx.snap
+++ b/src/components/pages/filesytem/__tests__/__snapshots__/FilesBreadcrumb.test.tsx.snap
@@ -17,7 +17,6 @@ Object {
href="/file"
>
Home
-
Home
-
{
+ const preflightResultInit: EditablePreflightEntityOrFile[] = [
+ {
+ name: "bla.txt",
+ path: "bla.txt",
+ permissionIsSufficient: true, // can upload and can overwrite
+ nameAlreadyInUse: true,
+ nameIsValid: true,
+ isFile: true
+ },
+ {
+ name: "fasel",
+ path: "fasel",
+ permissionIsSufficient: true, // can upload and can overwrite
+ nameAlreadyInUse: true,
+ nameIsValid: true,
+ isFile: false
+ },
+ {
+ name: "bla.wow",
+ path: "fasel/bla.wow",
+ permissionIsSufficient: true, // can upload and can overwrite
+ nameAlreadyInUse: true,
+ nameIsValid: true,
+ isFile: true
+ },
+ {
+ name: "hallo.txt",
+ path: "fasel/blub/hallo.txt",
+ permissionIsSufficient: true, // can upload and can overwrite
+ nameAlreadyInUse: true,
+ nameIsValid: true,
+ isFile: true
+ },
+ {
+ name: "blub",
+ path: "fasel/blub",
+ permissionIsSufficient: true, // can upload and can overwrite
+ nameAlreadyInUse: true,
+ nameIsValid: true,
+ isFile: false
+ },
+ {
+ name: "blubfdhjsgfhj---fsd/",
+ path: "fasel/blubfdhjsgfhj---fsd/",
+ permissionIsSufficient: true,
+ nameAlreadyInUse: false,
+ nameIsValid: false,
+ isFile: false
+ },
+ {
+ name: "notAllowed",
+ path: "fasel/notAllowed",
+ permissionIsSufficient: false,
+ nameAlreadyInUse: false,
+ nameIsValid: true,
+ isFile: false
+ }
+ ];
+
+ const [preflightResult, setPreflightResultDispatch] = useReducer>(preflightResultReducer, preflightResultInit);
+
+ return (
+
+
+ {
+ }}
+ preflightResult={preflightResult}
+ setPreflightResultDispatch={setPreflightResultDispatch}
+ fsItemIdToUpload="1"/>
+
+
+ );
+});
diff --git a/src/components/pages/filesytem/upload/UploadDecisionsModalContent.tsx b/src/components/pages/filesytem/upload/UploadDecisionsModalContent.tsx
new file mode 100644
index 00000000..341aa542
--- /dev/null
+++ b/src/components/pages/filesytem/upload/UploadDecisionsModalContent.tsx
@@ -0,0 +1,226 @@
+import React, { ReactElement, useState } from "react";
+import { Button, Form, ListGroup, Modal, Row, Table } from "react-bootstrap";
+import UploadDecisionsTableRow from "./UploadDecisionsTableRow";
+import { EditableFileWithPreflightInfo, EditablePreflightEntityOrFile, PeflightEntiesActionTypes, PREFLIGHT_ADD_ENTITIES, PREFLIGHT_TOGGLE_ALL, PreflightEntity } from "./preflightTypes";
+import { uploadFiles, uploadPreflight } from "../../../../background/api/filesystem";
+import { preflightResultCombine } from "./preflightResponseParser";
+import { FFLoading } from "../../../basicElements/Loading";
+
+interface Props {
+ handleClose: () => void;
+ preflightResult: EditablePreflightEntityOrFile[];
+ setPreflightResultDispatch: (a: PeflightEntiesActionTypes) => void;
+ fsItemIdToUpload: string
+}
+
+export const UploadDecisionsModalContent = ({
+ handleClose,
+ preflightResult,
+ setPreflightResultDispatch,
+ fsItemIdToUpload
+ }: Props): ReactElement => {
+ const [currentPage, setCurrentPage] = useState(0);
+ const [showAllFiles, setShowAllFiles] = useState(false)
+ const [showAllFolders, setShowAllFolders] = useState(false)
+ const [loading, setLoading] = useState(false);
+ const nextPage = () => setCurrentPage(currentPage + 1);
+ const [selectAllFolders, setSelectAllFolders] = useState(false);
+ const [selectAllFiles, setSelectAllFiles] = useState(false);
+ const listLimitForFilesAndFolder = 2;
+
+ const updateSelectAll = (isFolder: boolean) => {
+ let newValue;
+ if (isFolder) {
+ setSelectAllFolders(!selectAllFolders);
+ newValue = !selectAllFolders;
+ } else {
+ setSelectAllFiles(!selectAllFiles);
+ newValue = !selectAllFiles;
+ }
+ setPreflightResultDispatch({
+ type: PREFLIGHT_TOGGLE_ALL,
+ payload: { isFolders: isFolder, newValue: newValue }
+ });
+ };
+
+ const handleApply = () => {
+ setLoading(true);
+ uploadPreflight(preflightResult.filter((e: EditablePreflightEntityOrFile) => e.isFile) as EditableFileWithPreflightInfo[], fsItemIdToUpload)
+ .then((response: PreflightEntity[]) => {
+ const combined = preflightResultCombine(preflightResult, response);
+
+ const actionsNeeded = combined.some((e: EditablePreflightEntityOrFile) => !e.permissionIsSufficient || !e.nameIsValid || (e.nameAlreadyInUse && !e.overwrite));
+
+ if (actionsNeeded) {
+ setPreflightResultDispatch({ type: PREFLIGHT_ADD_ENTITIES, payload: combined });
+ } else {
+ uploadFiles(combined.filter(
+ (f: EditablePreflightEntityOrFile) => f.isFile) as EditableFileWithPreflightInfo[], fsItemIdToUpload);
+ handleClose();
+ setPreflightResultDispatch({ type: PREFLIGHT_ADD_ENTITIES, payload: [] });
+ }
+ setLoading(false);
+ });
+ };
+
+ const handleOverWriteAll = () => {
+ uploadFiles(preflightResult.filter(
+ (f: EditablePreflightEntityOrFile) => f.isFile) as EditableFileWithPreflightInfo[], fsItemIdToUpload);
+ handleClose();
+ setPreflightResultDispatch({ type: PREFLIGHT_ADD_ENTITIES, payload: [] });
+ }
+
+ const foldersToMerge = preflightResult.filter(
+ (f: EditablePreflightEntityOrFile) => !f.isFile && f.nameAlreadyInUse
+ );
+ const entitiesWithInvalidName = preflightResult.filter(
+ (f: EditablePreflightEntityOrFile) => !f.nameIsValid
+ );
+ const filesToOverwrite = preflightResult.filter(
+ (f: EditablePreflightEntityOrFile) => f.isFile && f.nameAlreadyInUse
+ );
+ const insufficientPermission = preflightResult.filter(
+ (f: EditablePreflightEntityOrFile) => !f.permissionIsSufficient
+ );
+
+ const smallFileList = (files: EditablePreflightEntityOrFile[]) => {
+ return (
+
+ {files.map((f: EditablePreflightEntityOrFile) => (
+ {f.path}
+ ))}
+
+ );
+ };
+
+ const changeNamesOrOverwriteTable = (
+ files: EditablePreflightEntityOrFile[],
+ isFolders: boolean
+ ) => {
+ return (
+
+
+
+ );
+ };
+
+ if (loading) {
+ return
+ Uploading
+
+
+ {!!foldersToMerge.length && (
+
+
+ {(!!insufficientPermission.length || !!entitiesWithInvalidName.length) &&
+ Some files or folders need to be renamed, because their name is invalid or you have not the permission to overwrite them
}
+
+
+
+
+
+ );
+ else
+ return (
+ <>
+
+ Merge Folders and overwrite files?
+
+
+ {!!foldersToMerge.length && (
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/src/components/pages/filesytem/upload/UploadDecisionsTableRow.tsx b/src/components/pages/filesytem/upload/UploadDecisionsTableRow.tsx
new file mode 100644
index 00000000..1edc4f47
--- /dev/null
+++ b/src/components/pages/filesytem/upload/UploadDecisionsTableRow.tsx
@@ -0,0 +1,115 @@
+import React, { useCallback } from "react";
+import { Form } from "react-bootstrap";
+import {
+ EditablePreflightEntityOrFile,
+ PeflightEntiesActionTypes,
+ PREFLIGHT_CHANGE_NAME,
+ PREFLIGHT_TOGGLE_OVERWRITE,
+ PREFLIGHT_UPDATE_NAME,
+ PreflightChangeName,
+ PreflightToggleOverwrite,
+ PreflightUpdateName
+} from "./preflightTypes";
+
+interface Props {
+ preflightEntity: EditablePreflightEntityOrFile;
+ setPreflightResultDispatch: (a: PeflightEntiesActionTypes) => void;
+}
+
+const UploadDecisionsTableRow = ({
+ preflightEntity,
+ setPreflightResultDispatch
+}: Props) => {
+ const onNameChange = useCallback(
+ (event: React.ChangeEvent) => {
+ let val = event.target.value;
+
+ const change: PreflightChangeName = {
+ type: PREFLIGHT_CHANGE_NAME,
+ payload: {
+ path: preflightEntity.path,
+ newName: val
+ }
+ };
+ setPreflightResultDispatch(change);
+ },
+ [preflightEntity.path, setPreflightResultDispatch]
+ );
+ const onNameInputLeaver = useCallback(
+ (event: React.ChangeEvent) => {
+ console.log("onNameInputLeaver");
+ let val = event.target.value;
+
+ const change: PreflightUpdateName = {
+ type: PREFLIGHT_UPDATE_NAME,
+ payload: {
+ path: preflightEntity.path,
+ newName: val
+ }
+ };
+ setPreflightResultDispatch(change);
+ },
+ [preflightEntity.path, setPreflightResultDispatch]
+ );
+ const onSelectedChange = useCallback(() => {
+ const change: PreflightToggleOverwrite = {
+ type: PREFLIGHT_TOGGLE_OVERWRITE,
+ payload: {
+ path: preflightEntity.path,
+ overwrite: !preflightEntity.overwrite
+ }
+ };
+ setPreflightResultDispatch(change);
+ }, [preflightEntity, setPreflightResultDispatch]);
+
+ let requiresNameChange =
+ (!preflightEntity.nameIsValid ||
+ (!preflightEntity.permissionIsSufficient && preflightEntity.overwrite)) &&
+ !preflightEntity.newName;
+ return (
+
+
+ {preflightEntity.overwrite
+ ? preflightEntity.path
+ : preflightEntity.newPath ?? preflightEntity.path}
+
+
+
+
+ {preflightEntity.error && (
+ {preflightEntity.error}
+ )}
+ {requiresNameChange && (
+ Name must be changed
+ )}
+
+
+
+
+
+
+ );
+};
+
+export default UploadDecisionsTableRow;
diff --git a/src/components/pages/filesytem/upload/UploadZone.tsx b/src/components/pages/filesytem/upload/UploadZone.tsx
new file mode 100644
index 00000000..3ac146b1
--- /dev/null
+++ b/src/components/pages/filesytem/upload/UploadZone.tsx
@@ -0,0 +1,257 @@
+import React, { ReactElement, Reducer, useCallback, useReducer, useState } from "react";
+import { useDropzone } from "react-dropzone";
+import { useSelector } from "react-redux";
+import { RootState } from "../../../../background/redux/store";
+import { Modal } from "react-bootstrap";
+import { uploadFiles, uploadPreflight } from "../../../../background/api/filesystem";
+import { FsEntity } from "../../../../background/api/filesystemTypes";
+import { UploadDecisionsModalContent } from "./UploadDecisionsModalContent";
+import { divideArrayByCondition } from "../../../../background/methods/arrays";
+import { getPathWithoutName } from "../../../../background/methods/filesystem";
+import {
+ EditableEntityError,
+ EditableFileWithPreflightInfo,
+ EditablePreflightEntityOrFile,
+ PeflightEntiesActionTypes,
+ PREFLIGHT_ADD_ENTITIES,
+ PREFLIGHT_CHANGE_NAME,
+ PREFLIGHT_TOGGLE_ALL,
+ PREFLIGHT_TOGGLE_OVERWRITE,
+ PREFLIGHT_UPDATE_NAME,
+ PreflightEntity
+} from "./preflightTypes";
+import { preflightResultCombine } from "./preflightResponseParser";
+
+export const UploadZone = (): ReactElement => {
+ const [showUploadDialog, setShowUploadDialog] = useState(false);
+ const handleClose = () => {
+ setPreflightResultDispatch({ type: PREFLIGHT_ADD_ENTITIES, payload: [] });
+ setShowUploadDialog(false);
+ };
+ const handleShow = () => setShowUploadDialog(true);
+
+ const currentFsItemId = useSelector(
+ (state: RootState) => state.filesystem.currentFsItemId
+ );
+ const [fsItemIdToUpload, setFsItemIdToUpload] = useState(currentFsItemId);
+ const currentFsContent = useSelector(
+ (state: RootState) => state.filesystem.folderContents
+ );
+
+ const onDrop = useCallback(
+ (acceptedFiles: EditableFileWithPreflightInfo[]) => {
+
+
+ if (!acceptedFiles.length){
+ return // TODO: dispatch a action to show that a empty folder could not be uploaded
+ }
+
+ //check if preflight is needed
+ let preflightNeeded = acceptedFiles.some(
+ (file: EditablePreflightEntityOrFile) => {
+ return (
+ file.path.includes("/") ||
+ currentFsContent.some(
+ (fsEntiy: FsEntity) => fsEntiy.name === file.name
+ )
+ );
+ }
+ );
+ console.log("[Upload Zone, add files]",acceptedFiles, preflightNeeded);
+
+ if (preflightNeeded) {
+ setFsItemIdToUpload(currentFsItemId);
+ uploadPreflight(
+ acceptedFiles,
+ currentFsItemId
+ ).then((response) => {
+ const actionsNeeded = response.some(
+ (e: PreflightEntity) =>
+ !e.permissionIsSufficient || e.nameAlreadyInUse || !e.nameIsValid
+ );
+ if (actionsNeeded) {
+ const combined = preflightResultCombine(acceptedFiles, response);
+ console.log("combined",combined)
+
+ setPreflightResultDispatch({
+ type: PREFLIGHT_ADD_ENTITIES,
+ payload: [
+ ...combined,
+ ...(response.filter(
+ (f) => !f.isFile
+ ))
+ ]
+ });
+ handleShow();
+ } else {
+ uploadFiles((acceptedFiles as unknown) as File[], currentFsItemId);
+ }
+ });
+ } else {
+ uploadFiles((acceptedFiles as unknown) as File[], currentFsItemId);
+ }
+ },
+ [currentFsItemId, currentFsContent]
+ );
+
+ const [preflightResult, setPreflightResultDispatch] = useReducer>(preflightResultReducer, []);
+
+ // @ts-ignore
+ const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
+
+ if (currentFsItemId === "-1" ){
+ return <>
+ }
+ return (
+ <>
+
+
+
+ );
+};
+
+export const preflightResultReducer: Reducer = (currentState, action) => {
+ switch (action.type) {
+ case PREFLIGHT_ADD_ENTITIES: {
+ return action.payload.sort(sortPreflightResult);
+ }
+ case PREFLIGHT_TOGGLE_ALL: {
+ let [files, folders] = divideArrayByCondition(
+ currentState,
+ (e) => e.isFile
+ );
+ let toChange = action.payload.isFolders ? folders : files;
+ let notToChange = !action.payload.isFolders ? folders : files;
+
+ toChange = toChange.map((e: EditablePreflightEntityOrFile) => {
+ if (e.nameIsValid && e.permissionIsSufficient) {
+ e.overwrite = action.payload?.newValue ?? false;
+ }
+ return e;
+ });
+ return [...toChange, ...notToChange].sort(sortPreflightResult);
+ }
+ case PREFLIGHT_TOGGLE_OVERWRITE: {
+ let [[elementToReplace], restOfElements] = divideArrayByCondition(
+ currentState,
+ (e) => e.path === action.payload.path
+ );
+ elementToReplace.overwrite = action.payload.overwrite;
+
+ return [...restOfElements, elementToReplace].sort(sortPreflightResult);
+ }
+ case PREFLIGHT_CHANGE_NAME: {
+ let [[elementToReplace], restOfElements] = divideArrayByCondition(
+ currentState,
+ (e) => e.path === action.payload.path
+ );
+ let oldPath = elementToReplace.newPath ?? elementToReplace.path;
+
+ elementToReplace.newPath =
+ oldPath.substring(
+ 0,
+ oldPath.lastIndexOf(elementToReplace.newName ?? elementToReplace.name)
+ ) + action.payload.newName;
+ elementToReplace.newName = action.payload.newName;
+ elementToReplace.error = undefined;
+ return [...restOfElements, elementToReplace].sort(sortPreflightResult);
+ }
+ case PREFLIGHT_UPDATE_NAME: {
+ let [[elementToReplace], restOfElements] = divideArrayByCondition(
+ currentState,
+ (e) => e.path === action.payload.path
+ );
+ let oldPath = elementToReplace.newPath ?? elementToReplace.path;
+ let newPath =
+ oldPath.substring(
+ 0,
+ oldPath.lastIndexOf(elementToReplace.newName ?? elementToReplace.name)
+ ) + action.payload.newName;
+
+ let newPathAlreadyExits = restOfElements.some(
+ (e: EditablePreflightEntityOrFile) => {
+ let localPath = e.newPath ?? e.path;
+ return localPath === newPath;
+ }
+ );
+
+ let newNameIsValidNot =
+ !action.payload.newName ||
+ action.payload.newName.includes("/") ||
+ action.payload.newName.includes(" ") ||
+ action.payload.newName.match("[~#@*+:!?&%<>|\"^\\\\]");
+
+ if (newPathAlreadyExits || newNameIsValidNot) {
+ elementToReplace.error = newPathAlreadyExits
+ ? EditableEntityError.ALREADYEXITS
+ : EditableEntityError.INVALIDNAME;
+ elementToReplace.newPath =
+ elementToReplace.prefNewPath ?? elementToReplace.path;
+ elementToReplace.newName =
+ elementToReplace.prefNewName ?? elementToReplace.name;
+ } else {
+ console.log(
+ elementToReplace.newPath,
+ elementToReplace.prefNewPath,
+ elementToReplace.path
+ );
+ let prevOldPath = elementToReplace.prefNewPath ?? elementToReplace.path;
+ restOfElements = restOfElements.map((e) => {
+ let currentPath = e.newPath ?? e.path;
+ let currentName = e.newName ?? e.name;
+ let currentPathWithoutName = getPathWithoutName(
+ currentPath,
+ currentName
+ );
+
+ let index = currentPathWithoutName.indexOf(prevOldPath);
+
+ console.log(prevOldPath, currentPathWithoutName, currentName);
+ if (index === 0) {
+ e.newPath = newPath + currentPath.substr(prevOldPath?.length);
+ e.prefNewPath = e.newPath;
+ }
+ return e;
+ });
+ elementToReplace.prefNewPath = newPath;
+ elementToReplace.prefNewName = action.payload.newName;
+ elementToReplace.newPath = newPath;
+ elementToReplace.newName = action.payload.newName;
+ elementToReplace.error = undefined;
+ console.log("updated");
+ }
+ return [...restOfElements, elementToReplace].sort(sortPreflightResult);
+ }
+ }
+};
+
+const sortPreflightResult = (
+ a: EditablePreflightEntityOrFile,
+ b: EditablePreflightEntityOrFile
+) => {
+ return a.path.localeCompare(b.path);
+};
+
+export default UploadZone;
diff --git a/src/components/pages/filesytem/upload/preflightResponseParser.ts b/src/components/pages/filesytem/upload/preflightResponseParser.ts
new file mode 100644
index 00000000..f9e148ba
--- /dev/null
+++ b/src/components/pages/filesytem/upload/preflightResponseParser.ts
@@ -0,0 +1,19 @@
+import { EditablePreflightEntityOrFile, PreflightEntity } from "./preflightTypes";
+
+export const preflightResultCombine = (files: EditablePreflightEntityOrFile[], response: PreflightEntity[]) => {
+
+ return files.map((file: EditablePreflightEntityOrFile) => {
+ console.log(response)
+ const resInfo = response.find((e) => (e.path === (file.newPath ?? file.path)) || ("/" + e.path === (file.newPath ?? file.path)));
+ // could be done better if rest returned paths with leading slashes
+ if (!resInfo){console.error("Did not found a response for the file:",file)}
+
+ file.permissionIsSufficient =
+ resInfo?.permissionIsSufficient ?? true;
+ file.nameAlreadyInUse = resInfo?.nameAlreadyInUse ?? false;
+ file.nameIsValid = resInfo?.nameIsValid ?? true;
+ file.isFile = resInfo?.isFile ?? true;
+
+ return file;
+ });
+};
diff --git a/src/components/pages/filesytem/upload/preflightTypes.ts b/src/components/pages/filesytem/upload/preflightTypes.ts
new file mode 100644
index 00000000..778da24b
--- /dev/null
+++ b/src/components/pages/filesytem/upload/preflightTypes.ts
@@ -0,0 +1,90 @@
+export interface PreflightEntity {
+ name: string;
+ path: string;
+ permissionIsSufficient: boolean; // can upload and can overwrite
+ nameAlreadyInUse: boolean;
+ nameIsValid: boolean;
+ isFile: boolean;
+}
+
+export type EditablePreflightEntityOrFile =
+ | EditableFileWithPreflightInfo
+ | EditablePreflightEntity;
+
+export interface EditableFileWithPreflightInfo
+ extends File,
+ EditableEntity,
+ PreflightEntity {
+ webkitRelativePath?: string;
+ readonly name: string;
+}
+
+export interface EditablePreflightEntity
+ extends PreflightEntity,
+ EditableEntity {}
+
+interface EditableEntity {
+ newName?: string;
+ newPath?: string;
+ overwrite?: boolean;
+ prefNewPath?: string;
+ prefNewName?: string;
+ error?: EditableEntityError;
+}
+
+export enum EditableEntityError {
+ "ALREADYEXITS" = "Name already exits",
+ "INVALIDNAME" = "Name is invalid"
+}
+
+export type PeflightEntiesActionTypes =
+ | PreflightChangeName
+ | PreflightToggleOverwrite
+ | PreflightUpdateName
+ | PreflightToggleAll
+ | PreflightAddEntities;
+export const PREFLIGHT_CHANGE_NAME = "PREFLIGHT_CHANGE_NAME";
+export const PREFLIGHT_TOGGLE_OVERWRITE = "PREFLIGHT_TOGGLE_OVERWRITE";
+export const PREFLIGHT_UPDATE_NAME = "PREFLIGHT_UPDATE_NAME";
+export const PREFLIGHT_TOGGLE_ALL = "PREFLIGHT_TOGGLE_ALL";
+export const PREFLIGHT_ADD_ENTITIES = "PREFLIGHT_ADD_ENTITIES";
+
+export interface PreflightChangeName {
+ type: typeof PREFLIGHT_CHANGE_NAME;
+ payload: NameChangePayload;
+}
+
+export interface PreflightToggleOverwrite {
+ type: typeof PREFLIGHT_TOGGLE_OVERWRITE;
+ payload: OverwriteTogglePayload;
+}
+
+export interface PreflightUpdateName {
+ type: typeof PREFLIGHT_UPDATE_NAME;
+ payload: NameChangePayload;
+}
+
+export interface PreflightToggleAll {
+ type: typeof PREFLIGHT_TOGGLE_ALL;
+ payload: ToggleAllPayload;
+}
+
+export interface PreflightAddEntities {
+ type: typeof PREFLIGHT_ADD_ENTITIES;
+ payload: EditablePreflightEntityOrFile[];
+}
+
+interface NameChangePayload {
+ path: string;
+ newName: string;
+}
+
+interface OverwriteTogglePayload {
+ path: string;
+ overwrite: boolean;
+}
+
+interface ToggleAllPayload {
+ isFolders: boolean;
+ newValue: boolean;
+}
diff --git a/src/dev/storybook-basics/Button.stories.tsx b/src/dev/storybook-basics/Button.stories.tsx
deleted file mode 100644
index 962fc49b..00000000
--- a/src/dev/storybook-basics/Button.stories.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from 'react';
-// also exported from '@storybook/react' if you can deal with breaking changes in 6.1
-import { Story, Meta } from '@storybook/react/types-6-0';
-
-import { Button, ButtonProps } from './Button';
-
-export default {
- title: 'Example/Button',
- component: Button,
- argTypes: {
- backgroundColor: { control: 'color' },
- },
-} as Meta;
-
-const Template: Story = (args) => ;
-
-export const Primary = Template.bind({});
-Primary.args = {
- primary: true,
- label: 'Button',
-};
-
-export const Secondary = Template.bind({});
-Secondary.args = {
- label: 'Button',
-};
-
-export const Large = Template.bind({});
-Large.args = {
- size: 'large',
- label: 'Button',
-};
-
-export const Small = Template.bind({});
-Small.args = {
- size: 'small',
- label: 'Button',
-};
diff --git a/src/dev/storybook-basics/Button.tsx b/src/dev/storybook-basics/Button.tsx
deleted file mode 100644
index 6d397b74..00000000
--- a/src/dev/storybook-basics/Button.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import React from 'react';
-import './button.css';
-
-export interface ButtonProps {
- /**
- * Is this the principal call to action on the page?
- */
- primary?: boolean;
- /**
- * What background color to use
- */
- backgroundColor?: string;
- /**
- * How large should the button be?
- */
- size?: 'small' | 'medium' | 'large';
- /**
- * Button contents
- */
- label: string;
- /**
- * Optional click handler
- */
- onClick?: () => void;
-}
-
-/**
- * Primary UI component for user interaction
- */
-export const Button: React.FC = ({
- primary = false,
- size = 'medium',
- backgroundColor,
- label,
- ...props
-}) => {
- const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
- return (
-
- );
-};
diff --git a/src/dev/storybook-basics/Header.stories.tsx b/src/dev/storybook-basics/Header.stories.tsx
deleted file mode 100644
index a9288367..00000000
--- a/src/dev/storybook-basics/Header.stories.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react';
-// also exported from '@storybook/react' if you can deal with breaking changes in 6.1
-import { Story, Meta } from '@storybook/react/types-6-0';
-
-import { Header, HeaderProps } from './Header';
-
-export default {
- title: 'Example/Header',
- component: Header,
-} as Meta;
-
-const Template: Story = (args) => = ({ user, onLogin, onLogout, onCreateAccount }) => (
-
-
-);
diff --git a/src/dev/storybook-basics/Introduction.stories.mdx b/src/dev/storybook-basics/Introduction.stories.mdx
deleted file mode 100644
index 0a5d450a..00000000
--- a/src/dev/storybook-basics/Introduction.stories.mdx
+++ /dev/null
@@ -1,207 +0,0 @@
-import { Meta } from '@storybook/addon-docs/blocks';
-import Code from './assets/code-brackets.svg';
-import Colors from './assets/colors.svg';
-import Comments from './assets/comments.svg';
-import Direction from './assets/direction.svg';
-import Flow from './assets/flow.svg';
-import Plugin from './assets/plugin.svg';
-import Repo from './assets/repo.svg';
-import StackAlt from './assets/stackalt.svg';
-
-
-
-
-
-# Welcome to Storybook
-
-Storybook helps you build UI components in isolation from your app's business logic, data, and context.
-That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA.
-
-Browse example stories now by navigating to them in the sidebar.
-View their code in the `src/storybook-examples` directory to learn how they work.
-We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages.
-
- = (args) => = ({ user, onLogin, onLogout, onCreateAccount }) => (
-
-
-
-
-);
diff --git a/src/dev/storybook-basics/assets/code-brackets.svg b/src/dev/storybook-basics/assets/code-brackets.svg
deleted file mode 100644
index 73de9477..00000000
--- a/src/dev/storybook-basics/assets/code-brackets.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/src/dev/storybook-basics/assets/colors.svg b/src/dev/storybook-basics/assets/colors.svg
deleted file mode 100644
index 17d58d51..00000000
--- a/src/dev/storybook-basics/assets/colors.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/src/dev/storybook-basics/assets/comments.svg b/src/dev/storybook-basics/assets/comments.svg
deleted file mode 100644
index 6493a139..00000000
--- a/src/dev/storybook-basics/assets/comments.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/src/dev/storybook-basics/assets/direction.svg b/src/dev/storybook-basics/assets/direction.svg
deleted file mode 100644
index 65676ac2..00000000
--- a/src/dev/storybook-basics/assets/direction.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/src/dev/storybook-basics/assets/flow.svg b/src/dev/storybook-basics/assets/flow.svg
deleted file mode 100644
index 8ac27db4..00000000
--- a/src/dev/storybook-basics/assets/flow.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/src/dev/storybook-basics/assets/plugin.svg b/src/dev/storybook-basics/assets/plugin.svg
deleted file mode 100644
index 29e5c690..00000000
--- a/src/dev/storybook-basics/assets/plugin.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/src/dev/storybook-basics/assets/repo.svg b/src/dev/storybook-basics/assets/repo.svg
deleted file mode 100644
index f386ee90..00000000
--- a/src/dev/storybook-basics/assets/repo.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/src/dev/storybook-basics/assets/stackalt.svg b/src/dev/storybook-basics/assets/stackalt.svg
deleted file mode 100644
index 9b7ad274..00000000
--- a/src/dev/storybook-basics/assets/stackalt.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/src/dev/storybook-basics/button.css b/src/dev/storybook-basics/button.css
deleted file mode 100644
index 1c92ef37..00000000
--- a/src/dev/storybook-basics/button.css
+++ /dev/null
@@ -1,30 +0,0 @@
-.storybook-button {
- font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
- font-weight: 700;
- border: 0;
- border-radius: 3em;
- cursor: pointer;
- display: inline-block;
- line-height: 1;
-}
-.storybook-button--primary {
- color: white;
- background-color: #1ea7fd;
-}
-.storybook-button--secondary {
- color: #333;
- background-color: transparent;
- box-shadow: rgba(0, 0, 0, 0.15) 0 0 0 1px inset;
-}
-.storybook-button--small {
- font-size: 12px;
- padding: 10px 16px;
-}
-.storybook-button--medium {
- font-size: 14px;
- padding: 11px 20px;
-}
-.storybook-button--large {
- font-size: 16px;
- padding: 12px 24px;
-}
diff --git a/src/dev/storybook-basics/header.css b/src/dev/storybook-basics/header.css
deleted file mode 100644
index acadc9ec..00000000
--- a/src/dev/storybook-basics/header.css
+++ /dev/null
@@ -1,26 +0,0 @@
-.wrapper {
- font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
- border-bottom: 1px solid rgba(0, 0, 0, 0.1);
- padding: 15px 20px;
- display: flex;
- align-items: center;
- justify-content: space-between;
-}
-
-svg {
- display: inline-block;
- vertical-align: top;
-}
-
-h1 {
- font-weight: 900;
- font-size: 20px;
- line-height: 1;
- margin: 6px 0 6px 10px;
- display: inline-block;
- vertical-align: top;
-}
-
-button + button {
- margin-left: 10px;
-}
diff --git a/src/dev/storybook-basics/page.css b/src/dev/storybook-basics/page.css
deleted file mode 100644
index 51c9d099..00000000
--- a/src/dev/storybook-basics/page.css
+++ /dev/null
@@ -1,69 +0,0 @@
-section {
- font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
- font-size: 14px;
- line-height: 24px;
- padding: 48px 20px;
- margin: 0 auto;
- max-width: 600px;
- color: #333;
-}
-
-h2 {
- font-weight: 900;
- font-size: 32px;
- line-height: 1;
- margin: 0 0 4px;
- display: inline-block;
- vertical-align: top;
-}
-
-p {
- margin: 1em 0;
-}
-
-a {
- text-decoration: none;
- color: #1ea7fd;
-}
-
-ul {
- padding-left: 30px;
- margin: 1em 0;
-}
-
-li {
- margin-bottom: 8px;
-}
-
-.tip {
- display: inline-block;
- border-radius: 1em;
- font-size: 11px;
- line-height: 12px;
- font-weight: 700;
- background: #e7fdd8;
- color: #66bf3c;
- padding: 4px 12px;
- margin-right: 10px;
- vertical-align: top;
-}
-
-.tip-wrapper {
- font-size: 13px;
- line-height: 20px;
- margin-top: 40px;
- margin-bottom: 40px;
-}
-
-.tip-wrapper svg {
- display: inline-block;
- height: 12px;
- width: 12px;
- margin-right: 4px;
- vertical-align: top;
- margin-top: 3px;
-}
-
-.tip-wrapper svg path {
- fill: #1ea7fd;
-}
diff --git a/src/style/custom.scss b/src/style/custom.scss
index dce46aab..1eb2c814 100644
--- a/src/style/custom.scss
+++ b/src/style/custom.scss
@@ -36,5 +36,6 @@ $dark: black;
@import "~bootstrap/scss/transitions";
@import "~bootstrap/scss/breadcrumb";
@import "~bootstrap/scss/list-group";
+@import "~bootstrap/scss/modal";
@import "helpers";
diff --git a/src/style/helpers.scss b/src/style/helpers.scss
index 7e5e8446..3ded7ac4 100644
--- a/src/style/helpers.scss
+++ b/src/style/helpers.scss
@@ -1,7 +1,29 @@
-.text-shadow-none{
+.text-shadow-none {
text-shadow: none;
}
+.fw-40 {
+ width: 40%;
+ max-width: 40%;
+}
+
+.fw-20 {
+ width: 20%;
+ max-width: 20%;
+}
+
+.bg-body {
+ background-color: $body-bg;
+}
+
+.uploadDecisionTable td {
+ word-wrap: break-word;
+}
+
+.uploadDecisionTable {
+ table-layout: fixed;
+}
+
.title-action {
display: flex;
align-items: center;
@@ -15,7 +37,7 @@
height: 100%;
}
-.profile-information-display dl{
+.profile-information-display dl {
display: flex;
flex-wrap: wrap;
padding: 20px 0;
@@ -35,8 +57,8 @@
border-bottom: 1px solid $secondary;
}
-.queer-banner{
- color:white;
+.queer-banner {
+ color: white;
border-top: 5px solid $primary;
text-align: center;
background: linear-gradient(
@@ -53,20 +75,21 @@
background-size: 1800% 1800%;
animation: rainbow 18s ease infinite;
@keyframes rainbow {
- 0%{
+ 0% {
color: white;
- background-position:0 82%;
+ background-position: 0 82%;
}
- 50%{
+ 50% {
color: black;
- background-position:100% 19%;
+ background-position: 100% 19%;
}
- 100%{
+ 100% {
color: white;
- background-position:0 82%;
+ background-position: 0 82%;
}
}
}
+
.center-items {
display: flex;
align-items: center;
@@ -103,4 +126,5 @@
.login-input {
max-width: 450px;
+
}
diff --git a/webapp_provider/Dockerfile b/webapp_provider/Dockerfile
index 667fc261..cadf942b 100644
--- a/webapp_provider/Dockerfile
+++ b/webapp_provider/Dockerfile
@@ -1,12 +1,8 @@
-FROM node:lts-alpine
-
-# Create app directory
-WORKDIR /usr/src/app
-
-RUN apk update && apk upgrade
-
-# Bundle app source
-COPY . .
-
-EXPOSE 5000
-CMD npx serve -s public
+# dockerfile
+FROM nginx:latest
+RUN apt-get update && apt-get upgrade -y
+RUN rm /etc/nginx/conf.d/default.conf
+COPY nginx.conf /etc/nginx/nginx.conf
+COPY public /var/www/
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]
diff --git a/webapp_provider/nginx.conf b/webapp_provider/nginx.conf
new file mode 100644
index 00000000..ad4fa46b
--- /dev/null
+++ b/webapp_provider/nginx.conf
@@ -0,0 +1,48 @@
+worker_processes 1;
+
+events { worker_connections 1024; }
+
+http {
+
+ include /etc/nginx/mime.types;
+ default_type application/octet-stream;
+ access_log /var/log/nginx/access.log;
+ sendfile on;
+
+ gzip on;
+ gzip_comp_level 2;
+ gzip_min_length 1000;
+ gzip_proxied expired no-cache no-store private auth;
+ gzip_types text/plain application/x-javascript text/xml text/css application/xml;
+
+ server {
+ listen 80;
+
+ proxy_set_header Host $host;
+ proxy_set_header X-Real-IP $remote_addr;
+ proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+ proxy_set_header X-Forwarded-Host $server_name;
+
+ location /api {
+ client_max_body_size 1G;
+ # use dockers dns resolver
+ # with this nginx can start even when the other containers are not running
+ resolver 127.0.0.11 valid=30s;
+ set $upstream_rest FileFighterREST;
+ proxy_pass http://$upstream_rest:8080$uri;
+ proxy_redirect off;
+ }
+ location /data {
+ client_max_body_size 30G;
+ resolver 127.0.0.11 valid=30s;
+ set $upstream_Filehandler FileFighterFileHandler;
+ proxy_pass http://$upstream_Filehandler:5000$uri;
+ proxy_redirect off;
+ }
+
+ location / {
+ root /var/www;
+ try_files $uri $uri/ /index.html;
+ }
+ }
+}
-
- {props.selectedFsEnties.map((e: FsEntity) => {
+ {props.selectedFsEntities.map((e: FsEntity) => {
return (
- - Selected {props.selectedFsEnties.length} file - {props.selectedFsEnties.length > 1 ? "s" : ""} + Selected {props.selectedFsEntities.length} file + {props.selectedFsEntities.length > 1 ? "s" : ""}
| relative Path | +New Name | +
+ {isFolders ? "Merge" : "Overwrite"}
+ |
+
|---|
+ Folders that would be merged:
+ {smallFileList(showAllFolders ? foldersToMerge : foldersToMerge.slice(0,listLimitForFilesAndFolder))}
+ {(foldersToMerge.length > listLimitForFilesAndFolder && !showAllFolders) && }
+
+ )}
+ {!!filesToOverwrite.length && (
+
+ Files that would be overwritten:
+ {smallFileList(showAllFiles ? filesToOverwrite: filesToOverwrite.slice(0,listLimitForFilesAndFolder))}
+ {(filesToOverwrite.length > listLimitForFilesAndFolder && !showAllFiles )&& }
+
+ )}
+
+
+
+
+ + Folders that would be merged: + {changeNamesOrOverwriteTable(foldersToMerge, true)} +
+ )} + {!!filesToOverwrite.length && ( ++ Files that would be overwritten: + {changeNamesOrOverwriteTable(filesToOverwrite, false)} +
+ )} + {(!!entitiesWithInvalidName.length || !!insufficientPermission.length) && ( ++ Files that must be renamed: + {changeNamesOrOverwriteTable([...entitiesWithInvalidName,...insufficientPermission], false)} +
+ )} + All other files will be uploaded with their current name.
+
+
+ {isDragActive ? (
+
+
+ Drop files here ...
+ ) : ( +Drag 'n' drop files or folders here, or click to select files
+ )} +
-
-
-
-
- Acme
-
- {user ? (
-
- ) : (
- <>
-
-
-
- )}
-
- Configure
-
-
-
- 
-
- Presets for popular tools
- Easy setup for TypeScript, SCSS and more.
-
-
-
- 
-
- Build configuration
- How to customize webpack and Babel
-
-
-
- 
-
- Styling
- How to load and configure CSS libraries
-
-
-
- 
-
- Data
- Providers and mocking for data libraries
-
-
-
-
-Learn
-
-
-
- 
-
- Storybook documentation
- Configure, customize, and extend
-
-
-
- 
-
- In-depth guides
- Best practices from leading teams
-
-
-
- 
-
- GitHub project
- View the source and add issues
-
-
-
- 
-
- Discord chat
- Chat with maintainers and the community
-
-
-
-
-
- TipEdit the Markdown in{' '}
-
diff --git a/src/dev/storybook-basics/Page.stories.tsx b/src/dev/storybook-basics/Page.stories.tsx
deleted file mode 100644
index 55abc496..00000000
--- a/src/dev/storybook-basics/Page.stories.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-// also exported from '@storybook/react' if you can deal with breaking changes in 6.1
-import { Story, Meta } from '@storybook/react/types-6-0';
-
-import { Page, PageProps } from './Page';
-import * as HeaderStories from './Header.stories';
-
-export default {
- title: 'Example/Page',
- component: Page,
-} as Meta;
-
-const Template: Storysrc/storybook-examples/welcome.mdx
-Pages in Storybook
-- We recommend building UIs with a{' '} - - component-driven - {' '} - process starting with atomic components and ending with pages. -
-- Render pages with mock data. This makes it easy to build and review page states without - needing to navigate to them in your app. Here are some handy patterns for managing page data - in Storybook: -
--
-
- - Use a higher-level connected component. Storybook helps you compose such data from the - "args" of child component stories - -
- - Assemble data in the page component from your services. You can mock these services out - using Storybook. - -
- Get a guided tutorial on component-driven development at{' '} - - Learn Storybook - - . Read more in the{' '} - - docs - - . -
-
- Tip Adjust the width of the canvas with the{' '}
-
- Viewports addon in the toolbar
-
-