[MI-2002]: Created plugin API to fetch user details and UI integratio…

server/constants/messages.go

@@ -26,6 +26,7 @@ const (
 	GetProjectListError             = "Error getting Project List"
 	ErrorFetchProjectList           = "Error in fetching project list"
 	ErrorDecodingBody               = "Error in decoding body"
+	ErrorLoadingDataFromKVStore     = "Error in loading data from KV store"
 	ProjectNotFound                 = "Requested project does not exist"
 	ErrorUnlinkProject              = "Error in unlinking the project"
 )

server/constants/routes.go

@@ -6,6 +6,7 @@ const (
 	WildRoute          = "{anything:.*}"
 	PathOAuthConnect   = "/oauth/connect"
 	PathOAuthCallback  = "/oauth/complete"
-	PathLinkedProjects = "/link/project"
-	PathUnlinkProject  = "/unlink/project"
+	PathLinkedProjects = "/project/link"
+	PathUnlinkProject  = "/project/unlink"
+	PathUser           = "/user"
 )

server/plugin/api.go

@@ -38,6 +38,7 @@ func (p *Plugin) InitRoutes() {
 	s.HandleFunc("/link", p.handleAuthRequired(p.handleLink)).Methods(http.MethodPost)
 	s.HandleFunc(constants.PathLinkedProjects, p.handleAuthRequired(p.handleGetAllLinkedProjects)).Methods(http.MethodGet)
 	s.HandleFunc(constants.PathUnlinkProject, p.handleAuthRequired(p.handleUnlinkProject)).Methods(http.MethodPost)
+	s.HandleFunc(constants.PathUser, p.handleAuthRequired(p.handleGetUserAccountDetails)).Methods(http.MethodGet)
 }
 
 // API to create task of a project in an organization.
@@ -233,6 +234,36 @@ func (p *Plugin) handleUnlinkProject(w http.ResponseWriter, r *http.Request) {
 	}
 }
 
