@akemona-org/strapi-plugin-upload 3.7.0

package/admin/src/containers/ModalStepper/reducer.js

@@ -0,0 +1,132 @@
+import { fromJS } from 'immutable';
+
+import { createNewFilesToDownloadArray, createNewFilesToUploadArray } from '../../utils';
+
+const initialState = fromJS({
+  currentStep: 'browse',
+  filesToUpload: [],
+  filesToDownload: [],
+  fileToEdit: null,
+});
+
+const reducer = (state, action) => {
+  switch (action.type) {
+    case 'ADD_FILES_TO_UPLOAD':
+      return state
+        .update('filesToUpload', list =>
+          list
+            .concat(fromJS(createNewFilesToUploadArray(action.filesToUpload)))
+            .map((data, index) => data.set('originalIndex', index))
+        )
+        .update('currentStep', () => action.nextStep);
+    case 'ADD_URLS_TO_FILES_TO_UPLOAD':
+      return state
+        .update('filesToUpload', list =>
+          list
+            .concat(
+              fromJS(createNewFilesToDownloadArray(state.get('filesToDownload'), list.toJS()))
+            )
+            .map((data, index) => data.set('originalIndex', index))
+        )
+        .update('currentStep', () => action.nextStep)
+        .update('filesToDownload', () => fromJS([]));
+    case 'CLEAN_FILES_ERROR':
+      return state.update('filesToUpload', list =>
+        list.map(data => {
+          if (data.get('tempId')) {
+            return data;
+          }
+
+          return data.set('hasError', false).set('errorMessage', null);
+        })
+      );
+    case 'FILE_DOWNLOADED':
+      return state.updateIn(['filesToUpload'], list => {
+        return list.map(file => {
+          if (file.get('tempId') === action.fileTempId) {
+            return file.update('isDownloading', () => false).update('file', () => action.blob);
+          }
+
+          return file;
+        });
+      });
+    case 'GO_TO':
+      return state.update('currentStep', () => action.to);
+    case 'INIT_FILE_TO_EDIT':
+      return state.update('fileToEdit', () => fromJS(action.fileToEdit));
+    case 'ON_ABORT_UPLOAD':
+      return state.updateIn(['fileToEdit', 'isUploading'], () => false);
+    case 'ON_CHANGE_URLS_TO_DOWNLOAD':
+      return state.updateIn(['filesToDownload'], () => fromJS(action.value));
+    case 'ON_CHANGE':
+      return state.updateIn(['fileToEdit', ...action.keys.split('.')], () => action.value);
+    case 'ON_SUBMIT_EDIT_NEW_FILE': {
+      const originalIndex = state.getIn(['fileToEdit', 'originalIndex']);
+
+      return state
+        .updateIn(['filesToUpload', originalIndex], () => state.get('fileToEdit'))
+        .update('fileToEdit', () => null);
+    }
+    case 'ON_SUBMIT_EDIT_EXISTING_FILE':
+      return state.updateIn(['fileToEdit', 'isUploading'], () => true);
+    case 'REMOVE_FILE_TO_UPLOAD':
+      return state.update('filesToUpload', list => {
+        return list.filter(data => data.get('originalIndex') !== action.fileIndex);
+      });
+    case 'RESET_FILE_TO_EDIT':
+      return state.update('fileToEdit', () => null);
+    case 'RESET_PROPS':
+      return initialState;
+    case 'SET_CROP_RESULT': {
+      return state.updateIn(['fileToEdit', 'file'], () => fromJS(action.blob));
+    }
+    case 'SET_FILE_ERROR':
+      return state.update('filesToUpload', list => {
+        return list.map(data => {
+          if (data.get('originalIndex') === action.fileIndex) {
+            return data
+              .set('isUploading', false)
+              .set('hasError', true)
+              .set('errorMessage', action.errorMessage);
+          }
+
+          return data;
+        });
+      });
+    case 'SET_FILE_TO_DOWNLOAD_ERROR':
+      return state.update('filesToUpload', list => {
+        return list.map(file => {
+          if (file.get('tempId') === action.fileTempId) {
+            return file
+              .update('isDownloading', () => false)
+              .update('hasError', () => true)
+              .update('errorMessage', () => file.get('fileOriginalName'));
+          }
+
+          return file;
+        });
+      });
+    case 'SET_FILE_TO_EDIT':
+      return state.update('fileToEdit', () => state.getIn(['filesToUpload', action.fileIndex]));
+    case 'SET_FILE_TO_EDIT_ERROR':
+      return state
+        .updateIn(['fileToEdit', 'hasError'], () => true)
+        .updateIn(['fileToEdit', 'errorMessage'], () => action.errorMessage)
+        .updateIn(['fileToEdit', 'isUploading'], () => false);
+    case 'SET_FILES_UPLOADING_STATE':
+      return state.update('filesToUpload', list =>
+        list.map(data =>
+          data
+            .set('isUploading', true)
+            .set('hasError', false)
+            .set('errorMessage', null)
+        )
+      );
+
+    default:
+      return state;
+  }
+};
+
+export default reducer;
+export { initialState };

