feat: add responsivity to conversation view acc-63 (#13717)

* feat: add media query breakpoint to input bar

* address position of control buttons in scaled view

* isolate giphy button in a different component

* add giphy button to responsive view

* add responsive size to control buttons

* add breakpoints for displaying titlebar buttons

* add breakpoints for timestamp width

* display timestamps as column in scaled view

* rename onGifClick prop for consistency

* remove unused InputBarControls component

* refactor reused components and props inti variables

* reinstate ControlButtons test

* add test for titlebar responsive view

* rename center-column class to avoid duplicates

src/script/components/InputBar/index.tsx

@@ -58,7 +58,6 @@ import {TeamState} from '../../team/TeamState';
 import {UserState} from '../../user/UserState';
 import {SearchRepository} from '../../search/SearchRepository';
 import {ContentMessage} from '../../entity/message/ContentMessage';
-import InputBarControls from '../../page/message-list/InputBarControls';
 import {Conversation} from '../../entity/Conversation';
 import {AssetRepository} from '../../assets/AssetRepository';
 import {ConversationRepository} from '../../conversation/ConversationRepository';
@@ -81,8 +80,11 @@ import useScrollSync from '../../hooks/useScrollSync';
 import useResizeTarget from '../../hooks/useResizeTarget';
 import useDropFiles from '../../hooks/useDropFiles';
 import useTextAreaFocus from '../../hooks/useTextAreaFocus';
-import {StyledApp, THEME_ID} from '@wireapp/react-ui-kit';
 import PrimaryModal from '../Modals/PrimaryModal';
+import {StyledApp, THEME_ID, useMatchMedia} from '@wireapp/react-ui-kit';
+import ControlButtons from '../../page/message-list/InputBarControls/ControlButtons';
+import Icon from 'Components/Icon';
+import GiphyButton from '../../page/message-list/InputBarControls/GiphyButton';
 
 const CONFIG = {
   ...Config.getConfig(),
@@ -193,6 +195,14 @@ const InputBar = ({
 
   const richTextInput = getRichTextInput(currentMentions, inputValue);
 
+  const isScaledDown = useMatchMedia('max-width: 768px');
+
+  const config = {
+    GIPHY_TEXT_LENGTH: 256,
+  };
+
+  const showGiphyButton = inputValue.length > 0 && inputValue.length <= config.GIPHY_TEXT_LENGTH;
+
   const updateSelectionState = (updateOnInit = true) => {
     if (!updateOnInit) {
       return;
@@ -805,6 +815,37 @@ const InputBar = ({
     };
   }, [pastedFile]);
 
+  const sendButton = (
+    <li>
+      <button
+        type="button"
+        className={cx('controls-right-button controls-right-button--send')}
+        disabled={inputValue.length === 0}
+        title={t('tooltipConversationSendMessage')}
+        aria-label={t('tooltipConversationSendMessage')}
+        onClick={() => onSend(inputValue)}
+        data-uie-name="do-send-message"
+      >
+        <Icon.Send />
+      </button>
+    </li>
+  );
+
+  const controlButtonsProps = {
+    conversation: conversationEntity,
+    disableFilesharing: !isFileSharingSendingEnabled,
+    disablePing: pingDisabled,
+    input: inputValue,
+    isEditing: isEditing,
+    isScaledDown: isScaledDown,
+    onCancelEditing: cancelMessageEditing,
+    onClickPing: onPingClick,
+    onGifClick: onGifClick,
+    onSelectFiles: uploadFiles,
+    onSelectImages: uploadImages,
+    showGiphyButton: showGiphyButton,
+  };
+
   return (
     <StyledApp themeId={THEME_ID.DEFAULT}>
       <div id="conversation-input-bar" className="conversation-input-bar">
@@ -861,20 +902,22 @@ const InputBar = ({
                     suggestions={mentionSuggestions}
                     onSelectionValidated={addMention}
                   />
-
-                  <InputBarControls
-                    conversation={conversationEntity}
-                    input={inputValue}
-                    isEditing={isEditing}
-                    disablePing={pingDisabled}
-                    disableFilesharing={!isFileSharingSendingEnabled}
-                    onSend={() => onSend(inputValue)}
-                    onSelectFiles={uploadFiles}
-                    onSelectImages={uploadImages}
-                    onCancelEditing={cancelMessageEditing}
-                    onClickGif={onGifClick}
-                    onClickPing={onPingClick}
-                  />
+                  {isScaledDown ? (
+                    <>
+                      <ul className="controls-right buttons-group" css={{minWidth: '95px'}}>
+                        {showGiphyButton && <GiphyButton onGifClick={onGifClick} />}
+                        {sendButton}
+                      </ul>
+                      <ul className="controls-right buttons-group" css={{justifyContent: 'center', width: '100%'}}>
+                        <ControlButtons {...controlButtonsProps} isScaledDown={isScaledDown} />
+                      </ul>
+                    </>
+                  ) : (
+                    <ul className="controls-right buttons-group">
+                      <ControlButtons {...controlButtonsProps} showGiphyButton={showGiphyButton} />
+                      {sendButton}
+                    </ul>
+                  )}
                 </>
               )}
             </>

src/script/components/TitleBar/index.test.tsx

@@ -36,6 +36,14 @@ import {User} from '../../entity/User';
 import {QualifiedId} from '@wireapp/api-client/src/user';
 import {amplify} from 'amplify';
 import {ContentViewModel} from '../../view_model/ContentViewModel';
+import * as uiKit from '@wireapp/react-ui-kit';
+
+jest.mock('@wireapp/react-ui-kit', () => ({
+  ...(jest.requireActual('@wireapp/react-ui-kit') as any),
+  useMatchMedia: jest.fn(),
+}));
+
+const mockedUiKit = uiKit as jest.Mocked<typeof uiKit>;
 
 jest.spyOn(Runtime, 'isSupportingConferenceCalling').mockReturnValue(true);
 
@@ -137,6 +145,8 @@ describe('TitleBar', () => {
     const panelViewModel = createPanelViewModel();
     const conversation = createConversationEntity();
 
+    mockedUiKit.useMatchMedia.mockReturnValue(false);
+
     const {getByLabelText} = render(
       <TitleBar
         {...getDefaultProps(callingRepository)}
@@ -153,6 +163,16 @@ describe('TitleBar', () => {
       entity: conversation,
     });
   });
+  it('hide info button and search button on scaled down view', async () => {
+    mockedUiKit.useMatchMedia.mockReturnValue(true);
+
+    const {queryByLabelText} = render(<TitleBar {...getDefaultProps(callingRepository)} />);
+
+    const infoButton = queryByLabelText('tooltipConversationInfo');
+    const videoCallButton = queryByLabelText('tooltipConversationVideoCall');
+    expect(infoButton).toBe(null);
+    expect(videoCallButton).toBe(null);
+  });
 
   it("doesn't show legal-hold icon for non legal-hold user", async () => {
     const userState = createUserState({isActivatedAccount: ko.pureComputed(() => true)});
@@ -249,6 +269,8 @@ describe('TitleBar', () => {
   });
 
   it('starts video call on video call button click', async () => {
+    mockedUiKit.useMatchMedia.mockReturnValue(false);
+
     const firstUser = new User();
     const teamState = createTeamState({isVideoCallingEnabled: ko.pureComputed(() => true)});
     const conversation = createConversationEntity({