+// handleGetUserAccountDetails provides user details
+func (p *Plugin) handleGetUserAccountDetails(w http.ResponseWriter, r *http.Request) {
+	mattermostUserID := r.Header.Get(constants.HeaderMattermostUserIDAPI)
+	userDetails, err := p.Store.LoadUser(mattermostUserID)
+	if err != nil {
+		p.API.LogError(constants.ErrorLoadingDataFromKVStore, "Error", err.Error())
+		p.handleError(w, r, &serializers.Error{Code: http.StatusInternalServerError, Message: err.Error()})
+		return
+	}
+
+	if userDetails.MattermostUserID == "" {
+		p.API.LogError(constants.ConnectAccountFirst, "Error")
+		p.handleError(w, r, &serializers.Error{Code: http.StatusUnauthorized, Message: constants.ConnectAccountFirst})
+		return
+	}
+
+	response, err := json.Marshal(&userDetails)
+	if err != nil {
+		p.API.LogError("Error marshaling the response", "Error", err.Error())
+		p.handleError(w, r, &serializers.Error{Code: http.StatusInternalServerError, Message: err.Error()})
+		return
+	}
+
+	w.Header().Add("Content-Type", "application/json")
+	w.WriteHeader(http.StatusOK)
+	if _, err := w.Write(response); err != nil {
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+	}
+}
+
 func (p *Plugin) WithRecovery(next http.Handler) http.Handler {
 	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
 		defer func() {

webapp/src/components/emptyState/index.tsx

@@ -2,6 +2,8 @@ import React from 'react';
 
 import './styles.scss';
 
+type DisplayIcon = 'folder' | 'azure'
+
 type EmptyStatePropTypes = {
     title: string,
     subTitle?: {
@@ -10,6 +12,7 @@ type EmptyStatePropTypes = {
     },
     buttonText?: string,
     buttonAction?: (event: React.SyntheticEvent) => void;
+    icon?: DisplayIcon;
 }
 
 const EmptyState = ({title, subTitle, buttonText, buttonAction}: EmptyStatePropTypes) => (

webapp/src/components/emptyState/styles.scss

@@ -36,3 +36,9 @@
   border-radius: 4px;
   border: 1px solid rgba(var(--center-channel-color-rgb), 0.08);
 }
+
+.slash-command {
+  padding: 10px 15px;
+  border-radius: 4px;
+  border: 1px solid rgba(var(--center-channel-color-rgb), 0.08);
+}

webapp/src/containers/Rhs/accountNotLinked/index.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+import {useDispatch} from 'react-redux';
+
+import EmptyState from 'components/emptyState';
+
+import Utils from 'utils';
+
+const AccountNotLinked = () => {
+    const dispatch = useDispatch();
+
+    const closeRHS = () => {
+        dispatch({
+            type: 'UPDATE_RHS_STATE',
+            state: null,
+        });
+    };
+
+    // Opens link project modal
+    const handleConnectAccount = () => {
+        window.open(`${Utils.getBaseUrls().pluginApiBaseUrl}/oauth/connect`, '_blank');
+        closeRHS();
+    };
+
+    return (
+        <>
+            <EmptyState
+                title='No account connected'
+                subTitle={{text: 'Connect your account by clicking the button below'}}
+                buttonText='Connect your account'
+                buttonAction={handleConnectAccount}
+                icon='azure'
+            />
+        </>
+    );
+};
+
+export default AccountNotLinked;

webapp/src/containers/Rhs/index.tsx

@@ -1,24 +1,44 @@
-import React from 'react';
+import React, {useEffect} from 'react';
 
 import usePluginApi from 'hooks/usePluginApi';
 import {getprojectDetailsState, getRhsState} from 'selectors';
 
+import LinearLoader from 'components/loader/linear';
+
+import plugin_constants from 'plugin_constants';
+
+import AccountNotLinked from './accountNotLinked';
 import ProjectList from './projectList';
 import ProjectDetails from './projectDetails';
 
 const Rhs = (): JSX.Element => {
-    const usePlugin = usePluginApi();
+    const {getApiState, makeApiRequest, state} = usePluginApi();
+
+    // Fetch the connected account details when RHS is opened
+    useEffect(() => {
+        if (getRhsState(state).isSidebarOpen) {
+            makeApiRequest(plugin_constants.pluginApiServiceConfigs.getUserDetails.apiServiceName);
+        }
+    }, []);
+
+    const {isLoading, isError, isSuccess} = getApiState(plugin_constants.pluginApiServiceConfigs.getUserDetails.apiServiceName);
 
-    if (!getRhsState(usePlugin.state).isSidebarOpen) {
+    if (!getRhsState(state).isSidebarOpen) {
         return <></>;
     }
 
     return (
-        <div className='height-rhs bg-sidebar padding-25'>
+        <div className='overflow-auto height-rhs bg-sidebar padding-25'>
+            {isLoading && <LinearLoader/>}
+            {isError && <AccountNotLinked/>}
             {
-                getprojectDetailsState(usePlugin.state).projectID ?
-                    <ProjectDetails title={getprojectDetailsState(usePlugin.state).projectName}/> :
-                    <ProjectList/>
+                !isLoading &&
+                !isError &&
+                isSuccess && (
+                    getprojectDetailsState(state).projectID ?
+                        <ProjectDetails title={getprojectDetailsState(state).projectName}/> :
+                        <ProjectList/>
+                )
             }
         </div>
     );

webapp/src/containers/Rhs/projectList/index.tsx

@@ -66,7 +66,7 @@ const ProjectList = () => {
         }
     }, [getLinkModalState(usePlugin.state)]);
 
-    const {data} = usePlugin.getApiState(plugin_constants.pluginApiServiceConfigs.getAllLinkedProjectsList.apiServiceName);
+    const {data, isSuccess, isLoading} = usePlugin.getApiState(plugin_constants.pluginApiServiceConfigs.getAllLinkedProjectsList.apiServiceName);
 
     return (
         <>
@@ -76,20 +76,15 @@ const ProjectList = () => {
                     isOpen={showConfirmationModal}
                     onHide={() => setShowConfirmationModal(false)}
                     onConfirm={handleConfirmUnlinkProject}
-                    isLoading={usePlugin.getApiState(plugin_constants.pluginApiServiceConfigs.unlinkProject.apiServiceName, projectToBeUnlinked).isLoading}
+                    isLoading={isLoading}
                     confirmBtnText='Unlink'
                     description={`Are you sure you want to unlink ${projectToBeUnlinked?.projectName}?`}
                     title='Confirm Project Unlink'
                 />
             }
+            {isLoading && <LinearLoader/>}
             {
-                usePlugin.getApiState(plugin_constants.pluginApiServiceConfigs.getAllLinkedProjectsList.apiServiceName).isLoading && (
-                    <LinearLoader/>
-                )
-            }
-            {
-                usePlugin.getApiState(plugin_constants.pluginApiServiceConfigs.getAllLinkedProjectsList.apiServiceName).isSuccess &&
-                data &&
+                isSuccess && data &&
                 (
                     data.length ?
                         data.map((item) => (

webapp/src/hooks/index.js

@@ -7,6 +7,13 @@ export default class Hooks {
         this.store = store;
     }
 
+    closeRhs() {
+        this.store.dispatch({
+            type: 'UPDATE_RHS_STATE',
+            state: null,
+        });
+    }
+
     slashCommandWillBePostedHook = (message, contextArgs) => {
         let commandTrimmed;
         if (message) {
@@ -19,7 +26,6 @@ export default class Hooks {
                 args: contextArgs,
             });
         }
-
         if (commandTrimmed && commandTrimmed.startsWith('/azuredevops boards create')) {
             const args = splitArgs(commandTrimmed);
             this.store.dispatch(showTaskModal(args));
@@ -30,6 +36,20 @@ export default class Hooks {
             this.store.dispatch(showLinkModal(args));
             return Promise.resolve({});
         }
+        if (commandTrimmed && commandTrimmed.startsWith('/azuredevops connect')) {
+            this.closeRhs();
+            return {
+                message,
+                args: contextArgs,
+            };
+        }
+        if (commandTrimmed && commandTrimmed.startsWith('/azuredevops disconnect')) {
+            this.closeRhs();
+            return {
+                message,
+                args: contextArgs,
+            };
+        }
         return Promise.resolve({
             message,
             args: contextArgs,

webapp/src/plugin_constants/index.ts

@@ -29,15 +29,20 @@ const pluginApiServiceConfigs: Record<ApiServiceName, PluginApiService> = {
         apiServiceName: 'testGet',
     },
     getAllLinkedProjectsList: {
-        path: '/link/project',
+        path: '/project/link',
         method: 'GET',
         apiServiceName: 'getAllLinkedProjectsList',
     },
     unlinkProject: {
-        path: '/unlink/project',
+        path: '/project/unlink',
         method: 'POST',
         apiServiceName: 'unlinkProject',
     },
+    getUserDetails: {
+        path: '/user',
+        method: 'GET',
+        apiServiceName: 'getUserDetails',
+    },
 };
 
 export default {

webapp/src/services/index.ts

@@ -42,6 +42,13 @@ const pluginApi = createApi({
                 body: payload,
             }),
         }),
+        [Constants.pluginApiServiceConfigs.getUserDetails.apiServiceName]: builder.query<UserDetails, void>({
+            query: () => ({
+                headers: {[Constants.HeaderMattermostUserID]: Cookies.get(Constants.MMUSERID)},
+                url: Constants.pluginApiServiceConfigs.getUserDetails.path,
+                method: Constants.pluginApiServiceConfigs.getUserDetails.method,
+            }),
+        }),
     }),
 });
 

webapp/src/styles/_components.scss

@@ -18,3 +18,18 @@
         margin: 6px 5px 0 0;
     }
 }
+
+.rhs-project-list-wrapper {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    padding: 15px 0 30px;
+    width: 100%;
+    background-color: var(--center-channel-bg);
+    box-shadow: 5px -1px 5px rgba(0, 0, 0, 0.1);
+    text-align: center;
+
+    .project-list-btn {
+        width: calc(100% - 60px); // 60px is the width of padding from left and right
+    }
+}

webapp/src/styles/_utils.scss

@@ -84,3 +84,8 @@
 .cursor-pointer {
     cursor: pointer;
 }
+
+// Overflows
+.overflow-auto {
+    overflow: auto;
+}

webapp/src/types/common/index.d.ts

@@ -4,7 +4,7 @@
 
 type HttpMethod = 'GET' | 'POST';
 
-type ApiServiceName = 'createTask' | 'testGet' | 'createLink' | 'getAllLinkedProjectsList' | 'unlinkProject'
+type ApiServiceName = 'createTask' | 'testGet' | 'createLink' | 'getAllLinkedProjectsList' | 'unlinkProject' | 'getUserDetails'
 
 type PluginApiService = {
     path: string,
@@ -43,7 +43,7 @@ type CreateTaskPayload = {
     fields: CreateTaskFields,
 }
 
-type APIRequestPayload = CreateTaskPayload | LinkPayload | ProjectDetails | void;
+type APIRequestPayload = CreateTaskPayload | LinkPayload | ProjectDetails | UserDetails | void;
 
 type DropdownOptionType = {
     label?: string | JSX.Element;
@@ -62,6 +62,10 @@ type ProjectDetails = {
     organizationName: string
 }
 
+type UserDetails = {
+    MattermostUserID: string
+}
+
 type eventType = 'create' | 'update' | 'delete'
 
 type SubscriptionDetails = {