From bac317dfe523c0db743d243bba2b790cddb40cd7 Mon Sep 17 00:00:00 2001 From: M-ZubairAhmed Date: Wed, 6 Sep 2023 02:10:37 +0530 Subject: [PATCH] MM-54181 : Clean up code around deprecated Gfycat (#24343) * first pass of removal * first pass of removal * Update admin_console.js * rev beta * remove more * Update initial_state.ts --------- Co-authored-by: Mattermost Build --- .../support/api/cloud_default_config.json | 2 - .../support/api/on_prem_default_config.json | 2 - .../support/server/default_config.ts | 2 - server/config/client.go | 2 - server/config/diff.go | 1 - server/config/diff_test.go | 21 - server/config/utils.go | 4 - .../platform/services/telemetry/telemetry.go | 2 - server/public/model/config.go | 16 - webapp/channels/NOTICE.txt | 37 -- webapp/channels/package.json | 1 - .../gif_picker/components/App/index.tsx | 65 --- .../components/Categories/Categories.scss | 43 -- .../components/Categories/index.tsx | 151 ------- .../gif_picker/components/Header/Header.scss | 35 -- .../gif_picker/components/Header/index.tsx | 151 ------- .../gif_picker/components/Search/index.tsx | 75 ---- .../components/SearchBar/SearchBar.scss | 74 --- .../gif_picker/components/SearchBar/index.tsx | 244 ---------- .../components/SearchGrid/SearchGrid.scss | 38 -- .../components/SearchGrid/SearchGrid.tsx | 224 ---------- .../gif_picker/components/SearchGrid/index.ts | 24 - .../components/SearchItem/SearchItem.scss | 15 - .../components/SearchItem/index.tsx | 63 --- .../gif_picker/components/Trending/index.tsx | 56 --- .../static/favicons/favicon-16x16.png | Bin 403 -> 0 bytes .../static/favicons/favicon-32x32.png | Bin 757 -> 0 bytes .../static/favicons/favicon-96x96.png | Bin 2676 -> 0 bytes .../gif_picker/static/favicons/favicon.ico | Bin 370070 -> 0 bytes .../static/icons/ic_arrow_greyblue_left.svg | 7 - .../static/icons/ic_canvas_border.svg | 12 - .../static/icons/ic_clear_search.svg | 5 - .../static/icons/ic_clear_search_filled.svg | 6 - .../gif_picker/static/icons/ic_close.svg | 5 - .../static/icons/ic_drawing_blue.svg | 12 - .../static/icons/ic_drawing_grey.svg | 12 - .../gif_picker/static/icons/ic_pencil.svg | 3 - .../static/icons/ic_reactions_blue.svg | 15 - .../static/icons/ic_reactions_grey.svg | 15 - .../static/icons/ic_reactions_white.svg | 9 - .../static/icons/ic_search_grey.svg | 7 - .../gif_picker/static/icons/ic_send_white.svg | 6 - .../gif_picker/static/icons/ic_skype_send.svg | 7 - .../gif_picker/static/icons/ic_trash_can.svg | 6 - .../static/icons/ic_trending_blue.svg | 12 - .../static/icons/ic_trending_grey.svg | 12 - .../static/icons/ic_trending_white.svg | 5 - .../gif_picker/static/img_loading.png | Bin 150078 -> 0 bytes .../gif_picker/static/search_end.png | Bin 8099 -> 0 bytes .../components/gif_picker/utils/constants.ts | 18 - .../components/widgets/icons/gfycat_icon.tsx | 38 -- .../widgets/icons/gif_reactions_icon.tsx | 52 --- .../widgets/icons/gif_search_clear_icon.tsx | 27 -- .../widgets/icons/gif_search_icon.tsx | 29 -- .../widgets/icons/gif_trending_icon.tsx | 49 -- webapp/channels/src/i18n/en.json | 1 - .../mattermost-redux/src/action_types/gifs.ts | 49 -- .../src/action_types/index.ts | 2 - .../mattermost-redux/src/actions/gifs.ts | 423 ------------------ .../mattermost-redux/src/actions/index.ts | 2 - .../src/reducers/entities/gifs.ts | 251 ----------- .../src/reducers/entities/index.ts | 2 - .../src/store/initial_state.ts | 33 -- .../mattermost-redux/src/utils/gfycat_sdk.ts | 26 -- .../src/types/external/gfycat-sdk.d.ts | 4 - webapp/package-lock.json | 60 --- webapp/platform/types/src/config.ts | 4 - webapp/platform/types/src/gifs.ts | 164 ------- webapp/platform/types/src/store.ts | 2 - 69 files changed, 2740 deletions(-) delete mode 100644 webapp/channels/src/components/gif_picker/components/App/index.tsx delete mode 100644 webapp/channels/src/components/gif_picker/components/Categories/Categories.scss delete mode 100644 webapp/channels/src/components/gif_picker/components/Categories/index.tsx delete mode 100644 webapp/channels/src/components/gif_picker/components/Header/Header.scss delete mode 100644 webapp/channels/src/components/gif_picker/components/Header/index.tsx delete mode 100644 webapp/channels/src/components/gif_picker/components/Search/index.tsx delete mode 100644 webapp/channels/src/components/gif_picker/components/SearchBar/SearchBar.scss delete mode 100644 webapp/channels/src/components/gif_picker/components/SearchBar/index.tsx delete mode 100644 webapp/channels/src/components/gif_picker/components/SearchGrid/SearchGrid.scss delete mode 100644 webapp/channels/src/components/gif_picker/components/SearchGrid/SearchGrid.tsx delete mode 100644 webapp/channels/src/components/gif_picker/components/SearchGrid/index.ts delete mode 100644 webapp/channels/src/components/gif_picker/components/SearchItem/SearchItem.scss delete mode 100644 webapp/channels/src/components/gif_picker/components/SearchItem/index.tsx delete mode 100644 webapp/channels/src/components/gif_picker/components/Trending/index.tsx delete mode 100644 webapp/channels/src/components/gif_picker/static/favicons/favicon-16x16.png delete mode 100644 webapp/channels/src/components/gif_picker/static/favicons/favicon-32x32.png delete mode 100644 webapp/channels/src/components/gif_picker/static/favicons/favicon-96x96.png delete mode 100644 webapp/channels/src/components/gif_picker/static/favicons/favicon.ico delete mode 100755 webapp/channels/src/components/gif_picker/static/icons/ic_arrow_greyblue_left.svg delete mode 100644 webapp/channels/src/components/gif_picker/static/icons/ic_canvas_border.svg delete mode 100644 webapp/channels/src/components/gif_picker/static/icons/ic_clear_search.svg delete mode 100644 webapp/channels/src/components/gif_picker/static/icons/ic_clear_search_filled.svg delete mode 100644 webapp/channels/src/components/gif_picker/static/icons/ic_close.svg delete mode 100644 webapp/channels/src/components/gif_picker/static/icons/ic_drawing_blue.svg delete mode 100644 webapp/channels/src/components/gif_picker/static/icons/ic_drawing_grey.svg delete mode 100644 webapp/channels/src/components/gif_picker/static/icons/ic_pencil.svg delete mode 100644 webapp/channels/src/components/gif_picker/static/icons/ic_reactions_blue.svg delete mode 100644 webapp/channels/src/components/gif_picker/static/icons/ic_reactions_grey.svg delete mode 100644 webapp/channels/src/components/gif_picker/static/icons/ic_reactions_white.svg delete mode 100644 webapp/channels/src/components/gif_picker/static/icons/ic_search_grey.svg delete mode 100644 webapp/channels/src/components/gif_picker/static/icons/ic_send_white.svg delete mode 100644 webapp/channels/src/components/gif_picker/static/icons/ic_skype_send.svg delete mode 100644 webapp/channels/src/components/gif_picker/static/icons/ic_trash_can.svg delete mode 100644 webapp/channels/src/components/gif_picker/static/icons/ic_trending_blue.svg delete mode 100644 webapp/channels/src/components/gif_picker/static/icons/ic_trending_grey.svg delete mode 100644 webapp/channels/src/components/gif_picker/static/icons/ic_trending_white.svg delete mode 100644 webapp/channels/src/components/gif_picker/static/img_loading.png delete mode 100755 webapp/channels/src/components/gif_picker/static/search_end.png delete mode 100644 webapp/channels/src/components/gif_picker/utils/constants.ts delete mode 100644 webapp/channels/src/components/widgets/icons/gfycat_icon.tsx delete mode 100644 webapp/channels/src/components/widgets/icons/gif_reactions_icon.tsx delete mode 100644 webapp/channels/src/components/widgets/icons/gif_search_clear_icon.tsx delete mode 100644 webapp/channels/src/components/widgets/icons/gif_search_icon.tsx delete mode 100644 webapp/channels/src/components/widgets/icons/gif_trending_icon.tsx delete mode 100644 webapp/channels/src/packages/mattermost-redux/src/action_types/gifs.ts delete mode 100644 webapp/channels/src/packages/mattermost-redux/src/actions/gifs.ts delete mode 100644 webapp/channels/src/packages/mattermost-redux/src/reducers/entities/gifs.ts delete mode 100644 webapp/channels/src/packages/mattermost-redux/src/utils/gfycat_sdk.ts delete mode 100644 webapp/channels/src/types/external/gfycat-sdk.d.ts delete mode 100644 webapp/platform/types/src/gifs.ts diff --git a/e2e-tests/cypress/tests/support/api/cloud_default_config.json b/e2e-tests/cypress/tests/support/api/cloud_default_config.json index bd250f04a6..1fdbd28083 100644 --- a/e2e-tests/cypress/tests/support/api/cloud_default_config.json +++ b/e2e-tests/cypress/tests/support/api/cloud_default_config.json @@ -13,8 +13,6 @@ "EnableCustomEmoji": false, "EnableEmojiPicker": true, "EnableGifPicker": false, - "GfycatAPIKey": "2_KtH_W5", - "GfycatAPISecret": "3wLVZPiswc3DnaiaFoLkDvB4X0IV6CpMkj4tf2inJRsBY6-FnkT08zGmppWFgeof", "PostEditTimeLimit": -1, "EnablePreviewFeatures": true, "EnableTutorial": true, diff --git a/e2e-tests/cypress/tests/support/api/on_prem_default_config.json b/e2e-tests/cypress/tests/support/api/on_prem_default_config.json index 739b0bae36..adba4402c3 100644 --- a/e2e-tests/cypress/tests/support/api/on_prem_default_config.json +++ b/e2e-tests/cypress/tests/support/api/on_prem_default_config.json @@ -52,8 +52,6 @@ "EnableCustomEmoji": false, "EnableEmojiPicker": true, "EnableGifPicker": false, - "GfycatAPIKey": "2_KtH_W5", - "GfycatAPISecret": "3wLVZPiswc3DnaiaFoLkDvB4X0IV6CpMkj4tf2inJRsBY6-FnkT08zGmppWFgeof", "PostEditTimeLimit": -1, "TimeBetweenUserTypingUpdatesMilliseconds": 5000, "EnablePostSearch": true, diff --git a/e2e-tests/playwright/support/server/default_config.ts b/e2e-tests/playwright/support/server/default_config.ts index f6670149fc..b0af629944 100644 --- a/e2e-tests/playwright/support/server/default_config.ts +++ b/e2e-tests/playwright/support/server/default_config.ts @@ -127,8 +127,6 @@ const defaultServerConfig: AdminConfig = { WebsocketPort: 80, WebserverMode: 'gzip', EnableGifPicker: true, - GfycatAPIKey: '2_KtH_W5', - GfycatAPISecret: '3wLVZPiswc3DnaiaFoLkDvB4X0IV6CpMkj4tf2inJRsBY6-FnkT08zGmppWFgeof', GiphySdkKey: 's0glxvzVg9azvPipKxcPLpXV0q1x1fVP', EnableCustomEmoji: true, EnableEmojiPicker: true, diff --git a/server/config/client.go b/server/config/client.go index 96b8586ea7..784ec5d5eb 100644 --- a/server/config/client.go +++ b/server/config/client.go @@ -79,8 +79,6 @@ func GenerateClientConfig(c *model.Config, telemetryID string, license *model.Li props["EnableEmojiPicker"] = strconv.FormatBool(*c.ServiceSettings.EnableEmojiPicker) props["EnableGifPicker"] = strconv.FormatBool(*c.ServiceSettings.EnableGifPicker) - props["GfycatApiKey"] = *c.ServiceSettings.GfycatAPIKey - props["GfycatApiSecret"] = *c.ServiceSettings.GfycatAPISecret props["GiphySdkKey"] = getGiphySdkKey(c.ServiceSettings) props["MaxFileSize"] = strconv.FormatInt(*c.FileSettings.MaxFileSize, 10) diff --git a/server/config/diff.go b/server/config/diff.go index ab744844c0..08535eac53 100644 --- a/server/config/diff.go +++ b/server/config/diff.go @@ -53,7 +53,6 @@ var configSensitivePaths = map[string]bool{ "MessageExportSettings.GlobalRelaySettings.SMTPUsername": true, "MessageExportSettings.GlobalRelaySettings.SMTPPassword": true, "MessageExportSettings.GlobalRelaySettings.EmailAddress": true, - "ServiceSettings.GfycatAPISecret": true, "ServiceSettings.SplitKey": true, "PluginSettings.Plugins": true, } diff --git a/server/config/diff_test.go b/server/config/diff_test.go index 3dd0bdc6d8..43b6a07c1e 100644 --- a/server/config/diff_test.go +++ b/server/config/diff_test.go @@ -464,27 +464,6 @@ func TestDiffSanitized(t *testing.T) { }, "", }, - { - "sensitive ServiceSettings.GfycatAPISecret", - func() *model.Config { - cfg := defaultConfigGen() - cfg.ServiceSettings.GfycatAPISecret = model.NewString("base") - return cfg - }(), - func() *model.Config { - cfg := defaultConfigGen() - cfg.ServiceSettings.GfycatAPISecret = model.NewString("actual") - return cfg - }(), - ConfigDiffs{ - { - Path: "ServiceSettings.GfycatAPISecret", - BaseVal: model.FakeSetting, - ActualVal: model.FakeSetting, - }, - }, - "", - }, { "sensitive ServiceSettings.SplitKey", func() *model.Config { diff --git a/server/config/utils.go b/server/config/utils.go index 53a74c9f19..af22d662a0 100644 --- a/server/config/utils.go +++ b/server/config/utils.go @@ -85,10 +85,6 @@ func desanitize(actual, target *model.Config) { *target.MessageExportSettings.GlobalRelaySettings.SMTPPassword = *actual.MessageExportSettings.GlobalRelaySettings.SMTPPassword } - if target.ServiceSettings.GfycatAPISecret != nil && *target.ServiceSettings.GfycatAPISecret == model.FakeSetting { - *target.ServiceSettings.GfycatAPISecret = *actual.ServiceSettings.GfycatAPISecret - } - if *target.ServiceSettings.SplitKey == model.FakeSetting { *target.ServiceSettings.SplitKey = *actual.ServiceSettings.SplitKey } diff --git a/server/platform/services/telemetry/telemetry.go b/server/platform/services/telemetry/telemetry.go index f84289a29e..29de237ff9 100644 --- a/server/platform/services/telemetry/telemetry.go +++ b/server/platform/services/telemetry/telemetry.go @@ -419,8 +419,6 @@ func (ts *TelemetryService) trackConfig() { "enable_custom_emoji": *cfg.ServiceSettings.EnableCustomEmoji, "enable_emoji_picker": *cfg.ServiceSettings.EnableEmojiPicker, "enable_gif_picker": *cfg.ServiceSettings.EnableGifPicker, - "gfycat_api_key": isDefault(*cfg.ServiceSettings.GfycatAPIKey, model.ServiceSettingsDefaultGfycatAPIKey), - "gfycat_api_secret": isDefault(*cfg.ServiceSettings.GfycatAPISecret, model.ServiceSettingsDefaultGfycatAPISecret), "experimental_enable_authentication_transfer": *cfg.ServiceSettings.ExperimentalEnableAuthenticationTransfer, "enable_testing": cfg.ServiceSettings.EnableTesting, "enable_developer": *cfg.ServiceSettings.EnableDeveloper, diff --git a/server/public/model/config.go b/server/public/model/config.go index 15de38c092..c5dee882ef 100644 --- a/server/public/model/config.go +++ b/server/public/model/config.go @@ -109,8 +109,6 @@ const ( ServiceSettingsDefaultMaxLoginAttempts = 10 ServiceSettingsDefaultAllowCorsFrom = "" ServiceSettingsDefaultListenAndAddress = ":8065" - ServiceSettingsDefaultGfycatAPIKey = "2_KtH_W5" - ServiceSettingsDefaultGfycatAPISecret = "3wLVZPiswc3DnaiaFoLkDvB4X0IV6CpMkj4tf2inJRsBY6-FnkT08zGmppWFgeof" ServiceSettingsDefaultGiphySdkKeyTest = "s0glxvzVg9azvPipKxcPLpXV0q1x1fVP" ServiceSettingsDefaultDeveloperFlags = "" @@ -347,8 +345,6 @@ type ServiceSettings struct { WebsocketPort *int `access:"write_restrictable,cloud_restrictable"` // telemetry: none WebserverMode *string `access:"environment_web_server,write_restrictable,cloud_restrictable"` EnableGifPicker *bool `access:"integrations_gif"` - GfycatAPIKey *string `access:"integrations_gif"` - GfycatAPISecret *string `access:"integrations_gif"` GiphySdkKey *string `access:"integrations_gif"` EnableCustomEmoji *bool `access:"site_emoji"` EnableEmojiPicker *bool `access:"site_emoji"` @@ -736,14 +732,6 @@ func (s *ServiceSettings) SetDefaults(isUpdate bool) { s.EnableGifPicker = NewBool(true) } - if s.GfycatAPIKey == nil || *s.GfycatAPIKey == "" { - s.GfycatAPIKey = NewString(ServiceSettingsDefaultGfycatAPIKey) - } - - if s.GfycatAPISecret == nil || *s.GfycatAPISecret == "" { - s.GfycatAPISecret = NewString(ServiceSettingsDefaultGfycatAPISecret) - } - if s.GiphySdkKey == nil || *s.GiphySdkKey == "" { s.GiphySdkKey = NewString("") } @@ -4202,10 +4190,6 @@ func (o *Config) Sanitize() { *o.MessageExportSettings.GlobalRelaySettings.SMTPPassword = FakeSetting } - if o.ServiceSettings.GfycatAPISecret != nil && *o.ServiceSettings.GfycatAPISecret != "" { - *o.ServiceSettings.GfycatAPISecret = FakeSetting - } - if o.ServiceSettings.SplitKey != nil { *o.ServiceSettings.SplitKey = FakeSetting } diff --git a/webapp/channels/NOTICE.txt b/webapp/channels/NOTICE.txt index f1154cea60..42aa15e553 100644 --- a/webapp/channels/NOTICE.txt +++ b/webapp/channels/NOTICE.txt @@ -1885,42 +1885,6 @@ trademarks does not indicate endorsement of the trademark holder by Font Awesome, nor vice versa. **Please do not use brand logos for any purpose except to represent the company, product, or service to which they refer.** ---- - -## gfycat-sdk - -This product contains 'gfycat-sdk' by gfycat. - -Javascript API wrapper for Gfycat.com API that supports callbacks and promises. - -* HOMEPAGE: - * https://github.com/gfycat/gfycat-sdk - -* LICENSE: MIT - -MIT License - -Copyright (c) 2016 Josh Kang - -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is -furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all -copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE. - - --- ## highlight.js @@ -1959,7 +1923,6 @@ ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. - --- ## history diff --git a/webapp/channels/package.json b/webapp/channels/package.json index 16995fbc0a..abc87d4be0 100644 --- a/webapp/channels/package.json +++ b/webapp/channels/package.json @@ -40,7 +40,6 @@ "fast-deep-equal": "3.1.3", "flexsearch": "0.6.32", "font-awesome": "4.7.0", - "gfycat-sdk": "1.4.18", "highlight.js": "11.6.0", "history": "4.10.1", "hoist-non-react-statics": "3.3.2", diff --git a/webapp/channels/src/components/gif_picker/components/App/index.tsx b/webapp/channels/src/components/gif_picker/components/App/index.tsx deleted file mode 100644 index f3a3b1aba0..0000000000 --- a/webapp/channels/src/components/gif_picker/components/App/index.tsx +++ /dev/null @@ -1,65 +0,0 @@ -// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. -// See LICENSE.txt for license information. - -import React, {PureComponent, ReactNode} from 'react'; -import {connect} from 'react-redux'; - -import {saveAppProps} from 'mattermost-redux/actions/gifs'; - -import Header from 'components/gif_picker/components/Header'; - -const mapDispatchToProps = ({ - saveAppProps, -}); - -type Props = { - appProps: any; - action: string; - onCategories: () => void; - onSearch?: () => void; - onTrending: () => void; - children?: ReactNode; - saveAppProps?: (appProps: Props['appProps']) => void; - defaultSearchText?: string; - handleSearchTextChange: (text: string) => void; -} - -export class App extends PureComponent { - constructor(props: Props) { - super(props); - const {appProps} = this.props; - this.props.saveAppProps?.(appProps); - } - - render() { - const { - appProps, - action, - onCategories, - onSearch, - onTrending, - children, - defaultSearchText, - handleSearchTextChange, - } = this.props; - const appClassName = 'main-container ' + (appProps.appClassName || ''); - return ( -
-
-
- {children} -
-
- ); - } -} - -export default connect(null, mapDispatchToProps)(App); diff --git a/webapp/channels/src/components/gif_picker/components/Categories/Categories.scss b/webapp/channels/src/components/gif_picker/components/Categories/Categories.scss deleted file mode 100644 index 29dee70c89..0000000000 --- a/webapp/channels/src/components/gif_picker/components/Categories/Categories.scss +++ /dev/null @@ -1,43 +0,0 @@ -.categories-container { - position: relative; - height: 292px; - box-sizing: border-box; - padding: 0 0.2rem; - font-size: 0; - overflow-x: hidden; - - .category-container { - display: inline-block; - width: 33.33%; - box-sizing: border-box; - padding: 0.2rem; - } - - .category { - position: relative; - display: inline-block; - overflow: hidden; - width: 100%; - padding-bottom: 75%; - background-position: center; - background-repeat: no-repeat; - background-size: cover; - border-radius: 0.6rem; - cursor: pointer; - } - - .category-name { - position: absolute; - display: flex; - width: 100%; - height: 100%; - align-items: center; - justify-content: center; - background-color: rgba(0, 0, 0, 0.2); - color: white; - font-size: 1.2rem; - font-weight: bold; - text-align: center; - text-transform: uppercase; - } -} diff --git a/webapp/channels/src/components/gif_picker/components/Categories/index.tsx b/webapp/channels/src/components/gif_picker/components/Categories/index.tsx deleted file mode 100644 index ba44045749..0000000000 --- a/webapp/channels/src/components/gif_picker/components/Categories/index.tsx +++ /dev/null @@ -1,151 +0,0 @@ -// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. -// See LICENSE.txt for license information. - -import React, {PureComponent} from 'react'; -import {connect} from 'react-redux'; - -import {GfycatAPIItem, GfycatAPITag} from '@mattermost/types/gifs'; - -import {requestCategoriesList, requestCategoriesListIfNeeded, saveSearchBarText, saveSearchScrollPosition, searchTextUpdate} from 'mattermost-redux/actions/gifs'; - -import {GlobalState} from 'types/store'; - -import {trackEvent} from 'actions/telemetry_actions.jsx'; - -import {getImageSrc} from 'utils/post_utils'; - -import InfiniteScroll from 'components/gif_picker/components/InfiniteScroll'; - -import './Categories.scss'; - -function mapStateToProps(state: GlobalState) { - return { - tagsList: state.entities.gifs.categories.tagsList, - hasMore: state.entities.gifs.categories.hasMore, - gifs: state.entities.gifs.cache.gifs, - searchText: state.entities.gifs.search.searchText, - searchBarText: state.entities.gifs.search.searchBarText, - hasImageProxy: state.entities.general.config.HasImageProxy, - }; -} - -const mapDispatchToProps = ({ - saveSearchBarText, - saveSearchScrollPosition, - searchTextUpdate, - requestCategoriesList, - requestCategoriesListIfNeeded, -}); - -type Props = { - appProps: any; - gifs?: Record; - hasMore?: boolean; - onSearch: () => void; - onTrending: () => void; - requestCategoriesList: () => void; - requestCategoriesListIfNeeded: () => void; - saveSearchBarText: (searchBarText: string) => void; - saveSearchScrollPosition: (scrollPosition: number) => void; - searchTextUpdate: (searchText: string) => void; - searchBarText: string; - tagsList: GfycatAPITag[]; - hasImageProxy?: string; -} - -export class Categories extends PureComponent { - componentDidMount() { - window.scrollTo(0, 0); - this.props.requestCategoriesListIfNeeded(); - this.sendImpressions(); - } - - sendImpressions = () => { - const {tagsList} = this.props; - const gfycats = tagsList.map((tag) => { - return {gfyId: tag.gfyId}; - }); - - if (gfycats.length) { - trackEvent('gfycat', 'views', {context: 'category_list', count: gfycats.length}); - } - }; - - componentWillUnmount() { - this.props.saveSearchScrollPosition(0); - } - - filterTagsList = () => { - const {searchBarText, tagsList} = this.props; - - const substr = searchBarText.toLowerCase().trim().split(/ +/).join(' '); - return tagsList && tagsList.length ? tagsList.filter((tag) => { - if (!searchBarText || tag.tagName.indexOf(substr) !== -1) { - return tag; - } - return ''; - }) : []; - }; - - loadMore = () => this.props.requestCategoriesList(); - - render() { - const {hasMore, tagsList, gifs, onSearch, onTrending, hasImageProxy} = this.props; - - const content = tagsList && tagsList.length ? this.filterTagsList().map((item, index) => { - const {tagName, gfyId} = item; - - if (!gifs?.[gfyId]) { - return null; - } - - const gfyItem = gifs[gfyId]; - const {max1mbGif, max2mbGif, avgColor} = gfyItem; - const url = getImageSrc(max1mbGif || max2mbGif, hasImageProxy === 'true'); - const searchText = tagName.replace(/\s/g, '-'); - const backgroundImage = {backgroundImage: `url(${url}`}; - const backgroundColor = {backgroundColor: avgColor}; - const props = this.props; - function callback() { - props.searchTextUpdate(tagName); - props.saveSearchBarText(tagName); - if (searchText === 'trending') { - onTrending(); - } else { - onSearch(); - } - } - return ( - -
-
-
{tagName}
-
-
- - ); - }) : []; - - return content && content.length ? ( -
- - {content} - -
- ) : ( -
- ); - } -} - -export default connect(mapStateToProps, mapDispatchToProps)(Categories); diff --git a/webapp/channels/src/components/gif_picker/components/Header/Header.scss b/webapp/channels/src/components/gif_picker/components/Header/Header.scss deleted file mode 100644 index 2d28a4405d..0000000000 --- a/webapp/channels/src/components/gif_picker/components/Header/Header.scss +++ /dev/null @@ -1,35 +0,0 @@ -.header-container { - z-index: 1; - width: 100%; - - .nav-bar { - position: relative; - display: flex; - height: 3.5rem; - align-items: center; - justify-content: space-around; - border-bottom-width: 1px; - border-bottom-style: solid; - - .ic { - cursor: pointer; - vertical-align: middle; - } - - a { - display: flex; - height: 100%; - flex-grow: 1; - align-items: center; - justify-content: space-around; - - .header-text { - padding-left: 1rem; - font-family: SFUIDisplay, sans-serif; - font-size: 1.6rem; - font-weight: 500; - vertical-align: middle; - } - } - } -} diff --git a/webapp/channels/src/components/gif_picker/components/Header/index.tsx b/webapp/channels/src/components/gif_picker/components/Header/index.tsx deleted file mode 100644 index b0e4d36eb8..0000000000 --- a/webapp/channels/src/components/gif_picker/components/Header/index.tsx +++ /dev/null @@ -1,151 +0,0 @@ -// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. -// See LICENSE.txt for license information. - -import React, {PureComponent} from 'react'; -import {connect} from 'react-redux'; - -import {saveSearchBarText, searchTextUpdate} from 'mattermost-redux/actions/gifs'; -import {getTheme, Theme} from 'mattermost-redux/selectors/entities/preferences'; -import {changeOpacity, makeStyleFromTheme} from 'mattermost-redux/utils/theme_utils'; - -import constants from 'components/gif_picker/utils/constants'; -import SearchBar from 'components/gif_picker/components/SearchBar'; -import GifTrendingIcon from 'components/widgets/icons/gif_trending_icon'; -import GifReactionsIcon from 'components/widgets/icons/gif_reactions_icon'; -import './Header.scss'; -import {GlobalState} from 'types/store'; - -function mapStateToProps(state: GlobalState) { - return { - theme: getTheme(state), - }; -} - -const mapDispatchToProps = ({ - saveSearchBarText, - searchTextUpdate, -}); - -type Style = { - background: {backgroundColor: string}; - header: {borderBottomColor: string}; - icon: {fill: string}; - iconActive: {fill: string}; - iconHover: {fill: string}; -} - -const getStyle = makeStyleFromTheme((theme) => { - return { - background: { - backgroundColor: theme.centerChannelBg, - }, - header: { - borderBottomColor: changeOpacity(theme.centerChannelColor, 0.2), - }, - icon: { - fill: changeOpacity(theme.centerChannelColor, 0.3), - }, - iconActive: { - fill: theme.centerChannelColor, - }, - iconHover: { - fill: changeOpacity(theme.centerChannelColor, 0.8), - }, - }; -}); - -type Props = { - action: string; - appProps: any; - saveSearchBarText: (searchBarText: string) => void; - searchTextUpdate: (searchText: string) => void; - theme: Theme; - defaultSearchText?: string; - onTrending?: () => void; - onCategories?: () => void; - onSearch?: () => void; - handleSearchTextChange: (text: string) => void; -} - -type State = { - hovering: string; -} - -export class Header extends PureComponent { - constructor(props: Props) { - super(props); - this.state = { - hovering: '', - }; - } - - render() { - const style = getStyle(this.props.theme); - - return ( -
- - -
- ); - } - - renderTabs(props: Props, style: Style) { - const {appProps, onTrending, onCategories} = props; - const {header} = appProps; - return header.tabs.map((tab: any, index: any) => { - let link; - if (tab === constants.Tab.TRENDING) { - link = this.renderTab({name: 'trending', callback: onTrending, Icon: GifTrendingIcon, index, style}); - } else if (tab === constants.Tab.REACTIONS) { - link = this.renderTab({name: 'reactions', callback: onCategories, Icon: GifReactionsIcon, index, style}); - } - return link; - }); - } - - renderTab(renderTabParams: {name: string; Icon: typeof GifTrendingIcon; index: number; style: Style; callback?: () => void}) { - const props = this.props; - const {action} = props; - const {Icon} = renderTabParams; - function callbackWrapper() { - props.searchTextUpdate(''); - props.saveSearchBarText(''); - renderTabParams.callback?.(); - } - return ( - { - this.setState({hovering: renderTabParams.name}); - }} - onMouseOut={() => { - this.setState({hovering: ''}); - }} - style={{cursor: 'pointer'}} - key={renderTabParams.index} - > -
- { - if (this.state.hovering === renderTabParams.name) { - return renderTabParams.style.iconHover; - } - return action === renderTabParams.name ? renderTabParams.style.iconActive : renderTabParams.style.icon; - })()} - /> -
- - ); - } -} - -export default connect(mapStateToProps, mapDispatchToProps)(Header); diff --git a/webapp/channels/src/components/gif_picker/components/Search/index.tsx b/webapp/channels/src/components/gif_picker/components/Search/index.tsx deleted file mode 100644 index 7475b47fcd..0000000000 --- a/webapp/channels/src/components/gif_picker/components/Search/index.tsx +++ /dev/null @@ -1,75 +0,0 @@ -// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. -// See LICENSE.txt for license information. - -import React, {PureComponent} from 'react'; -import {connect} from 'react-redux'; -import {throttle} from 'lodash'; - -import {GfycatAPIItem} from '@mattermost/types/gifs'; - -import {searchIfNeededInitial, searchGfycat} from 'mattermost-redux/actions/gifs'; - -import SearchGrid from 'components/gif_picker/components/SearchGrid'; - -import {GlobalState} from 'types/store'; - -const GIF_SEARCH_THROTTLE_TIME_MS = 1000; - -function mapStateToProps(state: GlobalState) { - return { - searchText: state.entities.gifs.search.searchText, - }; -} - -const mapDispatchToProps = ({ - searchGfycat, - searchIfNeededInitial, -}); - -type Props = { - appProps: any; - onCategories?: () => void; - handleItemClick: (gif: GfycatAPIItem) => void; - searchText: string; - searchIfNeededInitial: (searchText: string) => void; - searchGfycat: (params: {searchText: string; count?: number; startIndex?: number }) => void; -} - -export class Search extends PureComponent { - componentDidMount() { - const {searchText} = this.props; - this.props.searchIfNeededInitial(searchText.split('-').join(' ')); - } - - componentDidUpdate(prevProps: Props) { - const {searchText} = this.props; - if (prevProps.searchText !== searchText) { - this.throttledSearchGif(searchText); - } - } - - throttledSearchGif = throttle( - (searchText) => this.props.searchIfNeededInitial(searchText.split('-').join(' ')), - GIF_SEARCH_THROTTLE_TIME_MS, - ); - - loadMore = () => { - const {searchText} = this.props; - this.props.searchGfycat({searchText}); - }; - - render() { - const {handleItemClick, searchText, onCategories} = this.props; - - return ( - - ); - } -} - -export default connect(mapStateToProps, mapDispatchToProps)(Search); diff --git a/webapp/channels/src/components/gif_picker/components/SearchBar/SearchBar.scss b/webapp/channels/src/components/gif_picker/components/SearchBar/SearchBar.scss deleted file mode 100644 index 31d0de5df4..0000000000 --- a/webapp/channels/src/components/gif_picker/components/SearchBar/SearchBar.scss +++ /dev/null @@ -1,74 +0,0 @@ -.gfycat-search { - position: relative; - width: 100%; - box-sizing: border-box; - padding: 8px 7px 1px 7px; - - .search-input { - position: relative; - z-index: 1; - display: block; - width: 100%; - height: 29px; - box-sizing: border-box; - padding: 0 27px; - border-width: 1px; - border-style: solid; - background-color: transparent; - border-radius: 30px; - box-shadow: none; - font-size: 1.3rem; - outline: none; - } - - // Hide IE input clear button - .search-input::-ms-clear { - display: none; - } - - .search-input-bg { - position: absolute; - width: calc(100% - 2.4rem); - height: 3.3rem; - border-radius: 0.6rem; - } - - .placeholder { - position: absolute; - top: 14px; - left: 34px; - font-size: 13px; - } - - .ic { - position: absolute; - top: calc(50% - 0.3rem); - } - - .ic-clear-search, - .ic-search { - position: absolute; - z-index: 1; - background-position: center; - background-repeat: no-repeat; - cursor: pointer; - } - - .ic-clear-search { - top: 12px; - right: 12px; - width: 2rem; - height: 2rem; - } - - .ic-search { - top: 11px; - left: 11px; - width: 2.4rem; - height: 2.4rem; - } - - .submit-button { - display: none; - } -} diff --git a/webapp/channels/src/components/gif_picker/components/SearchBar/index.tsx b/webapp/channels/src/components/gif_picker/components/SearchBar/index.tsx deleted file mode 100644 index 4e109ce358..0000000000 --- a/webapp/channels/src/components/gif_picker/components/SearchBar/index.tsx +++ /dev/null @@ -1,244 +0,0 @@ -// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. -// See LICENSE.txt for license information. - -import React, {ChangeEvent, Component, FormEvent, RefObject} from 'react'; -import {connect} from 'react-redux'; - -import {GfycatAPITag} from '@mattermost/types/gifs'; - -import {saveSearchScrollPosition, saveSearchBarText, searchTextUpdate} from 'mattermost-redux/actions/gifs'; -import {getTheme, Theme} from 'mattermost-redux/selectors/entities/preferences'; -import {changeOpacity, makeStyleFromTheme} from 'mattermost-redux/utils/theme_utils'; - -import {GlobalState} from 'types/store'; - -import {t} from 'utils/i18n'; - -import GifSearchIcon from 'components/widgets/icons/gif_search_icon'; -import GifSearchClearIcon from 'components/widgets/icons/gif_search_clear_icon'; -import LocalizedInput from 'components/localized_input/localized_input'; - -import './SearchBar.scss'; - -function mapStateToProps(state: GlobalState) { - return { - ...state.entities.gifs.categories, - ...state.entities.gifs.search, - theme: getTheme(state), - appProps: state.entities.gifs.app, - }; -} - -const mapDispatchToProps = ({ - saveSearchBarText, - saveSearchScrollPosition, - searchTextUpdate, -}); - -const getStyle = makeStyleFromTheme((theme) => { - return { - background: { - backgroundColor: theme.centerChannelBg, - }, - icon: { - fill: changeOpacity(theme.centerChannelColor, 0.4), - }, - inputBackground: { - backgroundColor: theme.centerChannelBg, - }, - input: { - borderColor: changeOpacity(theme.centerChannelColor, 0.12), - }, - }; -}); - -type Props = { - action?: string; - theme: Theme; - onSearch?: () => void; - onTrending?: () => void; - onCategories?: () => void; - saveSearchBarText: (searchBarText: string) => void; - saveSearchScrollPosition?: (scrollPosition: number) => void; - searchTextUpdate: (searchText: string) => void; - searchBarText?: string; - defaultSearchText?: string; - tagsList?: GfycatAPITag[]; - hasImageProxyd?: string; - handleSearchTextChange: (text: string) => void; -} - -type State = { - inputFocused: boolean; -} - -export class SearchBar extends Component { - private searchTimeout!: NodeJS.Timeout; - private searchInputRef: RefObject; - - constructor(props: Props) { - super(props); - - this.state = {inputFocused: false}; - this.searchInputRef = React.createRef(); - - const defaultSearchText = this.props.defaultSearchText || ''; - - this.props.saveSearchBarText(defaultSearchText); - this.props.searchTextUpdate(defaultSearchText); - } - - componentDidUpdate(prevProps: Props) { - const {searchBarText} = this.props; - - if (searchBarText !== prevProps.searchBarText) { - if (!searchBarText || searchBarText === 'trending') { - this.updateSearchInputValue(''); - } else { - this.updateSearchInputValue(searchBarText); - } - } - } - - /** - * Returns text request with hyphens - */ - parseSearchText = (searchText: string) => searchText.trim().split(/ +/).join('-'); - - removeExtraSpaces = (searchText: string) => searchText.trim().split(/ +/).join(' '); - - updateSearchInputValue = (searchText: string) => { - if (this.searchInputRef.current) { - this.searchInputRef.current.value = searchText; - } - this.props.saveSearchBarText(searchText); - this.props.handleSearchTextChange(searchText); - }; - - handleSubmit = (event: FormEvent) => { - event.preventDefault(); - this.triggerSearch(this.searchInputRef.current?.value || ''); - this.searchInputRef.current?.blur(); - }; - - triggerSearch = (searchText: string) => { - const {onSearch} = this.props; - this.props.searchTextUpdate(this.parseSearchText(searchText)); - onSearch?.(); - this.props.saveSearchScrollPosition?.(0); - }; - - handleChange = (event: ChangeEvent) => { - clearTimeout(this.searchTimeout); - - const searchText = event.target.value; - - const {onCategories, action} = this.props; - this.props.saveSearchBarText(searchText); - this.props.handleSearchTextChange(searchText); - - if (searchText === '') { - onCategories?.(); - } else if (action !== 'reactions' || !this.isFilteredTags(searchText)) { - // not reactions page or there's no reactions for this search request - this.searchTimeout = setTimeout(() => { - this.triggerSearch(searchText); - }, 500); - } - }; - - focusInput = () => this.setState({inputFocused: true}); - blurInput = () => this.setState({inputFocused: false}); - - /** - * Checks if there're reactions for a current searchText - */ - isFilteredTags = (searchText: string) => { - const text = this.removeExtraSpaces(searchText); - - const {tagsList} = this.props; - const substr = text.toLowerCase(); - const filteredTags = tagsList && tagsList.length ? tagsList.filter((tag) => { - if (!text || tag.tagName.indexOf(substr) !== -1) { - return tag; - } - return ''; - }) : []; - - return Boolean(filteredTags.length); - }; - - clearSearchHandle = () => { - const {action, onTrending, onCategories} = this.props; - this.updateSearchInputValue(''); - if (action === 'reactions') { - onCategories?.(); - } else { - onTrending?.(); - } - }; - - shouldComponentUpdate(nextProps: Props, nextState: State) { - return ((!nextProps.searchBarText && this.props.searchBarText) || - (nextProps.searchBarText && !this.props.searchBarText) || - (nextState.inputFocused !== this.state.inputFocused) || - (nextProps.searchBarText !== this.props.searchBarText)) as boolean; - } - - render() { - const style = getStyle(this.props.theme); - const {searchBarText} = this.props; - const clearSearchButton = searchBarText ? ( - - ) : null; - - return ( -
-
-
- - - {clearSearchButton} -
-