[MI-2060]: Refactor code for release and make required changes

server/constants/constants.go

@@ -3,8 +3,8 @@ package constants
 const (
 	// Bot configs
 	BotUsername    = "azuredevops"
-	BotDisplayName = "Azure Devops"
-	BotDescription = "A bot account created by the Azure Devops plugin."
+	BotDisplayName = "Azure DevOps"
+	BotDescription = "A bot account created by the Azure DevOps plugin."
 
 	// Plugin configs
 	PluginID               = "mattermost-plugin-azure-devops"
@@ -13,8 +13,13 @@ const (
 
 	// Command configs
 	CommandTriggerName = "azuredevops"
-	HelpText           = "###### Mattermost Azure Devops Plugin - Slash Command Help\n"
-	InvalidCommand     = "Invalid command parameters. Please use `/azuredevops help` for more information."
+	HelpText           = "###### Mattermost Azure DevOps Plugin - Slash Command Help\n" +
+		"* `/azuredevops connect` - Connect your Mattermost account to your Azure DevOps account.\n" +
+		"* `/azuredevops disconnect` - Disconnect your Mattermost account from your Azure DevOps account.\n" +
+		"* `/azuredevops link [projectURL]` - Link your project to a current channel.\n" +
+		"* `/azuredevops boards create [title] [description]` - Create a new task for your project.\n" +
+		"* `/azuredevops subscribe` - Create subscriptions to track changes in tasks for your linked projects.\n"
+	InvalidCommand = "Invalid command parameters. Please use `/azuredevops help` for more information."
 
 	// Get task link preview constants
 	HTTPS              = "https:"

server/constants/messages.go

@@ -4,11 +4,11 @@ const (
 	// TODO: all these messages are to be verified from Mike at the end
 	// Generic
 	GenericErrorMessage  = "Something went wrong, please try again later"
-	ConnectAccount       = "[Click here to link your Azure DevOps account](%s%s)"
-	ConnectAccountFirst  = "You do not have any Azure Devops account connected. Kindly link the account first"
-	UserConnected        = "Your Azure Devops account is successfully connected!"
-	UserAlreadyConnected = "Your Azure Devops account is already connected"
-	UserDisconnected     = "Your Azure Devops account is now disconnected"
+	ConnectAccount       = "[Click here to connect your Azure DevOps account](%s%s)"
+	ConnectAccountFirst  = "Your Azure DevOps account is not connected \n%s"
+	UserConnected        = "Your Azure DevOps account is successfully connected!"
+	UserAlreadyConnected = "Your Azure DevOps account is already connected"
+	UserDisconnected     = "Your Azure DevOps account is now disconnected"
 	CreatedTask          = "Link for newly created task: %s"
 	TaskTitle            = "[%s #%d: %s](%s)"
 	TaskPreviewMessage   = "State: %s\nAssigned To: %s\nDescription: %s"

server/plugin/client.go

@@ -174,7 +174,7 @@ func (c *client) callJSON(url, path, method, mattermostUserID string, in, out in
 
 // Makes HTTP request to REST APIs
 func (c *client) call(basePath, method, path, contentType string, mattermostUserID string, inBody io.Reader, out interface{}, formValues url.Values) (responseData []byte, statusCode int, err error) {
-	errContext := fmt.Sprintf("Azure Devops: Call failed: method:%s, path:%s", method, path)
+	errContext := fmt.Sprintf("Azure DevOps: Call failed: method:%s, path:%s", method, path)
 	pathURL, err := url.Parse(path)
 	if err != nil {
 		return nil, http.StatusInternalServerError, errors.WithMessage(err, errContext)

server/plugin/command.go

@@ -55,12 +55,12 @@ func (p *Plugin) getAutoCompleteData() *model.AutocompleteData {
 	disconnect := model.NewAutocompleteData("disconnect", "", "Disconnect your Azure DevOps account")
 	azureDevops.AddCommand(disconnect)
 
-	create := model.NewAutocompleteData("boards create", "", "create a new task")
-	azureDevops.AddCommand(create)
-
-	link := model.NewAutocompleteData("link", "[link]", "link a project")
+	link := model.NewAutocompleteData("link", "[projectURL]", "Link a project")
 	azureDevops.AddCommand(link)
 
+	create := model.NewAutocompleteData("boards create [title] [description]", "", "Create a new task")
+	azureDevops.AddCommand(create)
+
 	subscribe := model.NewAutocompleteData("subscribe", "", "Add a subscription")
 	azureDevops.AddCommand(subscribe)
 
@@ -70,7 +70,7 @@ func (p *Plugin) getAutoCompleteData() *model.AutocompleteData {
 func (p *Plugin) getCommand() (*model.Command, error) {
 	iconData, err := command.GetIconData(p.API, "assets/azurebot.svg")
 	if err != nil {
-		return nil, errors.Wrap(err, "failed to get Azure Devops icon")
+		return nil, errors.Wrap(err, "failed to get Azure DevOps icon")
 	}
 
 	return &model.Command{
@@ -85,7 +85,7 @@ func (p *Plugin) getCommand() (*model.Command, error) {
 
 func azureDevopsAccountConnectionCheck(p *Plugin, c *plugin.Context, commandArgs *model.CommandArgs, args ...string) (*model.CommandResponse, *model.AppError) {
 	if isConnected := p.UserAlreadyConnected(commandArgs.UserId); !isConnected {
-		return p.sendEphemeralPostForCommand(commandArgs, constants.ConnectAccountFirst)
+		return p.sendEphemeralPostForCommand(commandArgs, p.getConnectAccountFirstMessage())
 	}
 
 	return &model.CommandResponse{}, nil
@@ -106,7 +106,7 @@ func azureDevopsConnectCommand(p *Plugin, c *plugin.Context, commandArgs *model.
 func azureDevopsDisconnectCommand(p *Plugin, c *plugin.Context, commandArgs *model.CommandArgs, args ...string) (*model.CommandResponse, *model.AppError) {
 	message := constants.UserDisconnected
 	if isConnected := p.UserAlreadyConnected(commandArgs.UserId); !isConnected {
-		message = constants.ConnectAccountFirst
+		message = p.getConnectAccountFirstMessage()
 	} else {
 		if isDeleted, err := p.Store.DeleteUser(commandArgs.UserId); !isDeleted {
 			if err != nil {

server/plugin/oAuth.go

@@ -241,7 +241,7 @@ func (p *Plugin) closeBrowserWindowWithHTTPResponse(w http.ResponseWriter) {
 			</script>
 		</head>
 		<body>
-			<p>Completed connecting to Azure Devops. Please close this window.</p>
+			<p>Completed connecting to Azure DevOps. Please close this window.</p>
 		</body>
 	</html>
 	`

server/plugin/utils.go

@@ -191,3 +191,7 @@ func (p *Plugin) IsAnyProjectLinked(mattermostUserID string) (bool, error) {
 
 	return true, nil
 }
+
+func (p *Plugin) getConnectAccountFirstMessage() string {
+	return fmt.Sprintf(constants.ConnectAccountFirst, fmt.Sprintf(constants.ConnectAccount, p.GetPluginURLPath(), constants.PathOAuthConnect))
+}

webapp/src/components/card/subscription/index.tsx

@@ -16,10 +16,11 @@ const SubscriptionCard = ({handleDeleteSubscrption, subscriptionDetails: {projec
         <BaseCard>
             <div className='d-flex'>
                 <div className='project-details'>
-                    <LabelValuePair
+                    {/* TODO: discuss if this is required and it should be the subscription's name not the project name */}
+                    {/* <LabelValuePair
                         label='Name'
                         value={projectName}
-                    />
+                    /> */}
                     <LabelValuePair
                         label='Event'
                         value={eventType}

webapp/src/containers/TaskModal/index.tsx

@@ -1,46 +1,17 @@
 import React, {useEffect, useState} from 'react';
-import {useDispatch} from 'react-redux';
+import {useDispatch, useSelector} from 'react-redux';
+import {GlobalState} from 'mattermost-redux/types/store';
 
 import Dropdown from 'components/dropdown';
 import Input from 'components/inputField';
 import Modal from 'components/modal';
 
-import Constants from 'plugin_constants';
-
 import usePluginApi from 'hooks/usePluginApi';
 import {toggleShowTaskModal} from 'reducers/taskModal';
 import {getCreateTaskModalState} from 'selectors';
 
-// TODO: fetch the organization and project options from API later.
-const organizationOptions = [
-    {
-        value: 'bs-test',
-        label: 'bs-test',
-    },
-    {
-        value: 'brightscout-test',
-        label: 'brightscout-test',
-    },
-];
-
-const projectOptions = [
-    {
-        value: 'bs',
-        label: 'bs',
-    },
-    {
-        value: 'bs-2',
-        label: 'bs-2',
-    },
-    {
-        value: 'bs-3',
-        label: 'bs-3',
-    },
-    {
-        value: 'azure-test',
-        label: 'azure-test',
-    },
-];
+import {getOrganizationList, getProjectList} from 'utils';
+import plugin_constants from 'plugin_constants';
 
 const taskTypeOptions = [
     {
@@ -77,10 +48,13 @@ const TaskModal = () => {
             description: '',
         },
     });
+    const [organizationOptions, setOrganizationOptions] = useState<DropdownOptionType[]>([]);
+    const [projectOptions, setProjectOptions] = useState<DropdownOptionType[]>([]);
 
     // Hooks
     const usePlugin = usePluginApi();
     const dispatch = useDispatch();
+    const {entities} = useSelector((state: GlobalState) => state);
 
     // Function to hide the modal and reset all the states.
     const resetModalState = () => {
@@ -165,23 +139,54 @@ const TaskModal = () => {
 
     // Make POST api request to create a task
     const createTask = async () => {
-        const createTaskResponse = await usePlugin.makeApiRequest(Constants.pluginApiServiceConfigs.createTask.apiServiceName, taskDetails);
+        const createTaskResponse = await usePlugin.makeApiRequest(plugin_constants.pluginApiServiceConfigs.createTask.apiServiceName, taskDetails);
         if (createTaskResponse) {
             resetModalState();
         }
     };
 
+    // Get ProjectList State
+    const getProjectState = () => {
+        const {isLoading, isSuccess, isError, data} = usePlugin.getApiState(plugin_constants.pluginApiServiceConfigs.getAllLinkedProjectsList.apiServiceName);
+        return {isLoading, isSuccess, isError, data: data as ProjectDetails[]};
+    };
+
+    // Get ChannelList State
+    const getChannelState = () => {
+        const {isLoading, isSuccess, isError, data} = usePlugin.getApiState(plugin_constants.pluginApiServiceConfigs.getChannels.apiServiceName, {teamId: entities.teams.currentTeamId});
+        return {isLoading, isSuccess, isError, data: data as ChannelList[]};
+    };
+
+    useEffect(() => {
+        if (!getChannelState().data) {
+            usePlugin.makeApiRequest(plugin_constants.pluginApiServiceConfigs.getChannels.apiServiceName, {teamId: entities.teams.currentTeamId});
+        }
+        if (!getProjectState().data) {
+            usePlugin.makeApiRequest(plugin_constants.pluginApiServiceConfigs.getAllLinkedProjectsList.apiServiceName);
+        }
+    }, []);
+
+    useEffect(() => {
+        const projectList = getProjectState().data;
+        if (projectList) {
+            setProjectOptions(getProjectList(projectList));
+            setOrganizationOptions(getOrganizationList(projectList));
+        }
+    }, [usePlugin.state]);
+
+    useEffect(() => {
+        // Pre-select the dropdown value in case of single option.
+        if (organizationOptions.length === 1) {
+            setTaskDetails((value) => ({...value, organization: organizationOptions[0].value}));
+        }
+        if (projectOptions.length === 1) {
+            setTaskDetails((value) => ({...value, project: projectOptions[0].value}));
+        }
+    }, [projectOptions, organizationOptions]);
+
     // Set modal field values
     useEffect(() => {
         if (getCreateTaskModalState(usePlugin.state).visibility) {
-            // Pre-select the dropdown value in case of single option.
-            if (organizationOptions.length === 1) {
-                setTaskDetails({...taskDetails, organization: organizationOptions[0].value});
-            }
-            if (projectOptions.length === 1) {
-                setTaskDetails({...taskDetails, project: projectOptions[0].value});
-            }
-
             setTaskDetails({
                 ...taskDetails,
                 fields: {
@@ -192,7 +197,7 @@ const TaskModal = () => {
         }
     }, [getCreateTaskModalState(usePlugin.state).visibility]);
 
-    const apiResponse = usePlugin.getApiState(Constants.pluginApiServiceConfigs.createTask.apiServiceName, taskDetails);
+    const apiResponse = usePlugin.getApiState(plugin_constants.pluginApiServiceConfigs.createTask.apiServiceName, taskDetails);
     return (
         <Modal
             show={getCreateTaskModalState(usePlugin.state).visibility}

webapp/src/plugin_constants/index.ts

@@ -5,8 +5,8 @@
 // Plugin configs
 const pluginId = 'mattermost-plugin-azure-devops';
 
-const AzureDevops = 'Azure Devops';
-const RightSidebarHeader = 'Azure Devops';
+const AzureDevops = 'Azure DevOps';
+const RightSidebarHeader = 'Azure DevOps';
 
 const MMCSRF = 'MMCSRF';
 const HeaderCSRFToken = 'X-CSRF-Token';