runfix: upload same image multiple times (#13969)

* runfix: wrapp image upload button with form and move it to separate file

* test: add ImageUploadButton component test

* refactor: organize directory structure in page folder

* refactor: reorganise folder structure

Author: PatrykBuniX

src/script/page/AccentColorPicker.test.tsx renamed to src/script/page/AccentColorPicker/AccentColorPicker.test.tsx

@@ -21,8 +21,8 @@ import {AccentColor} from '@wireapp/commons';
 
 import {render, act} from '@testing-library/react';
 
-import AccentColorPicker, {AccentColorPickerProps} from './AccentColorPicker';
-import {User} from '../entity/User';
+import {AccentColorPicker, AccentColorPickerProps} from './';
+import {User} from '../../entity/User';
 import ko from 'knockout';
 
 describe('AccentColorPicker', () => {

src/script/page/AccentColorPicker.tsx renamed to src/script/page/AccentColorPicker/AccentColorPicker.tsx

@@ -21,9 +21,9 @@ import React from 'react';
 import {CSS_SQUARE} from 'Util/CSSMixin';
 import {t} from 'Util/LocalizerUtil';
 import {CSSObject} from '@emotion/serialize';
-import {User} from '../entity/User';
+import {User} from '../../entity/User';
 import {useKoSubscribableChildren} from 'Util/ComponentUtil';
-import {ACCENT_ID} from '../Config';
+import {ACCENT_ID} from '../../Config';
 
 export interface AccentColorPickerProps {
   doSetAccentColor: (id: number) => void;
@@ -37,7 +37,7 @@ const headerStyles: CSSObject = {
   textAlign: 'center',
 };
 
-const AccentColorPicker: React.FunctionComponent<AccentColorPickerProps> = ({user, doSetAccentColor}) => {
+export const AccentColorPicker: React.FunctionComponent<AccentColorPickerProps> = ({user, doSetAccentColor}) => {
   const {accent_id: accentId} = useKoSubscribableChildren(user, ['accent_id']);
   return (
     <>
@@ -142,5 +142,3 @@ const AccentColorPicker: React.FunctionComponent<AccentColorPickerProps> = ({use
     </>
   );
 };
-
-export default AccentColorPicker;

src/script/page/AccentColorPicker/index.ts

@@ -0,0 +1,20 @@
+/*
+ * Wire
+ * Copyright (C) 2022 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+export * from './AccentColorPicker';

src/script/page/AppLock.test.tsx renamed to src/script/page/AppLock/AppLock.test.tsx

@@ -23,13 +23,13 @@ import {WebAppEvents} from '@wireapp/webapp-events';
 import {amplify} from 'amplify';
 import {FeatureStatus} from '@wireapp/api-client/src/team/feature/';
 
-import type {ClientRepository} from '../client/ClientRepository';
-import AppLock, {APPLOCK_STATE} from './AppLock';
-import {AppLockState} from '../user/AppLockState';
-import {AppLockRepository} from '../user/AppLockRepository';
-import {UserState} from '../user/UserState';
+import type {ClientRepository} from '../../client/ClientRepository';
+import AppLock, {APPLOCK_STATE} from './';
+import {AppLockState} from '../../user/AppLockState';
+import {AppLockRepository} from '../../user/AppLockRepository';
+import {UserState} from '../../user/UserState';
 import {createRandomUuid} from 'Util/util';
-import {TeamState} from '../team/TeamState';
+import {TeamState} from '../../team/TeamState';
 import {render} from '@testing-library/react';
 
 // https://github.com/jedisct1/libsodium.js/issues/235

src/script/page/AppLock.tsx renamed to src/script/page/AppLock/AppLock.tsx

@@ -26,15 +26,15 @@ import {StatusCodes as HTTP_STATUS} from 'http-status-codes';
 
 import {t} from 'Util/LocalizerUtil';
 
-import {ClientRepository} from '../client/ClientRepository';
-import {Config} from '../Config';
+import {ClientRepository} from '../../client/ClientRepository';
+import {Config} from '../../Config';
 import ModalComponent from 'Components/ModalComponent';
-import {SIGN_OUT_REASON} from '../auth/SignOutReason';
-import {ClientState} from '../client/ClientState';
-import {AppLockState} from '../user/AppLockState';
-import {AppLockRepository} from '../user/AppLockRepository';
+import {SIGN_OUT_REASON} from '../../auth/SignOutReason';
+import {ClientState} from '../../client/ClientState';
+import {AppLockState} from '../../user/AppLockState';
+import {AppLockRepository} from '../../user/AppLockRepository';
 import {registerReactComponent, useKoSubscribableChildren} from 'Util/ComponentUtil';
-import {ModalsViewModel} from '../view_model/ModalsViewModel';
+import {ModalsViewModel} from '../../view_model/ModalsViewModel';
 import Icon from 'Components/Icon';
 
 export enum APPLOCK_STATE {

src/script/page/AppLock/index.ts

@@ -0,0 +1,21 @@
+/*
+ * Wire
+ * Copyright (C) 2022 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+export * from './AppLock';
+export {default} from './AppLock';

src/script/page/MainContent/panels/preferences/AccountPreferences.tsx

@@ -39,7 +39,7 @@ import {RichProfileRepository} from '../../../../user/RichProfileRepository';
 import type {UserRepository} from '../../../../user/UserRepository';
 import {UserState} from '../../../../user/UserState';
 import {modals, ModalsViewModel} from '../../../../view_model/ModalsViewModel';
-import AccentColorPicker from '../../../AccentColorPicker';
+import {AccentColorPicker} from '../../../AccentColorPicker';
 import AccountInput from './accountPreferences/AccountInput';
 import AccountSecuritySection from './accountPreferences/AccountSecuritySection';
 import AvailabilityButtons from './accountPreferences/AvailabilityButtons';

src/script/page/message-list/AssetUploadButton.test.tsx renamed to src/script/page/message-list/AssetUploadButton/AssetUploadButton.test.tsx

@@ -18,9 +18,9 @@
  */
 
 import {render, fireEvent} from '@testing-library/react';
-import {AssetUploadButton} from './AssetUploadButton';
+import {AssetUploadButton} from './';
 
-jest.mock('../../Config', () => ({
+jest.mock('../../../Config', () => ({
   Config: {
     getConfig: () => ({
       ALLOWED_IMAGE_TYPES: ['image/gif', 'image/avif'],

src/script/page/message-list/AssetUploadButton.tsx renamed to src/script/page/message-list/AssetUploadButton/AssetUploadButton.tsx

@@ -18,7 +18,7 @@
  */
 
 import {useRef} from 'react';
-import {Config} from '../../Config';
+import {Config} from '../../../Config';
 import {t} from 'Util/LocalizerUtil';
 import Icon from 'Components/Icon';
 
@@ -28,7 +28,8 @@ interface AssetUploadButtonProps {
 
 export const AssetUploadButton = ({onSelectFiles}: AssetUploadButtonProps) => {
   const acceptedFileTypes = Config.getConfig().FEATURE.ALLOWED_FILE_UPLOAD_EXTENSIONS.join(',');
-  const fileRef = useRef<HTMLInputElement>(null!);
+
+  const fileRef = useRef<HTMLInputElement>(null);
   const formRef = useRef<HTMLFormElement>(null);
 
   const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {

src/script/page/message-list/AssetUploadButton/index.ts

@@ -0,0 +1,20 @@
+/*
+ * Wire
+ * Copyright (C) 2022 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+export * from './AssetUploadButton';

src/script/page/message-list/ImageUploadButton/ImageUploadButton.test.tsx

@@ -0,0 +1,66 @@
+/*
+ * Wire
+ * Copyright (C) 2022 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import {render, fireEvent} from '@testing-library/react';
+import {ImageUploadButton} from './';
+
+jest.mock('../../../Config', () => ({
+  Config: {
+    getConfig: () => ({
+      ALLOWED_IMAGE_TYPES: ['image/gif', 'image/avif'],
+      FEATURE: {ALLOWED_FILE_UPLOAD_EXTENSIONS: ['*']},
+    }),
+  },
+}));
+
+const pngFile = new File(['(⌐□_□)'], 'chucknorris.png', {type: 'image/png'});
+
+describe('ImageUploadButton', () => {
+  it('Does call onSelectImages with uploaded image file', () => {
+    const onSelectImages = jest.fn();
+
+    const {container} = render(<ImageUploadButton onSelectImages={onSelectImages} />);
+    const fileInput = container.querySelector('input[type="file"]') as HTMLInputElement;
+
+    fireEvent.change(fileInput, {
+      target: {files: [pngFile]},
+    });
+
+    expect(onSelectImages).toHaveBeenCalledWith([pngFile]);
+  });
+
+  it('Does reset a form with input after upload', () => {
+    const onSelectImages = jest.fn();
+
+    const {container} = render(<ImageUploadButton onSelectImages={onSelectImages} />);
+
+    const form = container.querySelector('form');
+    jest.spyOn(form!, 'reset');
+
+    const fileInput = container.querySelector('input[type="file"]') as HTMLInputElement;
+
+    fireEvent.change(fileInput, {
+      target: {files: [pngFile]},
+    });
+
+    expect(onSelectImages).toHaveBeenCalledWith([pngFile]);
+    expect(fileInput.files?.[0].name).toEqual(pngFile.name);
+    expect(form!.reset).toHaveBeenCalled();
+  });
+});

src/script/page/message-list/ImageUploadButton/ImageUploadButton.tsx

@@ -0,0 +1,69 @@
+/*
+ * Wire
+ * Copyright (C) 2022 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import {useRef} from 'react';
+import {t} from 'Util/LocalizerUtil';
+import Icon from 'Components/Icon';
+import {Config} from '../../../Config';
+
+interface ImageUploadButtonProps {
+  onSelectImages: (files: File[]) => void;
+}
+
+export const ImageUploadButton = ({onSelectImages}: ImageUploadButtonProps) => {
+  const acceptedImageTypes = Config.getConfig().ALLOWED_IMAGE_TYPES.join(',');
+
+  const imageRef = useRef<HTMLInputElement>(null);
+  const formRef = useRef<HTMLFormElement>(null);
+
+  const handleImageFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const {files} = event.target;
+
+    if (!files) {
+      return;
+    }
+
+    onSelectImages(Array.from(files));
+    formRef.current?.reset();
+  };
+
+  return (
+    <form ref={formRef}>
+      <button
+        type="button"
+        aria-label={t('tooltipConversationAddImage')}
+        title={t('tooltipConversationAddImage')}
+        className="conversation-button controls-right-button no-radius file-button"
+        onClick={() => imageRef.current?.click()}
+        data-uie-name="do-share-image"
+      >
+        <Icon.Image />
+
+        <input
+          ref={imageRef}
+          accept={acceptedImageTypes}
+          tabIndex={-1}
+          id="conversation-input-bar-photo"
+          onChange={handleImageFileChange}
+          type="file"
+        />
+      </button>
+    </form>
+  );
+};

src/script/page/message-list/ImageUploadButton/index.ts

@@ -0,0 +1,20 @@
+/*
+ * Wire
+ * Copyright (C) 2022 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+export * from './ImageUploadButton';

src/script/page/message-list/InputBarControls/ControlButtons.tsx

@@ -18,12 +18,12 @@
  */
 
 import Icon from 'Components/Icon';
-import React, {useRef} from 'react';
-import MessageTimerButton from '../MessageTimerButton';
+import React from 'react';
+import {MessageTimerButton} from '../MessageTimerButton';
 import {t} from 'Util/LocalizerUtil';
 import {Conversation} from 'src/script/entity/Conversation';
-import {Config} from '../../../Config';
 import {AssetUploadButton} from '../AssetUploadButton';
+import {ImageUploadButton} from '../ImageUploadButton';
 
 export type ControlButtonsProps = {
   input: string;
@@ -54,10 +54,6 @@ const ControlButtons: React.FC<ControlButtonsProps> = ({
   onCancelEditing,
   onClickGif,
 }) => {
-  const acceptedImageTypes = Config.getConfig().ALLOWED_IMAGE_TYPES.join(',');
-
-  const imageRef = useRef<HTMLInputElement>(null!);
-
   const pingTooltip = t('tooltipConversationPing');
 
   if (isEditing) {
@@ -96,25 +92,7 @@ const ControlButtons: React.FC<ControlButtonsProps> = ({
             </li>
 
             <li>
-              <button
-                type="button"
-                aria-label={t('tooltipConversationAddImage')}
-                title={t('tooltipConversationAddImage')}
-                className="conversation-button controls-right-button no-radius file-button"
-                onClick={() => imageRef.current?.click()}
-                data-uie-name="do-share-image"
-              >
-                <Icon.Image />
-
-                <input
-                  ref={imageRef}
-                  accept={acceptedImageTypes}
-                  tabIndex={-1}
-                  id="conversation-input-bar-photo"
-                  onChange={({target: {files}}) => files && onSelectImages(Array.from(files))}
-                  type="file"
-                />
-              </button>
+              <ImageUploadButton onSelectImages={onSelectImages} />
             </li>
 
             <li>