package/admin/src/containers/ModalStepper/stepper.js

@@ -0,0 +1,46 @@
+import CheckControl from '../../components/CheckControl';
+import EditForm from '../../components/EditForm';
+import UploadForm from '../../components/UploadForm';
+import UploadList from '../../components/UploadList';
+import { getTrad } from '../../utils';
+
+const stepper = {
+  browse: {
+    Component: UploadForm,
+    headerBreadcrumbs: [getTrad('modal.header.browse')],
+    prev: 'upload',
+    next: 'upload',
+    withBackButton: true,
+  },
+  upload: {
+    Component: UploadList,
+    headerBreadcrumbs: [getTrad('modal.header.pending-assets')],
+    next: null,
+    prev: 'browse',
+  },
+  'edit-new': {
+    Component: EditForm,
+    // TODO: I'll leave it there for the moment
+    // because I am not sure about the design since it seems inconsistent
+    // headerBreadcrumbs: [
+    //   getTrad('modal.header.select-files'),
+    //   getTrad('modal.header.file-detail'),
+    // ],
+    headerBreadcrumbs: [getTrad('modal.header.file-detail')],
+    next: 'upload',
+    prev: 'upload',
+    withBackButton: true,
+  },
+  edit: {
+    Component: EditForm,
+    components: {
+      CheckControl,
+    },
+    headerBreadcrumbs: [getTrad('modal.header.file-detail')],
+    next: null,
+    prev: null,
+    withBackButton: false,
+  },
+};
+
+export default stepper;

package/admin/src/containers/SettingsPage/Divider.js

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+const Divider = styled.hr`
+  height: 1px;
+  border: 0;
+  margin-top: 17px;
+  margin-bottom: 23px;
+  background: #f6f6f6;
+`;
+
+export default Divider;

package/admin/src/containers/SettingsPage/SectionTitleWrapper.js

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+const SectionTitleWrapper = styled.div`
+  margin-bottom: 20px;
+`;
+
+export default SectionTitleWrapper;

package/admin/src/containers/SettingsPage/Wrapper.js

