Add plugin user settings (#25517)

* Add plugin user settings

* Feedback and UI improvements

* Extract the plugin configuration instead of just validating it

* Fix lint

* Fix lint

* Divide between settings and sections

* i18n-extract

* Adjust icon location

* Add tests

* Improve documentation

* Force plugin id

* Fix test

---------

Co-authored-by: Mattermost Build <build@mattermost.com>

webapp/channels/src/selectors/plugins.test.js

@@ -1,9 +1,36 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {getChannelHeaderMenuPluginComponents} from 'selectors/plugins';
+import {getChannelHeaderMenuPluginComponents, getPluginUserSettings} from 'selectors/plugins';
 
 describe('selectors/plugins', () => {
+    describe('getPluginUserSettings', () => {
+        it('has no settings', () => {
+            const state = {
+                plugins: {},
+            };
+            const settings = getPluginUserSettings(state);
+            expect(settings).toEqual({});
+        });
+        it('has settings', () => {
+            const stateSettings = {
+                pluginId: {
+                    id: 'pluginId',
+                },
+                pluginId2: {
+                    id: 'pluginId2',
+                },
+            };
+            const state = {
+                plugins: {
+                    userSettings: stateSettings,
+                },
+            };
+            const settings = getPluginUserSettings(state);
+            expect(settings).toEqual(stateSettings);
+        });
+    });
+
     describe('getChannelHeaderMenuPluginComponents', () => {
         test('no channel header components found', () => {
             const expectedComponents = [];

webapp/channels/src/selectors/plugins.ts

@@ -12,6 +12,14 @@ import {createShallowSelector} from 'mattermost-redux/utils/helpers';
 import type {GlobalState} from 'types/store';
 import type {FileDropdownPluginComponent, PluginComponent} from 'types/store/plugins';
 
+export const getPluginUserSettings = createSelector(
+    'getPluginUserSettings',
+    (state: GlobalState) => state.plugins.userSettings,
+    (settings) => {
+        return settings || {};
+    },
+);
+
 export const getFilesDropdownPluginMenuItems = createSelector(
     'getFilesDropdownPluginMenuItems',
     (state: GlobalState) => state.plugins.components.FilesDropdown,