Convert files related to redux from js to ts

webapp/src/actions/index.js → webapp/src/actions/index.ts

@@ -2,13 +2,18 @@ import {getCurrentChannelId, getCurrentUserId} from 'mattermost-redux/selectors/
 
 import {PostTypes} from 'mattermost-redux/action_types';
 
+import {AnyAction, Dispatch} from 'redux';
+
 import Client from '../client';
 import ActionTypes from '../action_types';
-import manifest from '../manifest';
+import {APIError, ConnectedData, GitlabUsersData, LHSData, ShowRhsPluginActionData, SubscriptionData} from 'src/types';
+import {Item} from 'src/types/gitlab_items';
+import {GlobalState} from 'src/types/store';
+import {getPluginState} from 'src/selectors';
 
 export function getConnected(reminder = false) {
-    return async (dispatch) => {
-        let data;
+    return async (dispatch: Dispatch<AnyAction>) => {
+        let data: ConnectedData;
         try {
             data = await Client.getConnected(reminder);
         } catch (error) {
@@ -24,8 +29,8 @@ export function getConnected(reminder = false) {
     };
 }
 
-function checkAndHandleNotConnected(data) {
-    return async (dispatch) => {
+function checkAndHandleNotConnected(data: APIError) {
+    return async (dispatch: Dispatch<AnyAction>) => {
         if (data && data.id === 'not_connected') {
             dispatch({
                 type: ActionTypes.RECEIVED_CONNECTED,
@@ -34,24 +39,24 @@ function checkAndHandleNotConnected(data) {
                     gitlab_username: '',
                     gitlab_client_id: '',
                     settings: {},
-                },
+                } as ConnectedData,
             });
             return false;
         }
         return true;
     };
 }
 
-export function getReviewDetails(prList) {
-    return async (dispatch, getState) => {
-        let data;
+export function getReviewDetails(prList: Item[]) {
+    return async (dispatch: Dispatch<AnyAction>) => {
+        let data: Item | APIError;
         try {
             data = await Client.getPrsDetails(prList);
         } catch (error) {
             return {error};
         }
 
-        const connected = await checkAndHandleNotConnected(data)(dispatch, getState);
+        const connected = await checkAndHandleNotConnected(data as APIError)(dispatch);
         if (!connected) {
             return {error: data};
         }
@@ -65,16 +70,16 @@ export function getReviewDetails(prList) {
     };
 }
 
-export function getYourPrDetails(prList) {
-    return async (dispatch, getState) => {
-        let data;
+export function getYourPrDetails(prList: Item[]) {
+    return async (dispatch: Dispatch<AnyAction>) => {
+        let data: Item | APIError;
         try {
             data = await Client.getPrsDetails(prList);
         } catch (error) {
             return {error};
         }
 
-        const connected = await checkAndHandleNotConnected(data)(dispatch, getState);
+        const connected = await checkAndHandleNotConnected(data as APIError)(dispatch);
         if (!connected) {
             return {error: data};
         }
@@ -88,45 +93,16 @@ export function getYourPrDetails(prList) {
     };
 }
 
-export function getMentions() {
-    return async (dispatch, getState) => {
-        let data;
-        try {
-            data = await Client.getMentions();
-        } catch (error) {
-            return {error};
-        }
-
-        const connected = await checkAndHandleNotConnected(data)(
-            dispatch,
-            getState,
-        );
-        if (!connected) {
-            return {error: data};
-        }
-
-        dispatch({
-            type: ActionTypes.RECEIVED_MENTIONS,
-            data,
-        });
-
-        return {data};
-    };
-}
-
 export function getLHSData() {
-    return async (dispatch, getState) => {
-        let data;
+    return async (dispatch: Dispatch<AnyAction>) => {
+        let data: LHSData | APIError;
         try {
             data = await Client.getLHSData();
         } catch (error) {
             return {error};
         }
 
-        const connected = await checkAndHandleNotConnected(data)(
-            dispatch,
-            getState,
-        );
+        const connected = await checkAndHandleNotConnected(data as APIError)(dispatch);
         if (!connected) {
             return {error: data};
         }
@@ -144,14 +120,14 @@ export function getLHSData() {
  * Stores "showRHSPlugin" action returned by
  * "registerRightHandSidebarComponent" in plugin initialization.
  */
-export function setShowRHSAction(showRHSPluginAction) {
+export function setShowRHSAction(showRHSPluginAction: () => ShowRhsPluginActionData) {
     return {
         type: ActionTypes.RECEIVED_SHOW_RHS_ACTION,
         showRHSPluginAction,
     };
 }
 
-export function updateRHSState(rhsState) {
+export function updateRHSState(rhsState: string) {
     return {
         type: ActionTypes.UPDATE_RHS_STATE,
         state: rhsState,
@@ -160,13 +136,13 @@ export function updateRHSState(rhsState) {
 
 const GITLAB_USER_GET_TIMEOUT_MILLISECONDS = 1000 * 60 * 60; // 1 hour
 
-export function getGitlabUser(userID) {
-    return async (dispatch, getState) => {
+export function getGitlabUser(userID: string) {
+    return async (dispatch: Dispatch<AnyAction>, getState: () => GlobalState) => {
         if (!userID) {
             return {};
         }
 
-        const user = getState()[`plugins-${manifest.id}`].gitlabUsers[userID];
+        const user = getPluginState(getState()).gitlabUsers[userID];
         if (
             user &&
             user.last_try &&
@@ -179,11 +155,11 @@ export function getGitlabUser(userID) {
             return {data: user};
         }
 
-        let data;
+        let data: GitlabUsersData;
         try {
             data = await Client.getGitlabUser(userID);
-        } catch (error) {
-            if (error.status === 404) {
+        } catch (error: unknown) {
+            if ((error as APIError).status === 404) {
                 dispatch({
                     type: ActionTypes.RECEIVED_GITLAB_USER,
                     userID,
@@ -203,13 +179,13 @@ export function getGitlabUser(userID) {
     };
 }
 
-export function getChannelSubscriptions(channelId) {
-    return async (dispatch) => {
+export function getChannelSubscriptions(channelId: string) {
+    return async (dispatch: Dispatch<AnyAction>) => {
         if (!channelId) {
             return {};
         }
 
-        let subscriptions;
+        let subscriptions: SubscriptionData;
         try {
             subscriptions = await Client.getChannelSubscriptions(channelId);
         } catch (error) {
@@ -228,8 +204,8 @@ export function getChannelSubscriptions(channelId) {
     };
 }
 
-export function sendEphemeralPost(message) {
-    return (dispatch, getState) => {
+export function sendEphemeralPost(message: string) {
+    return (dispatch: Dispatch<AnyAction>, getState: () => GlobalState) => {
         const timestamp = Date.now();
         const state = getState();
 

webapp/src/client/client.js → webapp/src/client/client.ts

@@ -1,44 +1,45 @@
 import {Client4} from 'mattermost-redux/client';
 import {ClientError} from 'mattermost-redux/client/client4';
 
+import {Item, TooltipData} from 'src/types/gitlab_items';
+import {APIError, ConnectedData, GitlabUsersData, LHSData, SubscriptionData} from 'src/types';
+
 export default class Client {
-    setServerRoute = (url) => {
+    private url = '';
+
+    setServerRoute(url: string): void {
         this.url = `${url}/api/v1`;
     }
 
-    getConnected = async (reminder = false) => {
+    async getConnected(reminder: boolean): Promise<ConnectedData> {
         return this.doGet(`${this.url}/connected?reminder=` + reminder);
-    };
+    }
 
-    getPrsDetails = async (prList) => {
+    async getPrsDetails(prList: any): Promise<Item | APIError> {
         return this.doPost(`${this.url}/prdetails`, prList);
     }
 
-    getLHSData= async () => {
+    async getLHSData(): Promise<LHSData | APIError> {
         return this.doGet(`${this.url}/lhs-data`);
     }
 
-    getMentions = async () => {
-        return this.doGet(`${this.url}/mentions`);
-    };
-
-    getGitlabUser = async (userID) => {
+    async getGitlabUser(userID: string): Promise<GitlabUsersData> {
         return this.doPost(`${this.url}/user`, {user_id: userID});
-    };
+    }
 
-    getIssue = async (owner, repo, issueNumber) => {
+    async getIssue(owner: string, repo: string, issueNumber: string): Promise<TooltipData | null> {
         return this.doGet(`${this.url}/issue?owner=${owner}&repo=${repo}&number=${issueNumber}`);
     }
 
-    getPullRequest = async (owner, repo, prNumber) => {
+    async getPullRequest(owner: string, repo: string, prNumber: string): Promise<TooltipData | null> {
         return this.doGet(`${this.url}/mergerequest?owner=${owner}&repo=${repo}&number=${prNumber}`);
     }
 
-    getChannelSubscriptions = async (channelID) => {
+    async getChannelSubscriptions(channelID: string): Promise<SubscriptionData> {
         return this.doGet(`${this.url}/channel/${channelID}/subscriptions`);
-    };
+    }
 
-    doGet = async (url, body, headers = {}) => {
+    private async doGet(url: string, body?: any, headers: Record<string, any> = {}): Promise<any> {
         headers['X-Timezone-Offset'] = new Date().getTimezoneOffset();
 
         const options = {
@@ -59,9 +60,9 @@ export default class Client {
             status_code: response.status,
             url,
         });
-    };
+    }
 
-    doPost = async (url, body, headers = {}) => {
+    private async doPost(url: string, body: any, headers: Record<string, any> = {}): Promise<any> {
         headers['X-Timezone-Offset'] = new Date().getTimezoneOffset();
 
         const options = {
@@ -83,9 +84,9 @@ export default class Client {
             status_code: response.status,
             url,
         });
-    };
+    }
 
-    doDelete = async (url, body, headers = {}) => {
+    private async doDelete(url: string, body?: any, headers: Record<string, any> = {}): Promise<any> {
         headers['X-Timezone-Offset'] = new Date().getTimezoneOffset();
 
         const options = {
@@ -106,9 +107,9 @@ export default class Client {
             status_code: response.status,
             url,
         });
-    };
+    }
 
-    doPut = async (url, body, headers = {}) => {
+    private async doPut(url: string, body: any, headers: Record<string, any> = {}): Promise<any> {
         headers['X-Timezone-Offset'] = new Date().getTimezoneOffset();
 
         const options = {
@@ -130,5 +131,5 @@ export default class Client {
             status_code: response.status,
             url,
         });
-    };
+    }
 }

webapp/src/client/index.js → webapp/src/client/index.ts

@@ -1,4 +1,4 @@
-import ClientClass from './client.js';
+import ClientClass from './client';
 
 const Client = new ClientClass();
 

webapp/src/components/rhs_sidebar/rhs_sidebar.css

@@ -88,13 +88,13 @@
 .gitlab-rhs-Description {
     font-size: 12px;
     font-weight: 400;
-    letterSpacing: 0;
+    letter-spacing: 0;
 }
 
 .gitlab-rhs-Username {
     font-size: 11px;
     font-weight: 600;
-    letterSpacing: 0.02em;
+    letter-spacing: 0.02em;
 }
 
 .gitlab-rhs-GitLabURL {
@@ -129,12 +129,12 @@
 }
 
 .gitlab-rhs-SubscriptionHeader {
-    font-family: 'Open Sans';
+    font-family: 'Open Sans' !important;
     font-size: 12px;
     font-weight: 600;
     line-height: 16px;
-    letterSpacing: 0.02em;
-    textTransform: uppercase;
+    letter-spacing: 0.02em;
+    text-transform: uppercase;
     margin: 0 0 4px 0;
     color: rgba(var(--center-channel-color-rgb), 0.72);
 }