@@ -0,0 +1,17 @@
+/*
+ *
+ * This should be a component in the helper plugin that will be used
+ * by the webhooks views
+ */
+
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  padding: 25px 10px;
+  margin-top: 33px;
+  border-radius: ${({ theme }) => theme.main.sizes.borderRadius};
+  box-shadow: 0 2px 4px ${({ theme }) => theme.main.colors.darkGrey};
+  background: ${({ theme }) => theme.main.colors.white};
+`;
+
+export default Wrapper;

package/admin/src/containers/SettingsPage/index.js

@@ -0,0 +1,198 @@
+import React, { useEffect, useReducer, useRef } from 'react';
+import { Header, Inputs } from '@buffetjs/custom';
+import { Helmet } from 'react-helmet';
+import { Text } from '@buffetjs/core';
+import { isEqual } from 'lodash';
+import { LoadingIndicatorPage, useGlobalContext, request } from 'strapi-helper-plugin';
+
+import { getRequestUrl, getTrad } from '../../utils';
+import SectionTitleWrapper from './SectionTitleWrapper';
+import Wrapper from './Wrapper';
+import init from './init';
+import reducer, { initialState } from './reducer';
+
+const SettingsPage = () => {
+  const { formatMessage } = useGlobalContext();
+  const [reducerState, dispatch] = useReducer(reducer, initialState, init);
+  const { initialData, isLoading, modifiedData } = reducerState.toJS();
+  const isMounted = useRef(true);
+  const getDataRef = useRef();
+  const abortController = new AbortController();
+
+  getDataRef.current = async () => {
+    try {
+      const { signal } = abortController;
+      const { data } = await request(getRequestUrl('settings', { method: 'GET', signal }));
+
+      if (isMounted.current) {
+        dispatch({
+          type: 'GET_DATA_SUCCEEDED',
+          data,
+        });
+      }
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
+  useEffect(() => {
+    getDataRef.current();
+
+    return () => {
+      abortController.abort();
+      isMounted.current = false;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const handleSubmit = async () => {
+    try {
+      await request(getRequestUrl('settings'), {
+        method: 'PUT',
+        body: modifiedData,
+      });
+
+      if (isMounted.current) {
+        dispatch({
+          type: 'SUBMIT_SUCCEEDED',
+        });
+      }
+
+      strapi.notification.toggle({
+        type: 'success',
+        message: { id: 'notification.form.success.fields' },
+      });
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
+  const headerProps = {
+    title: {
+      label: formatMessage({ id: getTrad('settings.header.label') }),
+    },
+    content: formatMessage({
+      id: getTrad('settings.sub-header.label'),
+    }),
+    actions: [
+      {
+        color: 'cancel',
+        disabled: isEqual(initialData, modifiedData),
+        // TradId from the strapi-admin package
+        label: formatMessage({ id: 'app.components.Button.cancel' }),
+        onClick: () => {
+          dispatch({
+            type: 'CANCEL_CHANGES',
+          });
+        },
+        type: 'button',
+      },
+      {
+        disabled: false,
+        color: 'success',
+        // TradId from the strapi-admin package
+        label: formatMessage({ id: 'app.components.Button.save' }),
+        onClick: handleSubmit,
+        type: 'button',
+      },
+    ],
+  };
+
+  const handleChange = ({ target: { name, value } }) => {
+    dispatch({
+      type: 'ON_CHANGE',
+      keys: name,
+      value,
+    });
+  };
+
+  if (isLoading) {
+    return <LoadingIndicatorPage />;
+  }
+
+  return (
+    <>
+      <Helmet title={formatMessage({ id: getTrad('page.title') })} />
+
+      <Header {...headerProps} />
+      <Wrapper>
+        <div className="container-fluid">
+          <div className="row">
+            <SectionTitleWrapper className="col-12">
+              <Text fontSize="xs" fontWeight="semiBold" color="#787E8F">
+                {formatMessage({ id: getTrad('settings.section.image.label') })}
+              </Text>
+            </SectionTitleWrapper>
+            <div className="col-6">
+              <Inputs
+                label={formatMessage({
+                  id: getTrad('settings.form.responsiveDimensions.label'),
+                })}
+                description={formatMessage({
+                  id: getTrad('settings.form.responsiveDimensions.description'),
+                })}
+                name="responsiveDimensions"
+                onChange={handleChange}
+                type="bool"
+                value={modifiedData.responsiveDimensions}
+              />
+            </div>
+            <div className="col-6">
+              <Inputs
+                label={formatMessage({
+                  id: getTrad('settings.form.sizeOptimization.label'),
+                })}
+                name="sizeOptimization"
+                onChange={handleChange}
+                type="bool"
+                value={modifiedData.sizeOptimization}
+              />
+            </div>
+          </div>
+          <div className="row">
+            <div className="col-6">
+              <Inputs
+                label={formatMessage({
+                  id: getTrad('settings.form.autoOrientation.label'),
+                })}
+                description={formatMessage({
+                  id: getTrad('settings.form.autoOrientation.description'),
+                })}
+                name="autoOrientation"
+                onChange={handleChange}
+                type="bool"
+                value={modifiedData.autoOrientation}
+              />
+            </div>
+          </div>
+
+          {/*
+          <Divider />
+          <div className="row">
+            <SectionTitleWrapper className="col-12">
+              <Text fontSize="xs" fontWeight="semiBold" color="#787E8F">
+                {formatMessage({ id: getTrad('settings.section.video.label') })}
+              </Text>
+            </SectionTitleWrapper>
+            <div className="col-6">
+              <Inputs
+                label={formatMessage({
+                  id: getTrad('settings.form.videoPreview.label'),
+                })}
+                description={formatMessage({
+                  id: getTrad('settings.form.videoPreview.description'),
+                })}
+                name="videoPreview"
+                onChange={handleChange}
+                type="bool"
+                value={modifiedData.videoPreview}
+              />
+            </div>
+          </div> */}
+        </div>
+      </Wrapper>
+    </>
+  );
+};
+
+export default SettingsPage;

package/admin/src/containers/SettingsPage/init.js

@@ -0,0 +1,5 @@
+const init = initialState => {
+  return initialState;
+};
+
+export default init;

package/admin/src/containers/SettingsPage/reducer.js

@@ -0,0 +1,38 @@
+import { fromJS } from 'immutable';
+
+const initialState = fromJS({
+  isLoading: true,
+  initialData: {
+    responsiveDimensions: true,
+    sizeOptimization: true,
+    autoOrientation: false,
+    videoPreview: false,
+  },
+  modifiedData: {
+    responsiveDimensions: true,
+    sizeOptimization: true,
+    autoOrientation: false,
+    videoPreview: false,
+  },
+});
+
+const reducer = (state, action) => {
+  switch (action.type) {
+    case 'CANCEL_CHANGES':
+      return state.update('modifiedData', () => state.get('initialData'));
+    case 'GET_DATA_SUCCEEDED':
+      return state
+        .update('isLoading', () => false)
+        .update('initialData', () => fromJS(action.data))
+        .update('modifiedData', () => fromJS(action.data));
+    case 'ON_CHANGE':
+      return state.updateIn(['modifiedData', ...action.keys.split('.')], () => action.value);
+    case 'SUBMIT_SUCCEEDED':
+      return state.update('initialData', () => state.get('modifiedData'));
+    default:
+      return state;
+  }
+};
+
+export default reducer;
+export { initialState };

package/admin/src/contexts/AppContext/index.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const AppContext = createContext();
+
+export default AppContext;

package/admin/src/contexts/InputModal/InputModalDataManager.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const InputModalDataManagerContext = createContext();
+
+export default InputModalDataManagerContext;

package/admin/src/contexts/index.js

@@ -0,0 +1,2 @@
+export { default as AppContext } from './AppContext';
+export { default as InputModalContext } from './InputModal/InputModalDataManager';

package/admin/src/hooks/index.js

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/prefer-default-export
+export { default as useAppContext } from './useAppContext';

package/admin/src/hooks/useAppContext/index.js

@@ -0,0 +1,6 @@
+import { useContext } from 'react';
+import { AppContext } from '../../contexts';
+
+const useAppContext = () => useContext(AppContext);
+
+export default useAppContext;

package/admin/src/hooks/useModalContext.js

@@ -0,0 +1,6 @@
+import { useContext } from 'react';
+import InputModalDataManagerContext from '../contexts/InputModal/InputModalDataManager';
+
+const useModalContext = () => useContext(InputModalDataManagerContext);
+
+export default useModalContext;

package/admin/src/icons/BrokenFile/index.js

@@ -0,0 +1,91 @@
+import React from 'react';
+
+const BrokenFile = props => {
+  return (
+    <svg
+      width="48px"
+      height="55px"
+      viewBox="0 0 48 55"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <defs>
+        <filter
+          x="-1.7%"
+          y="-2.1%"
+          width="103.5%"
+          height="104.1%"
+          filterUnits="objectBoundingBox"
+          id="filter-1"
+        >
+          <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1" />
+          <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1" />
+          <feColorMatrix
+            values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.05 0"
+            type="matrix"
+            in="shadowBlurOuter1"
+            result="shadowMatrixOuter1"
+          />
+          <feMerge>
+            <feMergeNode in="shadowMatrixOuter1" />
+            <feMergeNode in="SourceGraphic" />
+          </feMerge>
+        </filter>
+      </defs>
+      <g strokeWidth="1" fill="none" fillRule="evenodd">
+        <g transform="translate(-649.000000, -362.000000)" fill="#919BAE" fillRule="nonzero">
+          <g filter="url(#filter-1)" transform="translate(323.000000, 181.000000)">
+            <g transform="translate(30.000000, 143.000000)">
+              <g transform="translate(219.000000, 0.000000)">
+                <g transform="translate(81.000000, 40.000000)">
+                  <path
+                    d="M12.6046679,27.5832436 C12.6095286,27.5828862 12.6144091,27.5828862 12.6192699,27.5832436 L12.6245362,27.576541 L12.6245362,27.576541 L15.0022741,24.5139437 L14.9955715,24.5086774 L14.9924596,24.5125075 L9.97486535,24.5125075 C9.75144624,24.5125075 9.5679234,24.5843208 9.42429683,24.7279473 C9.28067026,24.8715739 9.20885697,25.0550967 9.20885697,25.2785159 L9.20885697,26.8105326 C9.20885697,27.0339517 9.28067026,27.2174746 9.42429683,27.3611011 C9.5679234,27.5047277 9.75144624,27.576541 9.97486535,27.576541 L12.6101735,27.576541 L12.6046679,27.5832436 Z"
+                    id="Path"
+                  />
+                  <path
+                    d="M27.6888091,1.6277678 C27.2419709,1.18092958 26.6355476,0.797925394 25.8695392,0.478755236 C25.1035308,0.159585079 24.4013565,0 23.7630162,0 L2.31478157,0 C1.67644125,0 1.13385198,0.22341911 0.687013764,0.670257331 C0.240175544,1.11709555 0.0167564333,1.65968482 0.0167564333,2.29802513 L0.0167564333,40.598444 C0.0167564333,41.2367844 0.240175544,41.7793736 0.687013764,42.2262118 C0.735996042,42.2723467 0.778367716,42.3250293 0.812926391,42.3827648 C0.888569719,42.4198683 0.960383004,42.464632 1.03459007,42.5043686 L3.08797127,39.8609216 C3.085865,39.8498828 3.08506158,39.8386349 3.0855775,39.8274087 L3.08174746,39.8324357 L3.08174746,3.06403351 L21.4659485,3.06403351 L21.4659485,13.0221424 C21.4659485,13.6604827 21.6893676,14.203072 22.1362059,14.6499102 C22.1886141,14.6983281 22.2328333,14.7549158 22.2671454,14.8174746 L22.2858169,14.8318372 C22.3380012,14.8653501 22.4021544,14.883064 22.4574506,14.9125075 L24.529982,12.2429683 L24.529982,3.25553561 C24.9927788,3.41512069 25.3199282,3.59066427 25.5114303,3.78216637 L28.6568522,6.92758827 L30.5503291,4.48833034 L27.6888091,1.6277678 Z"
+                    id="Path"
+                  />
+                  <path
+                    d="M9.97486535,30.6403351 C9.75144624,30.6403351 9.5679234,30.7121484 9.42429683,30.855775 C9.28067026,30.9994016 9.20885697,31.1829244 9.20885697,31.4063435 L9.20885697,31.9509276 L9.20694195,31.953082 C9.21125075,31.9561939 9.21508079,31.9593058 9.21891083,31.9626571 L10.2324357,30.6570916 C10.2250783,30.6522434 10.2182575,30.6466263 10.2120886,30.6403351 L9.97486535,30.6403351 Z"
+                    id="Path"
+                  />
+                  <path
+                    d="M19.7620586,18.3777379 L19.7570317,18.3842011 L9.97486535,18.3842011 C9.75144624,18.3842011 9.5679234,18.4560144 9.42429683,18.5996409 C9.28067026,18.7432675 9.20885697,18.9267903 9.20885697,19.1502095 L9.20885697,20.6822262 C9.20885697,20.9056453 9.28067026,21.0891682 9.42429683,21.2327947 C9.5679234,21.3764213 9.75144624,21.4482346 9.97486535,21.4482346 L17.3237582,21.4482346 C17.3271095,21.4467983 17.329982,21.4451227 17.3333333,21.4439258 C17.3507235,21.4371428 17.3697825,21.4358889 17.3879114,21.4403351 L19.7611011,18.3842011 L19.7651706,18.3789348 L19.7620586,18.3777379 Z"
+                    id="Path"
+                  />
+                  <path
+                    d="M13.4501496,33.8436864 L12.4102932,35.1758229 C12.4119626,35.19142 12.4105804,35.207193 12.4062238,35.2222621 L13.4783962,33.8403351 L13.4803112,33.8379414 C13.470575,33.8412556 13.4604224,33.8431894 13.4501496,33.8436864 Z"
+                    id="Path"
+                  />
+                  <path
+                    d="M15.8467983,30.7743866 C15.8489884,30.7762577 15.8510666,30.778256 15.8530221,30.780371 L15.8561341,30.7763016 L15.8561341,30.7763016 L17.59617,28.5338121 L15.8467983,30.7743866 Z"
+                    id="Path"
+                  />
+                  <path
+                    d="M30.5733094,34.055775 C30.4296828,33.9121484 30.24616,33.8403351 30.0227409,33.8403351 L13.4783962,33.8403351 L12.4062238,35.2222621 C12.4057743,35.2240504 12.4052147,35.2258092 12.4045482,35.2275284 L12.4045482,36.1371634 C12.4045482,36.3605825 12.4763615,36.5441053 12.619988,36.6877319 C12.7636146,36.8313585 12.9471374,36.9031718 13.1705566,36.9031718 L30.0227409,36.9031718 C30.24616,36.9031718 30.4296828,36.8313585 30.5733094,36.6877319 C30.716936,36.5441053 30.7887493,36.3605825 30.7887493,36.1371634 L30.7887493,34.6051466 C30.7887493,34.382685 30.716936,34.1995611 30.5733094,34.055775 Z"
+                    id="Path"
+                  />
+                  <path
+                    d="M30.5733094,27.927708 C30.4296828,27.7840814 30.24616,27.7122681 30.0227409,27.7122681 L18.2369838,27.7122681 L18.239617,27.7089168 L18.2355476,27.7089168 L18.2329144,27.7122681 L18.2329144,27.7122681 L17.59617,28.5338121 L17.59617,28.5338121 L15.8554159,30.7772591 L30.0227409,30.7772591 C30.24616,30.7772591 30.4296828,30.7054458 30.5733094,30.5618193 C30.716936,30.4181927 30.7887493,30.2346699 30.7887493,30.0112507 L30.7887493,28.479234 C30.7887493,28.2553361 30.716936,28.0714941 30.5733094,27.927708 Z"
+                    id="Path"
+                  />
+                  <path
+                    d="M30.5733094,21.7996409 C30.4296828,21.6560144 30.24616,21.5842011 30.0227409,21.5842011 L23.0209455,21.5842011 L23.0242968,21.5801317 C23.0140369,21.5826692 23.0035075,21.5839553 22.9929384,21.5839617 L22.9879114,21.5839617 L22.9879114,21.5839617 L22.9879114,21.5839617 L20.6211849,24.6343507 C20.6252614,24.6386198 20.6290215,24.64318 20.6324357,24.6479952 L30.0232196,24.6479952 C30.2466387,24.6479952 30.4301616,24.5761819 30.5737882,24.4325554 C30.7174147,24.2889288 30.789228,24.1054059 30.789228,23.8819868 L30.789228,22.3499701 C30.7889088,22.1268701 30.716936,21.9434271 30.5733094,21.7996409 Z"
+                    id="Path"
+                  />
+                  <path
+                    d="M39.5020946,14.1156194 C39.1829244,13.349611 38.7999202,12.7431877 38.353082,12.2963495 L33.758468,7.70149611 L31.8704967,10.1347696 C31.8771755,10.1428415 31.8824366,10.1519878 31.8860563,10.1618193 L36.1986834,14.4746858 C36.3901855,14.6661879 36.5657291,14.9933373 36.7253142,15.4561341 L27.7419509,15.4561341 L25.677319,18.1170557 C25.6828221,18.131141 25.6909447,18.1440558 25.7012567,18.1551167 C26.1464991,18.5998803 26.3212448,18.5201676 26.958468,18.5201676 L36.9165769,18.5201676 L36.9165769,43.0324357 L6.35547576,43.0324357 C6.35123136,43.034836 6.34673598,43.0367626 6.34207062,43.0381807 L4.25302214,45.7309396 C4.69994016,46.1776182 4.87229204,46.0964692 5.51047277,46.0964692 L37.6828247,46.0964692 C38.321165,46.0964692 38.8637542,45.8730501 39.3105925,45.4262118 C39.7574307,44.9793736 39.9808498,44.4367844 39.9808498,43.798444 L39.9808498,16.2221424 C39.9808498,15.5836425 39.8212647,14.8814682 39.5020946,14.1156194 Z"
+                    id="Path"
+                  />
+                </g>
+              </g>
+            </g>
+          </g>
+        </g>
+      </g>
+    </svg>
+  );
+};
+
+export default BrokenFile;

package/admin/src/icons/Cloud/index.js

@@ -0,0 +1,35 @@
+import React from 'react';
+
+const Cloud = props => {
+  return (
+    <svg width="53" height="42" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <defs>
+        <filter
+          x="-1.7%"
+          y="-3.1%"
+          width="103.5%"
+          height="106.2%"
+          filterUnits="objectBoundingBox"
+          id="a"
+        >
+          <feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1" />
+          <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1" />
+          <feColorMatrix
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"
+            in="shadowBlurOuter1"
+            result="shadowMatrixOuter1"
+          />
+          <feMerge>
+            <feMergeNode in="shadowMatrixOuter1" />
+            <feMergeNode in="SourceGraphic" />
+          </feMerge>
+        </filter>
+      </defs>
+      <g transform="translate(-434 -135)" fill="#E9EAEB" fillRule="nonzero">
+        <path d="M467.222 156.644a.559.559 0 00-.158-.41l-6.187-6.27a.544.544 0 00-.405-.16.544.544 0 00-.404.16l-6.17 6.252a.674.674 0 00-.176.428.544.544 0 00.563.57h3.937v6.27c0 .154.056.288.167.4.112.113.244.17.396.17h3.375a.537.537 0 00.395-.17.551.551 0 00.167-.4v-6.27h3.938a.537.537 0 00.395-.17.551.551 0 00.167-.4zM483 161.156c0 2.5-.879 4.635-2.637 6.404-1.758 1.77-3.879 2.654-6.363 2.654h-25.5c-2.89 0-5.363-1.034-7.418-3.102-2.055-2.068-3.082-4.557-3.082-7.466 0-2.044.547-3.932 1.64-5.661a10.28 10.28 0 014.407-3.893c-.031-.472-.047-.81-.047-1.014 0-3.334 1.172-6.18 3.516-8.54C449.859 138.18 452.687 137 456 137c2.438 0 4.668.684 6.691 2.052a11.817 11.817 0 014.418 5.45c1.11-.976 2.407-1.463 3.891-1.463 1.656 0 3.07.59 4.242 1.77 1.172 1.179 1.758 2.602 1.758 4.269 0 1.195-.32 2.28-.96 3.255 2.03.488 3.698 1.553 5.003 3.197 1.305 1.643 1.957 3.518 1.957 5.626z" />
+      </g>
+    </svg>
+  );
+};
+
+export default Cloud;

package/admin/src/icons/DoubleFile/index.js

@@ -0,0 +1,35 @@
+import React from 'react';
+
+const DoubleFile = props => {
+  return (
+    <svg width="21" height="21" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <defs>
+        <filter
+          x="-1.7%"
+          y="-2.1%"
+          width="103.5%"
+          height="104.1%"
+          filterUnits="objectBoundingBox"
+          id="a"
+        >
+          <feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1" />
+          <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1" />
+          <feColorMatrix
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"
+            in="shadowBlurOuter1"
+            result="shadowMatrixOuter1"
+          />
+          <feMerge>
+            <feMergeNode in="shadowMatrixOuter1" />
+            <feMergeNode in="SourceGraphic" />
+          </feMerge>
+        </filter>
+      </defs>
+      <g transform="translate(-443 -195)" fill="#EEE" fillRule="nonzero">
+        <path d="M458.781 197h-8.125c-.673 0-1.219.546-1.219 1.219v1.219h-1.218c-.673 0-1.219.545-1.219 1.218v8.125c0 .673.546 1.219 1.219 1.219h8.125c.673 0 1.219-.546 1.219-1.219v-1.219h1.218c.673 0 1.219-.545 1.219-1.218v-8.125c0-.673-.546-1.219-1.219-1.219zm-2.59 11.781h-7.82a.152.152 0 01-.152-.152v-7.82c0-.085.068-.153.152-.153h1.067v5.688c0 .673.545 1.219 1.218 1.219h5.688v1.066a.152.152 0 01-.153.152zm2.438-2.437h-7.82a.152.152 0 01-.153-.153v-7.82c0-.084.068-.152.153-.152h7.82c.084 0 .152.068.152.152v7.82a.152.152 0 01-.152.153z" />
+      </g>
+    </svg>
+  );
+};
+
+export default DoubleFile;