Add import order lint rules (mattermost#5672)

* Add import order lint rules

* Address feedback

* Revert change

.eslintrc.json

@@ -8,7 +8,8 @@
   "parser": "@typescript-eslint/parser",
   "plugins": [
     "@typescript-eslint",
-    "mattermost"
+    "mattermost",
+    "import"
   ],
   "settings": {
     "react": {
@@ -58,7 +59,32 @@
       "singleLine": {
         "beforeColon": false,
         "afterColon": true
-      }}]
+      }}],
+    "@typescript-eslint/member-delimiter-style": 2,
+    "import/order": [
+      2,
+      {
+        "groups": ["builtin", "external", "parent", "sibling", "index", "type"],
+        "newlines-between": "always",
+        "pathGroups": [
+          {
+            "pattern": "{@(@actions|@app|@assets|@client|@components|@constants|@context|@database|@helpers|@hooks|@init|@queries|@screens|@selectors|@share|@store|@telemetry|@typings|@test|@utils)/**,@(@constants|@i18n|@notifications|@store|@websocket)}",
+            "group": "external",
+            "position": "after"
+          },
+          {
+            "pattern": "app/**",
+            "group": "parent",
+            "position": "before"
+          }
+        ],
+        "alphabetize": {
+          "order": "asc",
+          "caseInsensitive": true
+        },
+        "pathGroupsExcludedImportTypes": ["type"]
+      }
+    ]
   },
   "overrides": [
     {

app/actions/local/channel.ts

@@ -11,16 +11,15 @@ import {General} from '@constants';
 import DatabaseManager from '@database/manager';
 import {privateChannelJoinPrompt} from '@helpers/api/channel';
 import {prepareMyChannelsForTeam, queryMyChannel} from '@queries/servers/channel';
-import {addChannelToTeamHistory, prepareMyTeams, queryMyTeamById, queryTeamById, queryTeamByName} from '@queries/servers/team';
 import {queryCommonSystemValues, setCurrentChannelId, setCurrentTeamAndChannelId} from '@queries/servers/system';
+import {addChannelToTeamHistory, prepareMyTeams, queryMyTeamById, queryTeamById, queryTeamByName} from '@queries/servers/team';
 import {PERMALINK_GENERIC_TEAM_NAME_REDIRECT} from '@utils/url';
 
-import type {IntlShape} from 'react-intl';
-
 import type ChannelModel from '@typings/database/models/servers/channel';
 import type MyChannelModel from '@typings/database/models/servers/my_channel';
 import type MyTeamModel from '@typings/database/models/servers/my_team';
 import type TeamModel from '@typings/database/models/servers/team';
+import type {IntlShape} from 'react-intl';
 
 export const switchToChannel = async (serverUrl: string, channelId: string) => {
     const database = DatabaseManager.serverDatabases[serverUrl]?.database;

app/actions/local/permalink.ts

@@ -3,8 +3,6 @@
 
 import {Keyboard} from 'react-native';
 
-import type {IntlShape} from 'react-intl';
-
 import {fetchMyChannelsForTeam} from '@actions/remote/channel';
 import DatabaseManager from '@database/manager';
 import {queryCommonSystemValues} from '@queries/servers/system';
@@ -15,6 +13,7 @@ import {changeOpacity} from '@utils/theme';
 import {PERMALINK_GENERIC_TEAM_NAME_REDIRECT} from '@utils/url';
 
 import type TeamModel from '@typings/database/models/servers/team';
+import type {IntlShape} from 'react-intl';
 
 let showingPermalink = false;
 

app/actions/local/post.ts

@@ -8,8 +8,8 @@ import {queryPostById} from '@queries/servers/post';
 import {queryCurrentUserId} from '@queries/servers/system';
 import {generateId} from '@utils/general';
 
-import type UserModel from '@typings/database/models/servers/user';
 import type PostModel from '@typings/database/models/servers/post';
+import type UserModel from '@typings/database/models/servers/user';
 
 export const sendAddToChannelEphemeralPost = async (serverUrl: string, user: UserModel, addedUsernames: string[], messages: string[], channeId: string, postRootId = '') => {
     const operator = DatabaseManager.serverDatabases[serverUrl]?.operator;

app/actions/local/push_notification.ts

@@ -2,12 +2,12 @@
 // See LICENSE.txt for license information.
 
 import moment from 'moment-timezone';
+import {createIntl} from 'react-intl';
 
 import {getSessions} from '@actions/remote/session';
 import {DEFAULT_LOCALE, getTranslations} from '@i18n';
 import PushNotifications from '@init/push_notifications';
 import {sortByNewest} from '@utils/general';
-import {createIntl} from 'react-intl';
 
 export const scheduleExpiredNotification = async (serverUrl: string, config: Partial<ClientConfig>, userId: string, locale = DEFAULT_LOCALE) => {
     if (config.ExtendSessionLengthWithActivity === 'true') {

app/actions/local/timezone.ts

@@ -3,9 +3,9 @@
 
 import {getTimeZone} from 'react-native-localize';
 
+import {updateMe} from '@actions/remote/user';
 import DatabaseManager from '@database/manager';
 import {queryUserById} from '@queries/servers/user';
-import {updateMe} from '@actions/remote/user';
 
 import type UserModel from '@typings/database/models/servers/user';
 

app/actions/remote/channel.ts

@@ -11,9 +11,8 @@ import {fetchRolesIfNeeded} from './role';
 import {forceLogoutIfNecessary} from './session';
 import {fetchProfilesPerChannels, fetchUsersByIds} from './user';
 
-import type {Model} from '@nozbe/watermelondb';
-
 import type {Client} from '@client/rest';
+import type {Model} from '@nozbe/watermelondb';
 
 export type MyChannelsRequest = {
     channels?: Channel[];

app/actions/remote/general.ts

@@ -1,8 +1,6 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import type {ClientResponse} from '@mattermost/react-native-network-client';
-
 import {SYSTEM_IDENTIFIERS} from '@constants/database';
 import DatabaseManager from '@database/manager';
 import NetworkManager from '@init/network_manager';
@@ -11,6 +9,7 @@ import {queryExpandedLinks} from '@queries/servers/system';
 import {forceLogoutIfNecessary} from './session';
 
 import type {Client} from '@client/rest';
+import type {ClientResponse} from '@mattermost/react-native-network-client';
 
 export const doPing = async (serverUrl: string) => {
     const client = await NetworkManager.createClient(serverUrl);

app/actions/remote/reactions.ts

@@ -1,5 +1,6 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
+
 import {Q} from '@nozbe/watermelondb';
 
 import {MM_TABLES, SYSTEM_IDENTIFIERS} from '@constants/database';

app/actions/remote/session.ts

@@ -11,12 +11,12 @@ import {queryDeviceToken} from '@queries/app/global';
 import {queryCurrentUserId, queryCommonSystemValues} from '@queries/servers/system';
 import {getCSRFFromCookie} from '@utils/security';
 
-import type {LoginArgs} from '@typings/database/database';
-
-import {logError} from './error';
 import {loginEntry} from './entry';
+import {logError} from './error';
 import {fetchDataRetentionPolicy} from './systems';
 
+import type {LoginArgs} from '@typings/database/database';
+
 const HTTP_UNAUTHORIZED = 401;
 
 export const completeLogin = async (serverUrl: string, user: UserProfile) => {

app/actions/remote/team.ts

@@ -12,8 +12,9 @@ import {fetchMyChannelsForTeam} from './channel';
 import {fetchPostsForUnreadChannels} from './post';
 import {fetchRolesIfNeeded} from './role';
 import {forceLogoutIfNecessary} from './session';
-import TeamModel from '@typings/database/models/servers/team';
-import TeamMembershipModel from '@typings/database/models/servers/team_membership';
+
+import type TeamModel from '@typings/database/models/servers/team';
+import type TeamMembershipModel from '@typings/database/models/servers/team_membership';
 
 export type MyTeamsRequest = {
     teams?: Team[];

app/actions/remote/user.ts

@@ -2,22 +2,23 @@
 // See LICENSE.txt for license information.
 
 import {Q} from '@nozbe/watermelondb';
+
 import {fetchRolesIfNeeded} from '@actions/remote/role';
 import {Database, General} from '@constants';
 import DatabaseManager from '@database/manager';
 import {debounce} from '@helpers/api/general';
 import analytics from '@init/analytics';
 import NetworkManager from '@init/network_manager';
-import {prepareUsers, queryCurrentUser, queryUsersById, queryUsersByUsername} from '@queries/servers/user';
 import {queryCurrentUserId} from '@queries/servers/system';
+import {prepareUsers, queryCurrentUser, queryUsersById, queryUsersByUsername} from '@queries/servers/user';
+
+import {forceLogoutIfNecessary} from './session';
 
 import type {Client} from '@client/rest';
 import type {LoadMeArgs} from '@typings/database/database';
 import type RoleModel from '@typings/database/models/servers/role';
 import type UserModel from '@typings/database/models/servers/user';
 
-import {forceLogoutIfNecessary} from './session';
-
 export type ProfilesPerChannelRequest = {
     data?: ProfilesInChannelRequest[];
     error?: never;

app/client/rest/base.ts

@@ -8,16 +8,16 @@ import {t} from '@i18n';
 import {Analytics, create} from '@init/analytics';
 import {setServerCredentials} from '@init/credentials';
 
+import * as ClientConstants from './constants';
+import ClientError from './error';
+
 import type {
     APIClientInterface,
     ClientHeaders,
     ClientResponse,
     RequestOptions,
 } from '@mattermost/react-native-network-client';
 
-import * as ClientConstants from './constants';
-import ClientError from './error';
-
 export default class ClientBase {
     analytics: Analytics|undefined;
     apiClient: APIClientInterface;

app/client/rest/index.test.js

@@ -2,6 +2,7 @@
 // See LICENSE.txt for license information.
 
 import assert from 'assert';
+
 import nock from 'nock';
 
 import {HEADER_X_VERSION_ID} from '@client/rest/constants';

app/client/rest/index.ts

@@ -3,10 +3,10 @@
 
 import mix from '@utils/mix';
 
-import {DEFAULT_LIMIT_AFTER, DEFAULT_LIMIT_BEFORE, HEADER_X_VERSION_ID} from './constants';
 import ClientApps, {ClientAppsMix} from './apps';
 import ClientBase from './base';
 import ClientChannels, {ClientChannelsMix} from './channels';
+import {DEFAULT_LIMIT_AFTER, DEFAULT_LIMIT_BEFORE, HEADER_X_VERSION_ID} from './constants';
 import ClientEmojis, {ClientEmojisMix} from './emojis';
 import ClientFiles, {ClientFilesMix} from './files';
 import ClientGeneral, {ClientGeneralMix} from './general';

app/components/app_version/index.tsx

@@ -5,8 +5,8 @@ import React from 'react';
 import {StyleSheet, TextStyle, View} from 'react-native';
 import DeviceInfo from 'react-native-device-info';
 
-import {t} from '@i18n';
 import FormattedText from '@components/formatted_text';
+import {t} from '@i18n';
 
 const style = StyleSheet.create({
     info: {

app/components/custom_status/custom_status_emoji.test.tsx

@@ -1,12 +1,12 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
+import Database from '@nozbe/watermelondb/Database';
 import React from 'react';
 
 import CustomStatusEmoji from '@components/custom_status/custom_status_emoji';
 import {renderWithEverything} from '@test/intl-test-helper';
 import TestHelper from '@test/test_helper';
-import Database from '@nozbe/watermelondb/Database';
 
 describe('components/custom_status/custom_status_emoji', () => {
     let database: Database | undefined;

app/components/custom_status/custom_status_text.test.tsx

@@ -1,5 +1,6 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
+
 import React from 'react';
 
 import CustomStatusText from '@components/custom_status/custom_status_text';

app/components/emoji/index.tsx

@@ -23,8 +23,8 @@ import NetworkManager from '@init/network_manager';
 import {EmojiIndicesByAlias, Emojis} from '@utils/emoji';
 
 import type {WithDatabaseArgs} from '@typings/database/database';
+import type CustomEmojiModel from '@typings/database/models/servers/custom_emoji';
 import type SystemModel from '@typings/database/models/servers/system';
-import CustomEmojiModel from '@typings/database/models/servers/custom_emoji';
 
 const assetImages = new Map([['mattermost.png', require('@assets/images/emojis/mattermost.png')]]);
 

app/components/error_text/error_text.test.tsx

@@ -1,8 +1,8 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React from 'react';
 import {render} from '@testing-library/react-native';
+import React from 'react';
 
 import {Preferences} from '@constants';
 

app/components/formatted_markdown_text/index.tsx

@@ -11,7 +11,7 @@ import AtMention from '@components/markdown/at_mention';
 import MarkdownLink from '@components/markdown/markdown_link';
 import {useTheme} from '@context/theme';
 import {getMarkdownTextStyles} from '@utils/markdown';
-import {concatStyles, changeOpacity, makeStyleSheetFromTheme} from '@app/utils/theme';
+import {concatStyles, changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
 
 import type {PrimitiveType} from 'intl-messageformat';
 

app/components/formatted_text/index.tsx

@@ -2,8 +2,8 @@
 // See LICENSE.txt for license information.
 
 import {createElement, isValidElement} from 'react';
-import {StyleProp, Text, TextProps, TextStyle, ViewStyle} from 'react-native';
 import {useIntl} from 'react-intl';
+import {StyleProp, Text, TextProps, TextStyle, ViewStyle} from 'react-native';
 
 type FormattedTextProps = TextProps & {
     id: string;

app/components/markdown/at_mention/index.tsx

@@ -11,13 +11,13 @@ import {useIntl} from 'react-intl';
 import {DeviceEventEmitter, GestureResponderEvent, StyleProp, StyleSheet, Text, TextStyle, View} from 'react-native';
 import {of as of$} from 'rxjs';
 
+import CompassIcon from '@components/compass_icon';
 import SlideUpPanelItem, {ITEM_HEIGHT} from '@components/slide_up_panel_item';
-import {useTheme} from '@context/theme';
 import {Navigation, Preferences} from '@constants';
 import {MM_TABLES, SYSTEM_IDENTIFIERS} from '@constants/database';
+import {useTheme} from '@context/theme';
 import UserModel from '@database/models/server/user';
 import {getTeammateNameDisplaySetting} from '@helpers/api/preference';
-import CompassIcon from '@components/compass_icon';
 import {showModal, showModalOverCurrentContext} from '@screens/navigation';
 import {displayUsername, getUserMentionKeys, getUsersByUsername} from '@utils/user';
 

app/components/markdown/index.tsx

@@ -21,9 +21,9 @@ import MarkdownLink from './markdown_link';
 import MarkdownList from './markdown_list';
 import MarkdownListItem from './markdown_list_item';
 import MarkdownTable from './markdown_table';
+import MarkdownTableCell, {MarkdownTableCellProps} from './markdown_table_cell';
 import MarkdownTableImage from './markdown_table_image';
 import MarkdownTableRow, {MarkdownTableRowProps} from './markdown_table_row';
-import MarkdownTableCell, {MarkdownTableCellProps} from './markdown_table_cell';
 import {addListItemIndices, combineTextNodes, highlightMentions, pullOutImages} from './transform';
 
 import type {MarkdownBlockStyles, MarkdownTextStyles, UserMentionKey} from '@typings/global/markdown';

app/components/markdown/markdown_block_quote/index.tsx

@@ -2,7 +2,6 @@
 // See LICENSE.txt for license information.
 
 import React, {ReactNode} from 'react';
-
 import {StyleSheet, TextStyle, View, ViewStyle} from 'react-native';
 
 import CompassIcon from '@components/compass_icon';

app/components/markdown/markdown_code_block/index.tsx

@@ -8,10 +8,10 @@ import {useIntl} from 'react-intl';
 import {DeviceEventEmitter, Keyboard, StyleSheet, Text, TextStyle, View} from 'react-native';
 
 import FormattedText from '@components/formatted_text';
-import {useTheme} from '@context/theme';
 import SlideUpPanelItem, {ITEM_HEIGHT} from '@components/slide_up_panel_item';
 import TouchableWithFeedback from '@components/touchable_with_feedback';
 import {Navigation} from '@constants';
+import {useTheme} from '@context/theme';
 import {goToScreen, showModalOverCurrentContext} from '@screens/navigation';
 import {getDisplayNameForLanguage} from '@utils/markdown';
 import {preventDoubleTap} from '@utils/tap';

app/components/markdown/markdown_link/index.tsx

@@ -2,9 +2,9 @@
 // See LICENSE.txt for license information.
 
 import {useManagedConfig} from '@mattermost/react-native-emm';
-import Clipboard from '@react-native-community/clipboard';
 import {withDatabase} from '@nozbe/watermelondb/DatabaseProvider';
 import withObservables from '@nozbe/with-observables';
+import Clipboard from '@react-native-community/clipboard';
 import React, {Children, ReactElement, useCallback} from 'react';
 import {useIntl} from 'react-intl';
 import {Alert, DeviceEventEmitter, StyleSheet, Text, View} from 'react-native';
@@ -20,8 +20,8 @@ import DeepLinkTypes from '@constants/deep_linking';
 import {useServerUrl} from '@context/server_url';
 import {dismissAllModals, popToRoot, showModalOverCurrentContext} from '@screens/navigation';
 import {errorBadChannel} from '@utils/draft';
-import {matchDeepLink, normalizeProtocol, tryOpenURL} from '@utils/url';
 import {preventDoubleTap} from '@utils/tap';
+import {matchDeepLink, normalizeProtocol, tryOpenURL} from '@utils/url';
 
 import type {WithDatabaseArgs} from '@typings/database/database';
 import type SystemModel from '@typings/database/models/servers/system';