PLT-4928 Sort integrations by name in lists. (#4804)

webapp/components/integrations/components/installed_commands.jsx

@@ -37,8 +37,22 @@ export default class InstalledCommands extends React.Component {
         AsyncClient.deleteCommand(command.id);
     }
 
+    commandCompare(a, b) {
+        let nameA = a.display_name;
+        if (!nameA) {
+            nameA = Utils.localizeMessage('installed_commands.unnamed_command', 'Unnamed Slash Command');
+        }
+
+        let nameB = b.display_name;
+        if (!nameB) {
+            nameB = Utils.localizeMessage('installed_commands.unnamed_command', 'Unnamed Slash Command');
+        }
+
+        return nameA.localeCompare(nameB);
+    }
+
     render() {
-        const commands = this.props.commands.map((command) => {
+        const commands = this.props.commands.sort(this.commandCompare).map((command) => {
             const canChange = this.props.isAdmin || this.props.user.id === command.creator_id;
 
             return (

webapp/components/integrations/components/installed_incoming_webhooks.jsx

@@ -4,6 +4,7 @@
 import BackstageList from 'components/backstage/components/backstage_list.jsx';
 import InstalledIncomingWebhook from './installed_incoming_webhook.jsx';
 
+import ChannelStore from 'stores/channel_store.jsx';
 import IntegrationStore from 'stores/integration_store.jsx';
 import TeamStore from 'stores/team_store.jsx';
 import UserStore from 'stores/user_store.jsx';
@@ -74,8 +75,32 @@ export default class InstalledIncomingWebhooks extends React.Component {
         AsyncClient.deleteIncomingHook(incomingWebhook.id);
     }
 
+    incomingWebhookCompare(a, b) {
+        let displayNameA = a.display_name;
+        if (!displayNameA) {
+            const channelA = ChannelStore.get(a.channel_id);
+            if (channelA) {
+                displayNameA = channelA.display_name;
+            } else {
+                displayNameA = Utils.localizeMessage('installed_incoming_webhooks.unknown_channel', 'A Private Webhook');
+            }
+        }
+
+        let displayNameB = b.display_name;
+        if (!displayNameB) {
+            const channelB = ChannelStore.get(b.channel_id);
+            if (channelB) {
+                displayNameB = channelB.display_name;
+            } else {
+                displayNameB = Utils.localizeMessage('installed_incoming_webhooks.unknown_channel', 'A Private Webhook');
+            }
+        }
+
+        return displayNameA.localeCompare(displayNameB);
+    }
+
     render() {
-        const incomingWebhooks = this.state.incomingWebhooks.map((incomingWebhook) => {
+        const incomingWebhooks = this.state.incomingWebhooks.sort(this.incomingWebhookCompare).map((incomingWebhook) => {
             const canChange = this.props.isAdmin || this.props.user.id === incomingWebhook.user_id;
 
             return (

webapp/components/integrations/components/installed_oauth_apps.jsx

@@ -60,8 +60,22 @@ export default class InstalledOAuthApps extends React.Component {
         OAuthActions.deleteOAuthApp(app.id, userId);
     }
 
+    oauthAppCompare(a, b) {
+        let nameA = a.name;
+        if (!nameA) {
+            nameA = localizeMessage('installed_integrations.unnamed_oauth_app', 'Unnamed OAuth 2.0 Application');
+        }
+
+        let nameB = b.name;
+        if (!nameB) {
+            nameB = localizeMessage('installed_integrations.unnamed_oauth_app', 'Unnamed OAuth 2.0 Application');
+        }
+
+        return nameA.localeCompare(nameB);
+    }
+
     render() {
-        const oauthApps = this.state.oauthApps.map((app) => {
+        const oauthApps = this.state.oauthApps.sort(this.oauthAppCompare).map((app) => {
             return (
                 <InstalledOAuthApp
                     key={app.id}

webapp/components/integrations/components/installed_outgoing_webhooks.jsx

@@ -4,6 +4,7 @@
 import BackstageList from 'components/backstage/components/backstage_list.jsx';
 import InstalledOutgoingWebhook from './installed_outgoing_webhook.jsx';
 
+import ChannelStore from 'stores/channel_store.jsx';
 import IntegrationStore from 'stores/integration_store.jsx';
 import TeamStore from 'stores/team_store.jsx';
 import UserStore from 'stores/user_store.jsx';
@@ -77,8 +78,32 @@ export default class InstalledOutgoingWebhooks extends React.Component {
         AsyncClient.deleteOutgoingHook(outgoingWebhook.id);
     }
 
+    outgoingWebhookCompare(a, b) {
+        let displayNameA = a.display_name;
+        if (!displayNameA) {
+            const channelA = ChannelStore.get(a.channel_id);
+            if (channelA) {
+                displayNameA = channelA.display_name;
+            } else {
+                displayNameA = Utils.localizeMessage('installed_outgoing_webhooks.unknown_channel', 'A Private Webhook');
+            }
+        }
+
+        let displayNameB = b.display_name;
+        if (!displayNameB) {
+            const channelB = ChannelStore.get(b.channel_id);
+            if (channelB) {
+                displayNameB = channelB.display_name;
+            } else {
+                displayNameB = Utils.localizeMessage('installed_outgoing_webhooks.unknown_channel', 'A Private Webhook');
+            }
+        }
+
+        return displayNameA.localeCompare(displayNameB);
+    }
+
     render() {
-        const outgoingWebhooks = this.state.outgoingWebhooks.map((outgoingWebhook) => {
+        const outgoingWebhooks = this.state.outgoingWebhooks.sort(this.outgoingWebhookCompare).map((outgoingWebhook) => {
             const canChange = this.props.isAdmin || this.props.user.id === outgoingWebhook.creator_id;
 
             return (