From a9a879d00d244236a9347fc6bd5bcea72dbd96a6 Mon Sep 17 00:00:00 2001 From: Ashish Dhama <16203333+AshishDhama@users.noreply.github.com> Date: Mon, 20 Nov 2023 09:30:14 +0530 Subject: [PATCH] MM-40414: Add empty state icons (#25282) Automatic Merge --- .../accessibility_buttons_spec.js | 6 +- .../accessibility/accessibility_post_spec.js | 4 +- .../channels/bot_accounts/tags_spec.js | 8 +- .../channels/channel/channel_info_rhs_spec.js | 2 +- ...pen_rhs_coming_from_system_console_spec.ts | 24 +-- .../channels/emoji/custom_emoji_1_spec.ts | 2 +- .../channels/emoji/custom_emoji_2_spec.ts | 2 +- .../channels/emoji/custom_emoji_3_spec.ts | 4 +- .../keyboard_shortcuts/dot_menu_spec.js | 2 +- .../esc_close_modal_spec.js | 2 +- .../channels/messaging/pinned_posts_1_spec.js | 2 +- .../channels/messaging/pinned_posts_2_spec.js | 36 ++-- .../messaging/post_options_menu_spec.js | 2 +- .../messaging/post_pre_header_spec.js | 2 +- .../messaging/private_channel_open_spec.js | 2 +- .../channels/messaging/save_post_spec.js | 2 +- .../channels/search/clear_input_spec.js | 4 +- .../search/cleared_search_term_spec.js | 4 +- .../channels/search_filter/helpers.js | 2 +- .../channels/search_filter/negative_spec.js | 2 +- .../playbooks/channels/rhs_spec.js | 6 +- .../cypress/tests/support/ui/global_header.js | 2 +- e2e-tests/cypress/tests/support/ui/post.ts | 8 +- .../header_icon_wrapper.test.tsx.snap | 4 +- .../components/header_icon_wrapper.tsx | 4 +- .../components/channel_info_rhs/menu.test.tsx | 2 +- .../src/components/channel_info_rhs/menu.tsx | 2 +- .../channel_files_svg.tsx | 63 ++++++ .../channel_search_svg.tsx | 75 ++++++++ .../common/svg_images_components/index.ts | 11 ++ .../svg_images_components/mentons_svg.tsx | 62 ++++++ .../common/svg_images_components/pin_svg.tsx | 54 ++++++ .../saved_messages_svg.tsx | 59 ++++++ .../svg_images_components/search_svg.tsx | 51 +++++ .../user_groups_members_svg.tsx | 61 ++++++ .../svg_images_components/user_groups_svg.tsx | 182 ++++++++++++++++++ .../components/emoji_picker/emoji_picker.tsx | 10 +- .../components/gif_picker_items.tsx | 4 +- .../saved_posts_button.test.tsx.snap | 4 +- .../saved_posts_button/saved_posts_button.tsx | 4 +- .../__snapshots__/main_menu.test.tsx.snap | 6 +- .../src/components/main_menu/main_menu.tsx | 2 +- .../no_results_indicator.test.tsx.snap | 10 +- .../no_results_indicator.scss | 9 +- .../no_results_indicator.test.tsx | 2 +- .../no_results_indicator.tsx | 44 +++-- .../components/no_results_indicator/types.ts | 4 +- .../post_flag_icon.test.tsx.snap | 2 +- .../post_flag_icon/post_flag_icon.tsx | 2 +- .../quick_switch_modal/quick_switch_modal.tsx | 4 +- .../rhs_card_header/rhs_card_header.tsx | 4 +- .../rhs_header_post/rhs_header_post.tsx | 4 +- .../search_results/search_results.tsx | 37 +++- .../user_groups_list/user_groups_list.tsx | 4 +- .../view_user_group_modal.tsx | 4 +- webapp/channels/src/i18n/en.json | 38 ++-- .../main_menu_action.test.tsx.snap | 2 +- 57 files changed, 809 insertions(+), 151 deletions(-) create mode 100644 webapp/channels/src/components/common/svg_images_components/channel_files_svg.tsx create mode 100644 webapp/channels/src/components/common/svg_images_components/channel_search_svg.tsx create mode 100644 webapp/channels/src/components/common/svg_images_components/index.ts create mode 100644 webapp/channels/src/components/common/svg_images_components/mentons_svg.tsx create mode 100644 webapp/channels/src/components/common/svg_images_components/pin_svg.tsx create mode 100644 webapp/channels/src/components/common/svg_images_components/saved_messages_svg.tsx create mode 100644 webapp/channels/src/components/common/svg_images_components/search_svg.tsx create mode 100644 webapp/channels/src/components/common/svg_images_components/user_groups_members_svg.tsx create mode 100644 webapp/channels/src/components/common/svg_images_components/user_groups_svg.tsx diff --git a/e2e-tests/cypress/tests/integration/channels/accessibility/accessibility_buttons_spec.js b/e2e-tests/cypress/tests/integration/channels/accessibility/accessibility_buttons_spec.js index 1729249f08..8de18e0e5d 100644 --- a/e2e-tests/cypress/tests/integration/channels/accessibility/accessibility_buttons_spec.js +++ b/e2e-tests/cypress/tests/integration/channels/accessibility/accessibility_buttons_spec.js @@ -69,13 +69,13 @@ describe('Verify Accessibility Support in different Buttons', () => { tab({shift: true}). tab(); - // # Press tab until the focus is on the Pinned posts button + // # Press tab until the focus is on the Pinned messages button cy.focused().tab().tab(); - // * Verify accessibility support in Pinned Posts button + // * Verify accessibility support in Pinned messages button cy.uiGetChannelPinButton(). should('be.focused'). - and('have.attr', 'aria-label', 'Pinned posts'). + and('have.attr', 'aria-label', 'Pinned messages'). tab().tab().tab().tab(); }); }); diff --git a/e2e-tests/cypress/tests/integration/channels/accessibility/accessibility_post_spec.js b/e2e-tests/cypress/tests/integration/channels/accessibility/accessibility_post_spec.js index b3cf28dc06..3d6cf80930 100644 --- a/e2e-tests/cypress/tests/integration/channels/accessibility/accessibility_post_spec.js +++ b/e2e-tests/cypress/tests/integration/channels/accessibility/accessibility_post_spec.js @@ -185,7 +185,7 @@ describe('Verify Accessibility Support in Post', () => { cy.focused().tab(); // * Verify focus is on the save post button - cy.get(`#CENTER_flagIcon_${postId}`).should('be.focused').and('have.attr', 'aria-label', 'save'); + cy.get(`#CENTER_flagIcon_${postId}`).should('be.focused').and('have.attr', 'aria-label', 'save message'); cy.focused().tab(); // * Verify focus is on message actions button @@ -243,7 +243,7 @@ describe('Verify Accessibility Support in Post', () => { cy.focused().tab({shift: true}); // * Verify focus is on the save icon - cy.get(`#RHS_COMMENT_flagIcon_${postId}`).should('be.focused').and('have.attr', 'aria-label', 'save'); + cy.get(`#RHS_COMMENT_flagIcon_${postId}`).should('be.focused').and('have.attr', 'aria-label', 'save message'); cy.focused().tab({shift: true}); // * Verify focus is on the reactions button diff --git a/e2e-tests/cypress/tests/integration/channels/bot_accounts/tags_spec.js b/e2e-tests/cypress/tests/integration/channels/bot_accounts/tags_spec.js index 691f359e28..cf891f67fc 100644 --- a/e2e-tests/cypress/tests/integration/channels/bot_accounts/tags_spec.js +++ b/e2e-tests/cypress/tests/integration/channels/bot_accounts/tags_spec.js @@ -73,21 +73,21 @@ describe('Bot tags', () => { rhsPostHasBotBadge(postId); }); - it('MM-T1833 BOT tag is visible in Pinned Posts', () => { + it('MM-T1833 BOT tag is visible in Pinned Messages', () => { // # Open pinned posts cy.uiGetChannelPinButton().click(); // * Verify bot badge - cy.get('.sidebar--right__title').should('contain.text', 'Pinned Posts'); + cy.get('.sidebar--right__title').should('contain.text', 'Pinned messages'); rhsPostHasBotBadge(postId); }); - it('MM-T3659 BOT tag is visible in Saved Posts', () => { + it('MM-T3659 BOT tag is visible in Saved Messages', () => { // # Open saved posts cy.uiGetSavedPostButton().click(); // * Verify bot badge - cy.get('.sidebar--right__title').should('contain.text', 'Saved Posts'); + cy.get('.sidebar--right__title').should('contain.text', 'Saved messages'); rhsPostHasBotBadge(postId); }); }); diff --git a/e2e-tests/cypress/tests/integration/channels/channel/channel_info_rhs_spec.js b/e2e-tests/cypress/tests/integration/channels/channel/channel_info_rhs_spec.js index f7da2c6c78..624eea18b0 100644 --- a/e2e-tests/cypress/tests/integration/channels/channel/channel_info_rhs_spec.js +++ b/e2e-tests/cypress/tests/integration/channels/channel/channel_info_rhs_spec.js @@ -248,7 +248,7 @@ describe('Channel Info RHS', () => { cy.get('#channel-info-btn').click(); // # Click on "Pinned Messages" - cy.uiGetRHS().findByTestId('channel_info_rhs-menu').findByText('Pinned Messages').should('be.visible').click(); + cy.uiGetRHS().findByTestId('channel_info_rhs-menu').findByText('Pinned messages').should('be.visible').click(); // * Ensure we see the Pinned Post RHS cy.uiGetRHS().findByText('Hello channel info rhs spec').should('be.visible'); diff --git a/e2e-tests/cypress/tests/integration/channels/channel/open_rhs_coming_from_system_console_spec.ts b/e2e-tests/cypress/tests/integration/channels/channel/open_rhs_coming_from_system_console_spec.ts index d07746ecf8..8683b4f197 100644 --- a/e2e-tests/cypress/tests/integration/channels/channel/open_rhs_coming_from_system_console_spec.ts +++ b/e2e-tests/cypress/tests/integration/channels/channel/open_rhs_coming_from_system_console_spec.ts @@ -72,32 +72,32 @@ describe('Channel RHS', () => { verifyRHSisOpenAndHasTitle('Recent Mentions'); }); - it('MM-T5312 - should be able to open saved posts, visit the system console and come back without issues', () => { - // # Click on the saved posts button + it('MM-T5312 - should be able to open saved messages, visit the system console and come back without issues', () => { + // # Click on the saved messages button cy.uiGetSavedPostButton().click(); - // * Verify that the saved posts is opened in RHS - verifyRHSisOpenAndHasTitle('Saved Posts'); + // * Verify that the saved messages is opened in RHS + verifyRHSisOpenAndHasTitle('Saved messages'); // # visit the system console and leave it openSystemConsoleAndLeave(); - // * Verify that the saved posts is still opened in RHS - verifyRHSisOpenAndHasTitle('Saved Posts'); + // * Verify that the saved messages is still opened in RHS + verifyRHSisOpenAndHasTitle('Saved messages'); }); - it('MM-T5313 - should be able to open pinned posts, visit the system console and come back without issues', () => { - // # Click on the pinned posts button + it('MM-T5313 - should be able to open Pinned messages, visit the system console and come back without issues', () => { + // # Click on the Pinned messages button cy.uiGetChannelPinButton().click(); - // * Verify that the pinned posts is opened in RHS - verifyRHSisOpenAndHasTitle('Pinned Posts'); + // * Verify that the Pinned messages is opened in RHS + verifyRHSisOpenAndHasTitle('Pinned messages'); // # visit the system console and leave it openSystemConsoleAndLeave(); - // * Verify that the pinned posts is still opened in RHS - verifyRHSisOpenAndHasTitle('Pinned Posts'); + // * Verify that the Pinned messages is still opened in RHS + verifyRHSisOpenAndHasTitle('Pinned messages'); }); it('MM-T5314 - should be able to open channel members, visit the system console and come back without issues', () => { diff --git a/e2e-tests/cypress/tests/integration/channels/emoji/custom_emoji_1_spec.ts b/e2e-tests/cypress/tests/integration/channels/emoji/custom_emoji_1_spec.ts index e484e156bb..cdbac28884 100644 --- a/e2e-tests/cypress/tests/integration/channels/emoji/custom_emoji_1_spec.ts +++ b/e2e-tests/cypress/tests/integration/channels/emoji/custom_emoji_1_spec.ts @@ -95,7 +95,7 @@ describe('Custom emojis', () => { cy.findByPlaceholderText('Search emojis').should('be.visible').type(customEmoji, {delay: TIMEOUTS.QUARTER_SEC}); // * Validate that we cannot find the emoji name in the search result list - cy.get('.no-results__title').should('be.visible').and('have.text', 'No results for "' + customEmoji + '"'); + cy.get('.no-results__title').should('be.visible').and('have.text', 'No results for “' + customEmoji + '”'); }); it('MM-T2182 Custom emoji - animated gif', () => { diff --git a/e2e-tests/cypress/tests/integration/channels/emoji/custom_emoji_2_spec.ts b/e2e-tests/cypress/tests/integration/channels/emoji/custom_emoji_2_spec.ts index c2c177de50..f5b6f96a71 100644 --- a/e2e-tests/cypress/tests/integration/channels/emoji/custom_emoji_2_spec.ts +++ b/e2e-tests/cypress/tests/integration/channels/emoji/custom_emoji_2_spec.ts @@ -78,7 +78,7 @@ describe('Custom emojis', () => { cy.findByPlaceholderText('Search emojis').should('be.visible').type(emojiNameForSearch1, {delay: TIMEOUTS.QUARTER_SEC}); // * Get list of emojis based on search text - cy.get('.no-results__title').should('be.visible').and('have.text', 'No results for "' + emojiNameForSearch1 + '"'); + cy.get('.no-results__title').should('be.visible').and('have.text', 'No results for “' + emojiNameForSearch1 + '”'); // # Search for an existing emoji cy.findByPlaceholderText('Search emojis').should('be.visible').clear().type(emojiNameForSearch2, {delay: TIMEOUTS.QUARTER_SEC}); diff --git a/e2e-tests/cypress/tests/integration/channels/emoji/custom_emoji_3_spec.ts b/e2e-tests/cypress/tests/integration/channels/emoji/custom_emoji_3_spec.ts index 6f0c6c2b2d..9702ceb851 100644 --- a/e2e-tests/cypress/tests/integration/channels/emoji/custom_emoji_3_spec.ts +++ b/e2e-tests/cypress/tests/integration/channels/emoji/custom_emoji_3_spec.ts @@ -218,7 +218,7 @@ describe('Custom emojis', () => { cy.findByPlaceholderText('Search emojis').should('be.visible').type(customEmojiWithColons, {delay: TIMEOUTS.HALF_SEC}); // * Get list of emojis based on search text - cy.get('.no-results__title').should('be.visible').and('have.text', 'No results for "' + customEmoji + '"'); + cy.get('.no-results__title').should('be.visible').and('have.text', 'No results for “' + customEmoji + '”'); // # Navigate to a channel cy.visit(townsquareLink); @@ -302,7 +302,7 @@ describe('Custom emojis', () => { cy.findByPlaceholderText('Search emojis').should('be.visible').type(customEmojiWithColons, {delay: TIMEOUTS.HALF_SEC}); // * Get list of emojis based on search text - cy.get('.no-results__title').should('be.visible').and('have.text', 'No results for "' + customEmoji + '"'); + cy.get('.no-results__title').should('be.visible').and('have.text', 'No results for “' + customEmoji + '”'); // # Navigate to a channel cy.visit(townsquareLink); diff --git a/e2e-tests/cypress/tests/integration/channels/keyboard_shortcuts/dot_menu_spec.js b/e2e-tests/cypress/tests/integration/channels/keyboard_shortcuts/dot_menu_spec.js index db50836ddf..9f3678a8c1 100644 --- a/e2e-tests/cypress/tests/integration/channels/keyboard_shortcuts/dot_menu_spec.js +++ b/e2e-tests/cypress/tests/integration/channels/keyboard_shortcuts/dot_menu_spec.js @@ -98,7 +98,7 @@ describe('Keyboard Shortcuts', () => { cy.findByText('Saved').should('not.exist'); // # Save Post - cy.uiPostDropdownMenuShortcut(postId, 'Save', 'S', 'RHS_ROOT'); + cy.uiPostDropdownMenuShortcut(postId, 'Save Message', 'S', 'RHS_ROOT'); // * Verify post is Saved cy.get(`#post_${postId}`).find('.post-pre-header').should('be.visible').and('have.text', 'Saved'); diff --git a/e2e-tests/cypress/tests/integration/channels/keyboard_shortcuts/esc_close_modal_spec.js b/e2e-tests/cypress/tests/integration/channels/keyboard_shortcuts/esc_close_modal_spec.js index 44aa605b0b..a081d24ae2 100644 --- a/e2e-tests/cypress/tests/integration/channels/keyboard_shortcuts/esc_close_modal_spec.js +++ b/e2e-tests/cypress/tests/integration/channels/keyboard_shortcuts/esc_close_modal_spec.js @@ -30,7 +30,7 @@ describe('Keyboard Shortcuts', () => { cy.get('#quickSwitchInput').typeWithForce(searchTerm); // * Verify that the no search result test is displayed - cy.get('.no-results__title').should('be.visible').and('have.text', 'No results for "' + searchTerm + '"'); + cy.get('.no-results__title').should('be.visible').and('have.text', 'No results for “' + searchTerm + '”'); // # Press escape key cy.get('#quickSwitchInput').typeWithForce('{esc}'); diff --git a/e2e-tests/cypress/tests/integration/channels/messaging/pinned_posts_1_spec.js b/e2e-tests/cypress/tests/integration/channels/messaging/pinned_posts_1_spec.js index 572cbce265..e720adb89a 100644 --- a/e2e-tests/cypress/tests/integration/channels/messaging/pinned_posts_1_spec.js +++ b/e2e-tests/cypress/tests/integration/channels/messaging/pinned_posts_1_spec.js @@ -40,7 +40,7 @@ describe('Messaging', () => { cy.uiGetChannelPinButton().click(); // * RHS title displays as "Pinned Posts" and "[channel name]" - cy.get('#sidebar-right').should('be.visible').and('contain', 'Pinned Posts').and('contain', `${testChannel.display_name}`); + cy.get('#sidebar-right').should('be.visible').and('contain', 'Pinned messages').and('contain', `${testChannel.display_name}`); // * Pinned post appear in RHS cy.get(`#rhsPostMessageText_${postId}`).should('exist'); diff --git a/e2e-tests/cypress/tests/integration/channels/messaging/pinned_posts_2_spec.js b/e2e-tests/cypress/tests/integration/channels/messaging/pinned_posts_2_spec.js index 05df85c702..fa157e76ed 100644 --- a/e2e-tests/cypress/tests/integration/channels/messaging/pinned_posts_2_spec.js +++ b/e2e-tests/cypress/tests/integration/channels/messaging/pinned_posts_2_spec.js @@ -12,7 +12,7 @@ import {getAdminAccount} from '../../../support/env'; -describe('Pinned posts', () => { +describe('pinned messages', () => { let testTeam; let testChannel; let testUser; @@ -62,12 +62,12 @@ describe('Pinned posts', () => { // # Click pin icon cy.uiGetChannelPinButton().click(); - // * Should not have any pinned posts - cy.get('#search-items-container .no-results__title').should('have.text', 'No pinned posts yet'); + // * Should not have any pinned messages + cy.get('#search-items-container .no-results__title').should('have.text', 'No pinned messages yet'); }); }); - it('MM-T2174 Switching channels in center also changes pinned posts RHS', () => { + it('MM-T2174 Switching channels in center also changes pinned messages RHS', () => { // # Login cy.apiLogin(testUser); @@ -81,16 +81,16 @@ describe('Pinned posts', () => { // # Click pin icon cy.uiGetChannelPinButton().click(); - // * Number of pinned posts in RHS should be 1 + // * Number of pinned messages in RHS should be 1 cy.findByTestId('search-item-container').should('have.length', 1); // # Go to town square cy.get('#sidebarItem_town-square').should('be.visible').click(); - // * Should not have any pinned posts - cy.get('#search-items-container .no-results__title').should('have.text', 'No pinned posts yet'); + // * Should not have any pinned messages + cy.get('#search-items-container .no-results__title').should('have.text', 'No pinned messages yet'); - // * Number of pinned posts in RHS should be 0 + // * Number of pinned messages in RHS should be 0 cy.findByTestId('search-item-container').should('not.exist'); // # Visit a test channel @@ -117,7 +117,7 @@ describe('Pinned posts', () => { return cy.getLastPostId(); }).then((postId) => { - // * Number of pinned posts in RHS should be 0 + // * Number of pinned messages in RHS should be 0 cy.findByTestId('search-item-container').should('not.exist'); // # Pin the post @@ -131,7 +131,7 @@ describe('Pinned posts', () => { }); }); - it('MM-T2177 Deleting pinned post while viewing RHS pinned posts removes post from RHS', () => { + it('MM-T2177 Deleting pinned post while viewing RHS pinned messages removes post from RHS', () => { // # Login cy.apiLogin(testUser); @@ -141,8 +141,8 @@ describe('Pinned posts', () => { // # Click pin icon cy.uiGetChannelPinButton().click(); - // * Should not have any pinned posts - cy.get('#search-items-container .no-results__title').should('have.text', 'No pinned posts yet'); + // * Should not have any pinned messages + cy.get('#search-items-container .no-results__title').should('have.text', 'No pinned messages yet'); // # Post a message cy.postMessage('Hello again'); @@ -162,8 +162,8 @@ describe('Pinned posts', () => { cy.get(`#delete_post_${postId}`).scrollIntoView().should('be.visible').click(); cy.get('#deletePostModalButton').should('be.visible').click(); - // * Should not have any pinned posts - cy.get('#search-items-container .no-results__title').should('have.text', 'No pinned posts yet'); + // * Should not have any pinned messages + cy.get('#search-items-container .no-results__title').should('have.text', 'No pinned messages yet'); // * Post should be deleted cy.get(`#post_${postId}`).should('not.exist'); @@ -200,15 +200,15 @@ describe('Pinned posts', () => { // # Click pin icon cy.uiGetChannelPinButton().click(); - // * Should not have any pinned posts - cy.get('#search-items-container .no-results__title').should('have.text', 'No pinned posts yet'); + // * Should not have any pinned messages + cy.get('#search-items-container .no-results__title').should('have.text', 'No pinned messages yet'); // * The old post should be gone cy.get(`#post_${postId}`).should('not.exist'); }); }); - it('MM-T2922 Pinned post count indicates the number of pinned posts in currently viewed channel', () => { + it('MM-T2922 Pinned post count indicates the number of pinned messages in currently viewed channel', () => { // # Login cy.apiLogin(testUser); @@ -274,7 +274,7 @@ describe('Pinned posts', () => { // * Pinned count should be 1 cy.get('#channelPinnedPostCountText').should('have.text', '1'); - // * Number of pinned posts in RHS should also be 1 + // * Number of pinned messages in RHS should also be 1 cy.findByTestId('search-item-container').should('have.length', 1); }); }); diff --git a/e2e-tests/cypress/tests/integration/channels/messaging/post_options_menu_spec.js b/e2e-tests/cypress/tests/integration/channels/messaging/post_options_menu_spec.js index 15efcce2c4..0c2d109b5f 100644 --- a/e2e-tests/cypress/tests/integration/channels/messaging/post_options_menu_spec.js +++ b/e2e-tests/cypress/tests/integration/channels/messaging/post_options_menu_spec.js @@ -52,7 +52,7 @@ describe('Messaging', () => { cy.findByText('Add Reaction').should('be.visible'); cy.findByText('Mark as Unread').should('be.visible'); cy.findByText('Copy Link').should('be.visible'); - cy.findByText('Save').should('be.visible'); + cy.findByText('Save Message').should('be.visible'); cy.findByText('Pin to Channel').should('be.visible'); cy.findByText('Edit').should('be.visible'); cy.findByText('Delete').should('be.visible'); diff --git a/e2e-tests/cypress/tests/integration/channels/messaging/post_pre_header_spec.js b/e2e-tests/cypress/tests/integration/channels/messaging/post_pre_header_spec.js index 2c4eeca231..dbffe98a24 100644 --- a/e2e-tests/cypress/tests/integration/channels/messaging/post_pre_header_spec.js +++ b/e2e-tests/cypress/tests/integration/channels/messaging/post_pre_header_spec.js @@ -104,7 +104,7 @@ describe('Post PreHeader', () => { cy.get('#searchContainer').should('be.visible').within(() => { cy.get('.sidebar--right__title'). should('be.visible'). - and('contain', 'Pinned Posts'). + and('contain', 'Pinned messages'). and('contain', 'Off-Topic'); // * Check that the post pre-header is not shown for the pinned message in RHS diff --git a/e2e-tests/cypress/tests/integration/channels/messaging/private_channel_open_spec.js b/e2e-tests/cypress/tests/integration/channels/messaging/private_channel_open_spec.js index e66ab5fcee..8cd2299094 100644 --- a/e2e-tests/cypress/tests/integration/channels/messaging/private_channel_open_spec.js +++ b/e2e-tests/cypress/tests/integration/channels/messaging/private_channel_open_spec.js @@ -35,7 +35,7 @@ describe('Messaging - Opening a private channel using keyboard shortcuts', () => cy.findByRole('textbox', {name: 'quick switch input'}).type('Pr').type('{downarrow}').type('{enter}'); // * Private channel opens - cy.get('#channelHeaderTitle').should('be.visible').should('contain', 'Private channel').wait(TIMEOUTS.HALF_SEC); + cy.get('#channelHeaderTitle').should('be.visible').should('contain', 'Private').wait(TIMEOUTS.HALF_SEC); // * Focus in the message box cy.uiGetPostTextBox().should('be.focused'); diff --git a/e2e-tests/cypress/tests/integration/channels/messaging/save_post_spec.js b/e2e-tests/cypress/tests/integration/channels/messaging/save_post_spec.js index 366add13d4..d6c7467a38 100644 --- a/e2e-tests/cypress/tests/integration/channels/messaging/save_post_spec.js +++ b/e2e-tests/cypress/tests/integration/channels/messaging/save_post_spec.js @@ -33,7 +33,7 @@ describe('Save Post', () => { cy.get('@postId1').then((postId) => { // # Save message by clicking the menu item in the dotmenu - cy.uiClickPostDropdownMenu(postId, 'Save'); + cy.uiClickPostDropdownMenu(postId, 'Save Message'); // * Assert the post pre-header is displayed and works as expected verifySavedPost(postId, message); diff --git a/e2e-tests/cypress/tests/integration/channels/search/clear_input_spec.js b/e2e-tests/cypress/tests/integration/channels/search/clear_input_spec.js index 214dca8ed3..1bb559ce2d 100644 --- a/e2e-tests/cypress/tests/integration/channels/search/clear_input_spec.js +++ b/e2e-tests/cypress/tests/integration/channels/search/clear_input_spec.js @@ -56,12 +56,12 @@ describe('Search', () => { cy.uiGetChannelPinButton().click(); // * Verify the pinned post RHS is open - cy.uiGetRHS().should('contain', 'Pinned Posts'); + cy.uiGetRHS().should('contain', 'Pinned messages'); // # Now click on the saved post button from the header cy.uiGetSavedPostButton().click(); // * Verify the pinned post RHS is open - cy.uiGetRHS().should('contain', 'Saved posts'); + cy.uiGetRHS().should('contain', 'Saved messages'); }); }); diff --git a/e2e-tests/cypress/tests/integration/channels/search/cleared_search_term_spec.js b/e2e-tests/cypress/tests/integration/channels/search/cleared_search_term_spec.js index bee56c28a0..ecd363e21b 100644 --- a/e2e-tests/cypress/tests/integration/channels/search/cleared_search_term_spec.js +++ b/e2e-tests/cypress/tests/integration/channels/search/cleared_search_term_spec.js @@ -45,9 +45,9 @@ describe('Search', () => { // # Verify that the cleared search text does not appear on the search box cy.uiGetSearchBox().should('be.empty'); - // # Click the pin icon to open the pinned posts RHS + // # Click the pin icon to open the pinned messages RHS cy.uiGetChannelPinButton().click(); - cy.uiGetRHS().should('contain', 'Pinned Posts'); + cy.uiGetRHS().should('contain', 'Pinned messages'); // # Verify that the Search term input box is still cleared and search term does not reappear when RHS opens cy.uiGetSearchBox().and('be.empty'); diff --git a/e2e-tests/cypress/tests/integration/channels/search_filter/helpers.js b/e2e-tests/cypress/tests/integration/channels/search_filter/helpers.js index caf163ca1f..bfa2e22c31 100644 --- a/e2e-tests/cypress/tests/integration/channels/search_filter/helpers.js +++ b/e2e-tests/cypress/tests/integration/channels/search_filter/helpers.js @@ -34,7 +34,7 @@ export function searchAndValidate(query, expectedResults = []) { }); } else { // * If we expect no results, verify results message - cy.get('.no-results__title').should('be.visible').and('have.text', `No results for "${query}"`); + cy.get('.no-results__title').should('be.visible').and('have.text', `No results for “${query}”`); } }); diff --git a/e2e-tests/cypress/tests/integration/channels/search_filter/negative_spec.js b/e2e-tests/cypress/tests/integration/channels/search_filter/negative_spec.js index c507919768..b414be4936 100644 --- a/e2e-tests/cypress/tests/integration/channels/search_filter/negative_spec.js +++ b/e2e-tests/cypress/tests/integration/channels/search_filter/negative_spec.js @@ -86,7 +86,7 @@ function searchAndVerify(query, expectedMessage) { search(`-${query}`); // * If we expect no results, verify results message - cy.get('.no-results__title').should('be.visible').and('have.text', `No results for "-${query}"`); + cy.get('.no-results__title').should('be.visible').and('have.text', `No results for “-${query}”`); cy.uiCloseRHS(); cy.uiGetRHSSearchContainer({visible: false}); diff --git a/e2e-tests/cypress/tests/integration/playbooks/channels/rhs_spec.js b/e2e-tests/cypress/tests/integration/playbooks/channels/rhs_spec.js index 2496db6e38..2ab882c9d0 100644 --- a/e2e-tests/cypress/tests/integration/playbooks/channels/rhs_spec.js +++ b/e2e-tests/cypress/tests/integration/playbooks/channels/rhs_spec.js @@ -81,7 +81,7 @@ describe('channels > rhs', {testIsolation: true}, () => { if ($body.find('#channelHeaderFlagButton').length > 0) { cy.get('#channelHeaderFlagButton').click({force: true}); } else { - cy.findByRole('button', {name: 'Saved posts'}). + cy.findByRole('button', {name: 'Saved messages'}). click({force: true}); } }); @@ -346,11 +346,11 @@ describe('channels > rhs', {testIsolation: true}, () => { cy.get('#post-create').should('exist'); // # Open the saved posts RHS - cy.findByRole('button', {name: 'Saved posts'}). + cy.findByRole('button', {name: 'Saved messages'}). click({force: true}); // * Verify Saved Posts is open - cy.get('.sidebar--right__title').should('contain.text', 'Saved Posts'); + cy.get('.sidebar--right__title').should('contain.text', 'Saved messages'); // # Start a playbook run with a slash command const now = Date.now(); diff --git a/e2e-tests/cypress/tests/support/ui/global_header.js b/e2e-tests/cypress/tests/support/ui/global_header.js index 95dc15530f..7618c5ab29 100644 --- a/e2e-tests/cypress/tests/support/ui/global_header.js +++ b/e2e-tests/cypress/tests/support/ui/global_header.js @@ -115,7 +115,7 @@ Cypress.Commands.add('uiGetRecentMentionButton', () => { }); Cypress.Commands.add('uiGetSavedPostButton', () => { - return cy.findByRole('button', {name: 'Saved posts'}).should('be.visible'); + return cy.findByRole('button', {name: 'Saved messages'}).should('be.visible'); }); Cypress.Commands.add('uiGetSettingsButton', () => { diff --git a/e2e-tests/cypress/tests/support/ui/post.ts b/e2e-tests/cypress/tests/support/ui/post.ts index 91af961eda..dc8499be96 100644 --- a/e2e-tests/cypress/tests/support/ui/post.ts +++ b/e2e-tests/cypress/tests/support/ui/post.ts @@ -111,7 +111,7 @@ export function verifySavedPost(postId, message) { cy.get('#searchContainer').should('be.visible').within(() => { cy.get('.sidebar--right__title'). should('be.visible'). - and('have.text', 'Saved Posts'); + and('have.text', 'Saved messages'); // * Check that the post pre-header is not shown for the saved message in RHS cy.get(`#searchResult_${postId}`).within(() => { @@ -129,14 +129,14 @@ export function verifyUnsavedPost(postId) { cy.get(`#post_${postId}`).trigger('mouseover', {force: true}); cy.get(`#CENTER_flagIcon_${postId}`). should('have.class', 'post-menu__item'). - and('have.attr', 'aria-label', 'save'); + and('have.attr', 'aria-label', 'save message'); // # Open the post-dotmenu cy.clickPostDotMenu(postId, 'CENTER'); // * Check that the dotmenu item is changed accordingly cy.findAllByTestId(`post-menu-${postId}`).eq(0).should('be.visible'); - cy.findByText('Save').scrollIntoView().should('be.visible'); + cy.findByText('Save Message').scrollIntoView().should('be.visible'); cy.get(`#CENTER_dropdown_${postId}`).should('be.visible').type('{esc}'); cy.get('#postListContent').within(() => { @@ -165,7 +165,7 @@ export function verifyUnsavedPost(postId) { cy.get('#searchContainer').should('be.visible').within(() => { cy.get('.sidebar--right__title'). should('be.visible'). - and('have.text', 'Saved Posts'); + and('have.text', 'Saved messages'); // * Check that the post pre-header is not shown for the saved message in RHS cy.get('#search-items-container').within(() => { diff --git a/webapp/channels/src/components/channel_header/components/__snapshots__/header_icon_wrapper.test.tsx.snap b/webapp/channels/src/components/channel_header/components/__snapshots__/header_icon_wrapper.test.tsx.snap index b688a6c7a5..19a582620e 100644 --- a/webapp/channels/src/components/channel_header/components/__snapshots__/header_icon_wrapper.test.tsx.snap +++ b/webapp/channels/src/components/channel_header/components/__snapshots__/header_icon_wrapper.test.tsx.snap @@ -48,7 +48,7 @@ exports[`components/channel_header/components/HeaderIconWrapper should match sna id="flaggedTooltip" > @@ -140,7 +140,7 @@ exports[`components/channel_header/components/HeaderIconWrapper should match sna id="pinnedPostTooltip" > diff --git a/webapp/channels/src/components/channel_header/components/header_icon_wrapper.tsx b/webapp/channels/src/components/channel_header/components/header_icon_wrapper.tsx index d216a3eb8d..d2618eda52 100644 --- a/webapp/channels/src/components/channel_header/components/header_icon_wrapper.tsx +++ b/webapp/channels/src/components/channel_header/components/header_icon_wrapper.tsx @@ -55,13 +55,13 @@ const HeaderIconWrapper = (props: Props) => { class: 'text-nowrap', id: 'flaggedTooltip', messageID: t('channel_header.flagged'), - message: 'Saved posts', + message: 'Saved messages', }, pinnedPosts: { class: 'pinned-posts', id: 'pinnedPostTooltip', messageID: t('channel_header.pinnedPosts'), - message: 'Pinned posts', + message: 'Pinned messages', }, recentMentions: { class: '', diff --git a/webapp/channels/src/components/channel_info_rhs/menu.test.tsx b/webapp/channels/src/components/channel_info_rhs/menu.test.tsx index fdd8d39cfd..293bb271b7 100644 --- a/webapp/channels/src/components/channel_info_rhs/menu.test.tsx +++ b/webapp/channels/src/components/channel_info_rhs/menu.test.tsx @@ -133,7 +133,7 @@ describe('channel_info_rhs/menu', () => { props.actions.getChannelStats(); }); - const fileItem = screen.getByText('Pinned Messages'); + const fileItem = screen.getByText('Pinned messages'); expect(fileItem).toBeInTheDocument(); expect(fileItem.parentElement).toHaveTextContent('12'); diff --git a/webapp/channels/src/components/channel_info_rhs/menu.tsx b/webapp/channels/src/components/channel_info_rhs/menu.tsx index 61b94c0101..eaa4d4f6e3 100644 --- a/webapp/channels/src/components/channel_info_rhs/menu.tsx +++ b/webapp/channels/src/components/channel_info_rhs/menu.tsx @@ -143,7 +143,7 @@ const Menu = ({channel, channelStats, isArchived, className, actions}: MenuProps )} } - text={formatMessage({id: 'channel_info_rhs.menu.pinned', defaultMessage: 'Pinned Messages'})} + text={formatMessage({id: 'channel_info_rhs.menu.pinned', defaultMessage: 'Pinned messages'})} opensSubpanel={true} badge={channelStats?.pinnedpost_count} onClick={() => actions.showPinnedPosts(channel.id)} diff --git a/webapp/channels/src/components/common/svg_images_components/channel_files_svg.tsx b/webapp/channels/src/components/common/svg_images_components/channel_files_svg.tsx new file mode 100644 index 0000000000..d0197c2844 --- /dev/null +++ b/webapp/channels/src/components/common/svg_images_components/channel_files_svg.tsx @@ -0,0 +1,63 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import React from 'react'; +import {useIntl} from 'react-intl'; + +export function ChannelFilesSVG(props: React.HTMLAttributes) { + const {formatMessage} = useIntl(); + return ( + + + + + + + + + + + + + + ); +} diff --git a/webapp/channels/src/components/common/svg_images_components/channel_search_svg.tsx b/webapp/channels/src/components/common/svg_images_components/channel_search_svg.tsx new file mode 100644 index 0000000000..9e46c4b23c --- /dev/null +++ b/webapp/channels/src/components/common/svg_images_components/channel_search_svg.tsx @@ -0,0 +1,75 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import React from 'react'; +import {useIntl} from 'react-intl'; + +export function ChannelSearchSVG(props: React.HTMLAttributes) { + const {formatMessage} = useIntl(); + return ( + + + + + + + + + + + + + + + + + ); +} diff --git a/webapp/channels/src/components/common/svg_images_components/index.ts b/webapp/channels/src/components/common/svg_images_components/index.ts new file mode 100644 index 0000000000..847706bc16 --- /dev/null +++ b/webapp/channels/src/components/common/svg_images_components/index.ts @@ -0,0 +1,11 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +export {SearchSVG} from './search_svg'; +export {ChannelSearchSVG} from './channel_search_svg'; +export {MentionsSVG} from './mentons_svg'; +export {SavedMessagesSVG} from './saved_messages_svg'; +export {PinSVG} from './pin_svg'; +export {ChannelFilesSVG} from './channel_files_svg'; +export {UserGroupsSVG} from './user_groups_svg'; +export {UserGroupMembersSVG} from './user_groups_members_svg'; diff --git a/webapp/channels/src/components/common/svg_images_components/mentons_svg.tsx b/webapp/channels/src/components/common/svg_images_components/mentons_svg.tsx new file mode 100644 index 0000000000..56922ed046 --- /dev/null +++ b/webapp/channels/src/components/common/svg_images_components/mentons_svg.tsx @@ -0,0 +1,62 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import React from 'react'; +import {useIntl} from 'react-intl'; + +export function MentionsSVG(props: React.HTMLAttributes) { + const {formatMessage} = useIntl(); + return ( + + + + + + + + + + + + + + ); +} diff --git a/webapp/channels/src/components/common/svg_images_components/pin_svg.tsx b/webapp/channels/src/components/common/svg_images_components/pin_svg.tsx new file mode 100644 index 0000000000..0d42634da2 --- /dev/null +++ b/webapp/channels/src/components/common/svg_images_components/pin_svg.tsx @@ -0,0 +1,54 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import React from 'react'; +import {useIntl} from 'react-intl'; + +export function PinSVG(props: React.HTMLAttributes) { + const {formatMessage} = useIntl(); + return ( + + + + + + + + + + + + ); +} diff --git a/webapp/channels/src/components/common/svg_images_components/saved_messages_svg.tsx b/webapp/channels/src/components/common/svg_images_components/saved_messages_svg.tsx new file mode 100644 index 0000000000..c956884d3a --- /dev/null +++ b/webapp/channels/src/components/common/svg_images_components/saved_messages_svg.tsx @@ -0,0 +1,59 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import React from 'react'; +import {useIntl} from 'react-intl'; + +export function SavedMessagesSVG(props: React.HTMLAttributes) { + const {formatMessage} = useIntl(); + return ( + + + + + + + + + + + + + ); +} diff --git a/webapp/channels/src/components/common/svg_images_components/search_svg.tsx b/webapp/channels/src/components/common/svg_images_components/search_svg.tsx new file mode 100644 index 0000000000..d31824b215 --- /dev/null +++ b/webapp/channels/src/components/common/svg_images_components/search_svg.tsx @@ -0,0 +1,51 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import React from 'react'; +import {useIntl} from 'react-intl'; + +export function SearchSVG(props: React.HTMLAttributes) { + const {formatMessage} = useIntl(); + return ( + + + + + + + + + + + ); +} diff --git a/webapp/channels/src/components/common/svg_images_components/user_groups_members_svg.tsx b/webapp/channels/src/components/common/svg_images_components/user_groups_members_svg.tsx new file mode 100644 index 0000000000..17feb79330 --- /dev/null +++ b/webapp/channels/src/components/common/svg_images_components/user_groups_members_svg.tsx @@ -0,0 +1,61 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import React from 'react'; +import {useIntl} from 'react-intl'; + +export function UserGroupMembersSVG(props: React.HTMLAttributes) { + const {formatMessage} = useIntl(); + return ( + + + + + + + + + + + + + + ); +} diff --git a/webapp/channels/src/components/common/svg_images_components/user_groups_svg.tsx b/webapp/channels/src/components/common/svg_images_components/user_groups_svg.tsx new file mode 100644 index 0000000000..1d13b073d0 --- /dev/null +++ b/webapp/channels/src/components/common/svg_images_components/user_groups_svg.tsx @@ -0,0 +1,182 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import React from 'react'; +import {useIntl} from 'react-intl'; + +export function UserGroupsSVG(props: React.HTMLAttributes) { + const {formatMessage} = useIntl(); + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/webapp/channels/src/components/emoji_picker/emoji_picker.tsx b/webapp/channels/src/components/emoji_picker/emoji_picker.tsx index a6b9826c16..2be2745749 100644 --- a/webapp/channels/src/components/emoji_picker/emoji_picker.tsx +++ b/webapp/channels/src/components/emoji_picker/emoji_picker.tsx @@ -391,8 +391,8 @@ const EmojiPicker = ({ /> {areSearchResultsEmpty ? ( ) : ( )}
- + {areSearchResultsEmpty ? (
) : + () + } } fetchGifs={fetchGifs} diff --git a/webapp/channels/src/components/global_header/right_controls/saved_posts_button/__snapshots__/saved_posts_button.test.tsx.snap b/webapp/channels/src/components/global_header/right_controls/saved_posts_button/__snapshots__/saved_posts_button.test.tsx.snap index 322cfb6eda..f60f77d66e 100644 --- a/webapp/channels/src/components/global_header/right_controls/saved_posts_button/__snapshots__/saved_posts_button.test.tsx.snap +++ b/webapp/channels/src/components/global_header/right_controls/saved_posts_button/__snapshots__/saved_posts_button.test.tsx.snap @@ -9,7 +9,7 @@ exports[`components/global/AtMentionsButton should match snapshot 1`] = ` id="recentMentions" > @@ -25,7 +25,7 @@ exports[`components/global/AtMentionsButton should match snapshot 1`] = ` { ); @@ -56,7 +56,7 @@ const SavedPostsButton = (): JSX.Element | null => { compact={true} aria-expanded={rhsState === RHSStates.FLAG} aria-controls='searchContainer' // Must be changed if the ID of the container changes - aria-label={formatMessage({id: 'channel_header.flagged', defaultMessage: 'Saved posts'})} + aria-label={formatMessage({id: 'channel_header.flagged', defaultMessage: 'Saved messages'})} /> ); diff --git a/webapp/channels/src/components/main_menu/__snapshots__/main_menu.test.tsx.snap b/webapp/channels/src/components/main_menu/__snapshots__/main_menu.test.tsx.snap index cfd1510563..766812bc44 100644 --- a/webapp/channels/src/components/main_menu/__snapshots__/main_menu.test.tsx.snap +++ b/webapp/channels/src/components/main_menu/__snapshots__/main_menu.test.tsx.snap @@ -686,7 +686,7 @@ exports[`components/Menu should match snapshot with most of the thing disabled i id="flaggedPosts" onClick={[Function]} show={true} - text="Saved Posts" + text="Saved messages" /> @@ -1299,7 +1299,7 @@ exports[`components/Menu should match snapshot with most of the thing enabled in id="flaggedPosts" onClick={[Function]} show={true} - text="Saved Posts" + text="Saved messages" /> @@ -1929,7 +1929,7 @@ exports[`components/Menu should match snapshot with plugins in mobile 1`] = ` id="flaggedPosts" onClick={[Function]} show={true} - text="Saved Posts" + text="Saved messages" /> diff --git a/webapp/channels/src/components/main_menu/main_menu.tsx b/webapp/channels/src/components/main_menu/main_menu.tsx index 7be064a634..57291112c4 100644 --- a/webapp/channels/src/components/main_menu/main_menu.tsx +++ b/webapp/channels/src/components/main_menu/main_menu.tsx @@ -214,7 +214,7 @@ export class MainMenu extends React.PureComponent { id='flaggedPosts' onClick={this.getFlagged} icon={} - text={formatMessage({id: 'sidebar_right_menu.flagged', defaultMessage: 'Saved Posts'})} + text={formatMessage({id: 'sidebar_right_menu.flagged', defaultMessage: 'Saved messages'})} /> diff --git a/webapp/channels/src/components/no_results_indicator/__snapshots__/no_results_indicator.test.tsx.snap b/webapp/channels/src/components/no_results_indicator/__snapshots__/no_results_indicator.test.tsx.snap index b25c616bbc..db282ace2e 100644 --- a/webapp/channels/src/components/no_results_indicator/__snapshots__/no_results_indicator.test.tsx.snap +++ b/webapp/channels/src/components/no_results_indicator/__snapshots__/no_results_indicator.test.tsx.snap @@ -10,7 +10,7 @@ exports[`components/no_results_indicator should match snapshot when expanded 1`]
-
@@ -21,14 +21,14 @@ exports[`components/no_results_indicator should match snapshot when expanded 1`] className="no-results__title" >
@@ -224,14 +224,14 @@ exports[`components/no_results_indicator should match snapshot with variant Pinn className="no-results__title" >
diff --git a/webapp/channels/src/components/no_results_indicator/no_results_indicator.scss b/webapp/channels/src/components/no_results_indicator/no_results_indicator.scss index 4e29668cea..a91398044a 100644 --- a/webapp/channels/src/components/no_results_indicator/no_results_indicator.scss +++ b/webapp/channels/src/components/no_results_indicator/no_results_indicator.scss @@ -44,7 +44,6 @@ align-items: center; justify-content: center; margin: 22px; - background: rgba(var(--center-channel-color-rgb), 0.08); border-radius: 100%; } @@ -57,12 +56,16 @@ line-height: 20px; } +.no-results__subtitle { + color: rgba(var(--center-channel-color-rgb), 0.72); +} + .no-results__icon { display: flex; svg { - width: 62px; - height: 62px; + width: 140px; + height: 140px; fill: var(--button-bg); } diff --git a/webapp/channels/src/components/no_results_indicator/no_results_indicator.test.tsx b/webapp/channels/src/components/no_results_indicator/no_results_indicator.test.tsx index 5e99793a79..8a386498cd 100644 --- a/webapp/channels/src/components/no_results_indicator/no_results_indicator.test.tsx +++ b/webapp/channels/src/components/no_results_indicator/no_results_indicator.test.tsx @@ -86,7 +86,7 @@ describe('components/no_results_indicator', () => { test('should match snapshot when expanded', () => { const wrapper = shallow( , ); diff --git a/webapp/channels/src/components/no_results_indicator/no_results_indicator.tsx b/webapp/channels/src/components/no_results_indicator/no_results_indicator.tsx index 5815333811..b3fce742a8 100644 --- a/webapp/channels/src/components/no_results_indicator/no_results_indicator.tsx +++ b/webapp/channels/src/components/no_results_indicator/no_results_indicator.tsx @@ -7,14 +7,12 @@ import type {ReactNode, CSSProperties} from 'react'; import {FormattedMessage} from 'react-intl'; import type {MessageDescriptor} from 'react-intl'; -import FlagIcon from 'components/widgets/icons/flag_icon'; -import MentionsIcon from 'components/widgets/icons/mentions_icon'; -import PinIcon from 'components/widgets/icons/pin_icon'; -import SearchIcon from 'components/widgets/icons/search_icon'; +import {SearchSVG, ChannelSearchSVG, MentionsSVG, SavedMessagesSVG, PinSVG, ChannelFilesSVG, UserGroupsSVG, UserGroupMembersSVG} from 'components/common/svg_images_components'; import {t} from 'utils/i18n'; import {NoResultsVariant, NoResultsLayout} from './types'; +import './no_results_indicator.scss'; interface Props { expanded?: boolean; @@ -31,18 +29,26 @@ interface Props { } const iconMap: {[key in NoResultsVariant]: React.ReactNode } = { - [NoResultsVariant.ChannelSearch]: , - [NoResultsVariant.Mentions]: , - [NoResultsVariant.FlaggedPosts]: , - [NoResultsVariant.PinnedPosts]: , - [NoResultsVariant.ChannelFiles]: , - [NoResultsVariant.ChannelFilesFiltered]: , - [NoResultsVariant.UserGroups]: , - [NoResultsVariant.UserGroupMembers]: , - [NoResultsVariant.UserGroupsArchived]: , + [NoResultsVariant.Search]: , + [NoResultsVariant.ChannelSearch]: , + [NoResultsVariant.Files]: , + [NoResultsVariant.Mentions]: , + [NoResultsVariant.FlaggedPosts]: , + [NoResultsVariant.PinnedPosts]: , + [NoResultsVariant.ChannelFiles]: , + [NoResultsVariant.ChannelFilesFiltered]: , + [NoResultsVariant.UserGroups]: , + [NoResultsVariant.UserGroupMembers]: , + [NoResultsVariant.UserGroupsArchived]: , }; const titleMap: {[key in NoResultsVariant]: MessageDescriptor} = { + [NoResultsVariant.Search]: { + id: t('no_results.search.title'), + }, + [NoResultsVariant.Files]: { + id: t('no_results.Files.title'), + }, [NoResultsVariant.ChannelSearch]: { id: t('no_results.channel_search.title'), }, @@ -53,7 +59,7 @@ const titleMap: {[key in NoResultsVariant]: MessageDescriptor} = { id: t('no_results.flagged_posts.title'), }, [NoResultsVariant.PinnedPosts]: { - id: t('no_results.pinned_posts.title'), + id: t('no_results.pinned_messages.title'), }, [NoResultsVariant.ChannelFiles]: { id: t('no_results.channel_files.title'), @@ -73,6 +79,12 @@ const titleMap: {[key in NoResultsVariant]: MessageDescriptor} = { }; const subtitleMap: {[key in NoResultsVariant]: MessageDescriptor} = { + [NoResultsVariant.Search]: { + id: t('no_results.search.subtitle'), + }, + [NoResultsVariant.Files]: { + id: t('no_results.Files.subtitle'), + }, [NoResultsVariant.ChannelSearch]: { id: t('no_results.channel_search.subtitle'), }, @@ -83,7 +95,7 @@ const subtitleMap: {[key in NoResultsVariant]: MessageDescriptor} = { id: t('no_results.flagged_posts.subtitle'), }, [NoResultsVariant.PinnedPosts]: { - id: t('no_results.pinned_posts.subtitle'), + id: t('no_results.pinned_messages.subtitle'), }, [NoResultsVariant.ChannelFiles]: { id: t('no_results.channel_files.subtitle'), @@ -102,8 +114,6 @@ const subtitleMap: {[key in NoResultsVariant]: MessageDescriptor} = { }, }; -import './no_results_indicator.scss'; - const NoResultsIndicator = ({ expanded, style, diff --git a/webapp/channels/src/components/no_results_indicator/types.ts b/webapp/channels/src/components/no_results_indicator/types.ts index 2c302d8fd1..292aa54f35 100644 --- a/webapp/channels/src/components/no_results_indicator/types.ts +++ b/webapp/channels/src/components/no_results_indicator/types.ts @@ -2,6 +2,8 @@ // See LICENSE.txt for license information. export enum NoResultsVariant { + Search = 'Search', + Files = 'Files', ChannelSearch = 'ChannelSearch', Mentions = 'Mentions', FlaggedPosts = 'FlaggedPosts', @@ -9,8 +11,8 @@ export enum NoResultsVariant { ChannelFiles = 'ChannelFiles', ChannelFilesFiltered = 'ChannelFilesFiltered', UserGroups = 'UserGroups', - UserGroupsArchived = 'UserGroupsArchived', UserGroupMembers = 'UserGroupMembers', + UserGroupsArchived = 'UserGroupsArchived', } export enum NoResultsLayout { diff --git a/webapp/channels/src/components/post_view/post_flag_icon/__snapshots__/post_flag_icon.test.tsx.snap b/webapp/channels/src/components/post_view/post_flag_icon/__snapshots__/post_flag_icon.test.tsx.snap index 21a1259e23..2cd01128ac 100644 --- a/webapp/channels/src/components/post_view/post_flag_icon/__snapshots__/post_flag_icon.test.tsx.snap +++ b/webapp/channels/src/components/post_view/post_flag_icon/__snapshots__/post_flag_icon.test.tsx.snap @@ -12,7 +12,7 @@ exports[`components/post_view/PostFlagIcon should match snapshot 1`] = ` id="flagTooltip" > diff --git a/webapp/channels/src/components/post_view/post_flag_icon/post_flag_icon.tsx b/webapp/channels/src/components/post_view/post_flag_icon/post_flag_icon.tsx index cdf241daf8..29503557b6 100644 --- a/webapp/channels/src/components/post_view/post_flag_icon/post_flag_icon.tsx +++ b/webapp/channels/src/components/post_view/post_flag_icon/post_flag_icon.tsx @@ -96,7 +96,7 @@ const PostFlagIcon = ({ > } diff --git a/webapp/channels/src/components/quick_switch_modal/quick_switch_modal.tsx b/webapp/channels/src/components/quick_switch_modal/quick_switch_modal.tsx index 26d376e07a..13e8208140 100644 --- a/webapp/channels/src/components/quick_switch_modal/quick_switch_modal.tsx +++ b/webapp/channels/src/components/quick_switch_modal/quick_switch_modal.tsx @@ -240,8 +240,8 @@ export default class QuickSwitchModal extends React.PureComponent /> {!this.state.shouldShowLoadingSpinner && !this.state.hasSuggestions && this.state.text && } diff --git a/webapp/channels/src/components/rhs_card_header/rhs_card_header.tsx b/webapp/channels/src/components/rhs_card_header/rhs_card_header.tsx index 1afc07d13f..38228d30ac 100644 --- a/webapp/channels/src/components/rhs_card_header/rhs_card_header.tsx +++ b/webapp/channels/src/components/rhs_card_header/rhs_card_header.tsx @@ -74,7 +74,7 @@ class RhsCardHeader extends React.PureComponent { ); @@ -84,7 +84,7 @@ class RhsCardHeader extends React.PureComponent { ); diff --git a/webapp/channels/src/components/rhs_header_post/rhs_header_post.tsx b/webapp/channels/src/components/rhs_header_post/rhs_header_post.tsx index 6936ef6943..d0577145dd 100644 --- a/webapp/channels/src/components/rhs_header_post/rhs_header_post.tsx +++ b/webapp/channels/src/components/rhs_header_post/rhs_header_post.tsx @@ -106,7 +106,7 @@ class RhsHeaderPost extends React.PureComponent { ); @@ -116,7 +116,7 @@ class RhsHeaderPost extends React.PureComponent { ); diff --git a/webapp/channels/src/components/search_results/search_results.tsx b/webapp/channels/src/components/search_results/search_results.tsx index ed51a7ba13..9cd6ec7d97 100644 --- a/webapp/channels/src/components/search_results/search_results.tsx +++ b/webapp/channels/src/components/search_results/search_results.tsx @@ -21,7 +21,6 @@ import NoResultsIndicator from 'components/no_results_indicator/no_results_indic import {NoResultsVariant} from 'components/no_results_indicator/types'; import SearchHint from 'components/search_hint/search_hint'; import SearchResultsHeader from 'components/search_results_header'; -import FlagIcon from 'components/widgets/icons/flag_icon'; import LoadingSpinner from 'components/widgets/loading/loading_wrapper'; import {searchHintOptions, DataSearchTypes} from 'utils/constants'; @@ -191,19 +190,26 @@ const SearchResults: React.FC = (props: Props): JSX.Element => { titleDescriptor.defaultMessage = 'Recent Mentions'; } else if (isFlaggedPosts) { noResultsProps.variant = NoResultsVariant.FlaggedPosts; - noResultsProps.subtitleValues = {icon: }; - + noResultsProps.subtitleValues = {buttonText: { + intl.formatMessage({ + id: 'flag_post.flag', + defaultMessage: 'Save Message'}, + )}}; titleDescriptor.id = t('search_header.title3'); - titleDescriptor.defaultMessage = 'Saved Posts'; + titleDescriptor.defaultMessage = 'Saved messages'; } else if (isPinnedPosts) { noResultsProps.variant = NoResultsVariant.PinnedPosts; - noResultsProps.subtitleValues = {text: {'Pin to Channel'}}; + noResultsProps.subtitleValues = {text: { + intl.formatMessage({ + id: 'post_info.pin', + defaultMessage: 'Pin to Channel', + })}}; sortedResults = [...results]; sortedResults.sort((postA: Post|FileSearchResultItemType, postB: Post|FileSearchResultItemType) => postB.create_at - postA.create_at); - titleDescriptor.id = t('search_header.pinnedPosts'); - titleDescriptor.defaultMessage = 'Pinned Posts'; + titleDescriptor.id = t('search_header.pinnedMessages'); + titleDescriptor.defaultMessage = 'Pinned messages'; } else if (isChannelFiles) { if (searchFilterType === 'all') { noResultsProps.variant = NoResultsVariant.ChannelFiles; @@ -219,8 +225,13 @@ const SearchResults: React.FC = (props: Props): JSX.Element => { } else if (!searchTerms && noResults && noFileResults) { titleDescriptor.id = t('search_header.search'); titleDescriptor.defaultMessage = 'Search'; + } else if (searchType === DataSearchTypes.FILES_SEARCH_TYPE && !isChannelFiles) { + noResultsProps.variant = NoResultsVariant.Files; + noResultsProps.titleValues = {searchTerm: `${searchTerms}`}; + titleDescriptor.id = t('search_header.results'); + titleDescriptor.defaultMessage = 'Search Results'; } else { - noResultsProps.titleValues = {channelName: `"${searchTerms}"`}; + noResultsProps.titleValues = {channelName: `${searchTerms}`}; titleDescriptor.id = t('search_header.results'); titleDescriptor.defaultMessage = 'Search Results'; @@ -261,7 +272,10 @@ const SearchResults: React.FC = (props: Props): JSX.Element => { {'sidebar-expanded': isSideBarExpanded}, ])} > - + ); break; @@ -273,7 +287,10 @@ const SearchResults: React.FC = (props: Props): JSX.Element => { {'sidebar-expanded': isSideBarExpanded}, ])} > - + ); break; diff --git a/webapp/channels/src/components/user_groups_modal/user_groups_list/user_groups_list.tsx b/webapp/channels/src/components/user_groups_modal/user_groups_list/user_groups_list.tsx index d6072ac87c..0f79f7f4ac 100644 --- a/webapp/channels/src/components/user_groups_modal/user_groups_list/user_groups_list.tsx +++ b/webapp/channels/src/components/user_groups_modal/user_groups_list/user_groups_list.tsx @@ -119,8 +119,8 @@ const UserGroupsList = (props: Props) => { if (groups.length === 0 && searchTerm) { return ( ); } diff --git a/webapp/channels/src/components/view_user_group_modal/view_user_group_modal.tsx b/webapp/channels/src/components/view_user_group_modal/view_user_group_modal.tsx index bf458b0ad5..ecee6c5e0e 100644 --- a/webapp/channels/src/components/view_user_group_modal/view_user_group_modal.tsx +++ b/webapp/channels/src/components/view_user_group_modal/view_user_group_modal.tsx @@ -247,8 +247,8 @@ export default class ViewUserGroupModal extends React.PureComponent } {users.map((user) => { diff --git a/webapp/channels/src/i18n/en.json b/webapp/channels/src/i18n/en.json index c3687ea327..8b890aaf7d 100644 --- a/webapp/channels/src/i18n/en.json +++ b/webapp/channels/src/i18n/en.json @@ -2933,7 +2933,7 @@ "channel_header.delete": "Archive Channel", "channel_header.directchannel.you": "{displayname} (you) ", "channel_header.editLink": "Edit", - "channel_header.flagged": "Saved posts", + "channel_header.flagged": "Saved messages", "channel_header.groupMessageHasGuests": "This group message has guests", "channel_header.lastActive": "Last online {timestamp}", "channel_header.lastOnline": "Last online {timestamp}", @@ -2943,7 +2943,7 @@ "channel_header.mute": "Mute Channel", "channel_header.muteConversation": "Mute Conversation", "channel_header.openChannelInfo": "View Info", - "channel_header.pinnedPosts": "Pinned posts", + "channel_header.pinnedPosts": "Pinned messages", "channel_header.recentMentions": "Recent mentions", "channel_header.rename": "Rename Channel", "channel_header.search": "Search", @@ -2968,7 +2968,7 @@ "channel_info_rhs.menu.files.filter": "Filter", "channel_info_rhs.menu.members": "Members", "channel_info_rhs.menu.notification_preferences": "Notification Preferences", - "channel_info_rhs.menu.pinned": "Pinned Messages", + "channel_info_rhs.menu.pinned": "Pinned messages", "channel_info_rhs.top_buttons.add_people": "Add People", "channel_info_rhs.top_buttons.copied": "Copied", "channel_info_rhs.top_buttons.copy": "Copy Link", @@ -3546,7 +3546,7 @@ "filtered_user_list.team": "Team:", "filtered_user_list.userStatus": "User Status:", "FIVE_HUNDRED_TO_1000": "501-1000", - "flag_post.flag": "Save", + "flag_post.flag": "Save Message", "flag_post.unflag": "Remove from Saved", "footer_pagination.count": "Showing {startCount, number}-{endCount, number} of {total, number}", "footer_pagination.next": "Next", @@ -3615,6 +3615,8 @@ "generic_icons.back": "Back Icon", "generic_icons.breadcrumb": "Breadcrumb Icon", "generic_icons.call": "Call icon", + "generic_icons.channel_files": "Channel Files Icon", + "generic_icons.channel_search": "Channel Search Icon", "generic_icons.channel.private": "Private Channel Icon", "generic_icons.channel.public": "Public Channel Icon", "generic_icons.check.circle": "Check Circle Icon", @@ -3655,6 +3657,8 @@ "generic_icons.success": "Success Icon", "generic_icons.upgradeBadge": "Upgrade badge", "generic_icons.upload": "Upload Icon", + "generic_icons.user_group_members": "User Group Members Icon", + "generic_icons.user_groups": "User Groups Icon", "generic_icons.userGuide": "Help", "generic_icons.warning": "Warning Icon", "generic_modal.cancel": "Cancel", @@ -4191,13 +4195,17 @@ "no_results.channel_files.subtitle": "Files posted in this channel will show here.", "no_results.channel_files.title": "No files yet", "no_results.channel_search.subtitle": "Check the spelling or try another search.", - "no_results.channel_search.title": "No results for {channelName}", - "no_results.flagged_posts.subtitle": "Saved messages are only visible to you. Mark messages for follow-up or save something for later by clicking the {icon} to save them here.", - "no_results.flagged_posts.title": "No Saved posts yet", + "no_results.channel_search.title": "No results for “{channelName}”", + "no_results.Files.subtitle": "Check the spelling or try another search.", + "no_results.Files.title": "No file results for “{searchTerm}”", + "no_results.flagged_posts.subtitle": "To save something for later, open the context menu on a message and choose {buttonText}. Saved messages are only visible to you", + "no_results.flagged_posts.title": "No saved messages yet", "no_results.mentions.subtitle": "Messages where someone mentions you or includes your trigger words are saved here.", "no_results.mentions.title": "No mentions yet", - "no_results.pinned_posts.subtitle": "Pin important messages which are visible to the whole channel. Open the context menu on a message and choose {text} to save it here.", - "no_results.pinned_posts.title": "No pinned posts yet", + "no_results.pinned_messages.subtitle": "To pin important messages, open the context menu on a message and choose {text}. Pinned messages will be visible to everyone in this channel.", + "no_results.pinned_messages.title": "No pinned messages yet", + "no_results.search.subtitle": "Check the spelling or try another search.", + "no_results.search.title": "No results for “{channelName}”", "no_results.user_group_members.subtitle": "There are currently no members in this group, please add one.", "no_results.user_group_members.title": "No members yet", "no_results.user_groups.archived.subtitle": "Groups that are no longer relevant or are not being used can be archived", @@ -4609,8 +4617,8 @@ "rhs_card.message_by": "Message by {avatar} {user}", "rhs_comment.comment": "Comment", "rhs_header.back.icon": "Back Icon", - "rhs_header.backToFlaggedTooltip": "Back to saved posts", - "rhs_header.backToPinnedTooltip": "Back to pinned posts", + "rhs_header.backToFlaggedTooltip": "Back to saved messages", + "rhs_header.backToPinnedTooltip": "Back to pinned messages", "rhs_header.backToResultsTooltip": "Back to search results", "rhs_header.closeSidebarTooltip": "Close", "rhs_header.closeTooltip.icon": "Close Sidebar Icon", @@ -4620,7 +4628,7 @@ "rhs_header.expandSidebarTooltip": "Expand the right sidebar", "rhs_header.expandSidebarTooltip.icon": "Expand Sidebar Icon", "rhs_root.mobile.add_reaction": "Add Reaction", - "rhs_root.mobile.flag": "Save", + "rhs_root.mobile.flag": "Save Message", "rhs_root.mobile.unflag": "Remove from Saved", "rhs_thread.rootPostDeletedMessage.body": "Part of this thread has been deleted due to a data retention policy. You can no longer reply to this thread.", "rhs_thread.toast.newReplies": "New Replies", @@ -4651,12 +4659,12 @@ "search_files_list_option.phrases": "Files with phrases", "search_header.channelFiles": "Files", "search_header.loading": "Searching...", - "search_header.pinnedPosts": "Pinned Posts", + "search_header.pinnedMessages": "Pinned messages", "search_header.results": "Search Results", "search_header.search": "Search", "search_header.title_edit.history": "Edit History", "search_header.title2": "Recent Mentions", - "search_header.title3": "Saved Posts", + "search_header.title3": "Saved messages", "search_header.title5": "Extra Information", "search_item.channelArchived": "Archived", "search_item.direct": "Direct Message (with {username})", @@ -4912,7 +4920,7 @@ "sidebar_left.sidebar_channel_navigator.inviteUsers": "Invite Users", "sidebar_left.sidebar_channel.selectedCount": "{count} selected", "sidebar_right_menu.console": "System Console", - "sidebar_right_menu.flagged": "Saved Posts", + "sidebar_right_menu.flagged": "Saved messages", "sidebar_right_menu.recentMentions": "Recent Mentions", "sidebar.allDirectMessages": "All direct messages", "sidebar.createDirectMessage": "Write a direct message", diff --git a/webapp/channels/src/plugins/test/__snapshots__/main_menu_action.test.tsx.snap b/webapp/channels/src/plugins/test/__snapshots__/main_menu_action.test.tsx.snap index 3b62401ea4..07452b5091 100644 --- a/webapp/channels/src/plugins/test/__snapshots__/main_menu_action.test.tsx.snap +++ b/webapp/channels/src/plugins/test/__snapshots__/main_menu_action.test.tsx.snap @@ -60,7 +60,7 @@ exports[`plugins/MainMenuActions should match snapshot in mobile view with some id="flaggedPosts" onClick={[Function]} show={true} - text="Saved Posts" + text="Saved messages" />