[MI-2061]: Refactoring and optimisations around Forms, RTK query, and types and constants management #45

avas27JTG · 2022-08-22T09:12:43Z

Changes are:

Created generic Form component
Added generic hook to render Form fields along with handling form error
Added generic hook to detect and perform actions on error/success state for API calls made using RTK query
Added util for error handling in forms after API call is made
Refactored types and constants files

…re-devops into MI-1987_1

…te the UI

…n with other changes

…and a centralised check for root modals

…reload

…dling.

… at a time

webapp/src/components/dropdown/index.tsx

webapp/src/components/form/index.tsx

webapp/src/components/dropdown/index.tsx

manojmalik20 · 2022-09-01T15:08:46Z

webapp/src/components/form/index.tsx

+type Props = {
+    fieldConfig: Pick<ModalFormFieldConfig, 'label' | 'type' | 'validations'>
+    value: any
+    optionsList: any


OptionsList will always be LabelValuePair[], right?

yes, this has been changed in later PR not fixing here to avoid conflicts

manojmalik20 · 2022-09-01T15:12:26Z

webapp/src/containers/SubscribeModal/index.tsx

+    } = useForm(plugin_constants.form.subscriptionModal);
+    const {getApiState, makeApiRequest, makeApiRequestWithCompletionStatus, state} = usePluginApi();
+    const {visibility} = getSubscribeModalState(state);
+    const {entities} = useSelector((reduxState: GlobalState) => reduxState);


Suggested change

const {entities} = useSelector((reduxState: GlobalState) => reduxState);

const {currentTeamId} = useSelector((reduxState: GlobalState) => reduxState.entities.teams);

this change is done by @ayusht2810 but I've fixed it here

manojmalik20 · 2022-09-01T15:16:29Z

webapp/src/containers/SubscribeModal/index.tsx

        }

        const projectList = getProjectState().data;
        if (projectList) {
            setProjectOptions(getProjectList(projectList));
            setOrganizationOptions(getOrganizationList(projectList));
        }
-    }, [usePlugin.state]);
+    }, [state]);


Use specific values here instead of using the whole state.

this change is done by @ayusht2810 will be modified by him in his PR

manojmalik20 · 2022-09-01T15:16:56Z

webapp/src/containers/SubscribeModal/index.tsx

    useEffect(() => {
        const channelList = getChannelState().data;
        if (channelList) {
-            setChannelOptions(channelList.map((channel) => ({label: <span><i className='fa fa-globe dropdown-option-icon'/>{channel.display_name}</span>, value: channel.id})));
+            setChannelOptions(channelList.map((channel) => ({
+                label: <span><i className='fa fa-globe dropdown-option-icon'/>{channel.display_name}</span>,


Add condition for public and private channels and use the same icons used by MM.

this change is done by @ayusht2810
also same has been fixed in later PR

manojmalik20 · 2022-09-01T17:44:12Z

webapp/src/selectors/index.tsx

+};
+
+export const getApiQueriesState = (state: any): ApiQueriesState => {
+    return state[pluginPrefix].azureDevopsPluginApi?.queries;


Suggested change

return state[pluginPrefix].azureDevopsPluginApi?.queries;

return state[pluginPrefix].azureDevopsPluginApi.queries;

Is there really a need for optional chaining here?

yes this is async so it may be undefined initially

webapp/src/selectors/index.tsx

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

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

webapp/src/containers/SubscribeModal/index.tsx

…re-devops into MI-2061

avas27JTG and others added 28 commits August 11, 2022 11:27

[MI-1986]: Create plugin API to fetch linked projects list

9f65a10

[MI-1987]: Integrated project list UI

e1793e4

[MI-1987]: Review fixes

0110bdc

Merge branch 'master' of github.com:Brightscout/mattermost-plugin-azu…

ff267f5

…re-devops into MI-1987_1

[MI-2001]: [MI-2001]: Create plugin API to unlink project and integra…

8dc6f80

…te the UI

[MI-2001]: Review fixes

9637e82

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

15cee42

…n with other changes

[MI-2002]: Updated API paths

84397d0

[MI-2049]: Added websocket support to detect user connection details …

5fb9155

…and a centralised check for root modals

[MI-2010]: API to create subscriptions

268bc79

[MI-2010] Fix lint errors

bb12691

[MI-2035]: Integrated unlinking project from details page

283e1c2

[MI-1939]: Added refresh token logic

f7ff1b6

[MI-2009] API to get list of subscriptions

8bc372b

[MI-2011] Add API to listen notifications

37bc024

[MI-2023] API to delete subscriptions

4af24be

[MI-2023] Remove print statement

f516a00

[MI-1939]: Fixed statusCode

63a3628

[MI-2029] Add feature to create subscription from modal

a61dd77

[MI-2030] Add filter to fetch subscriptions related to project

df6ce21

[MI-2056]: Fixed create task flow and added user connection check on …

4ecb8e7

…reload

[MI-2029_1] Update subscription modal

ca65519

Pull from 'MI-2029_1'

50b04db

[MI-2057] Integrate subscription list page

ee631b6

Release-2

111fe53

Remove nolint comment

c9b6257

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

7d35921

[MI-2061]: Refactor code base and Explore and implement RTK error han…

c8e94b6

…dling.

avas27JTG requested review from ayusht2810 and sooraj-shukla August 22, 2022 09:12

[MI-2061]: Added logic to handle error/success for multiple API calls…

86d00f8

… at a time

avas27JTG changed the title ~~[MI-2061]: Refactor code base and Explore and implement RTK error han…~~ [MI-2061]: Refactoring and optimisations around Forms, RTK query, and types and constants management Aug 22, 2022

ayusht2810 approved these changes Aug 24, 2022

View reviewed changes

webapp/src/components/dropdown/index.tsx Outdated Show resolved Hide resolved

webapp/src/components/form/index.tsx Show resolved Hide resolved

manojmalik20 reviewed Sep 1, 2022

View reviewed changes

[MI-2061]: Review fix

99ce634

manojmalik20 approved these changes Sep 5, 2022

View reviewed changes

webapp/src/containers/SubscribeModal/index.tsx Outdated Show resolved Hide resolved

Merge branch 'master' of github.com:Brightscout/mattermost-plugin-azu…

519dca2

…re-devops into MI-2061

avas27JTG changed the base branch from MI-2060 to master September 5, 2022 09:59

[MI-2061]: lint fixes

387b039

avas27JTG merged commit e63723d into master Sep 5, 2022

avas27JTG deleted the MI-2061 branch September 5, 2022 10:01

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[MI-2061]: Refactoring and optimisations around Forms, RTK query, and types and constants management #45

[MI-2061]: Refactoring and optimisations around Forms, RTK query, and types and constants management #45

avas27JTG commented Aug 22, 2022

manojmalik20 Sep 1, 2022

avas27JTG Sep 5, 2022

manojmalik20 Sep 1, 2022

avas27JTG Sep 5, 2022 •

edited

Loading

manojmalik20 Sep 1, 2022

avas27JTG Sep 5, 2022 •

edited

Loading

manojmalik20 Sep 1, 2022

avas27JTG Sep 5, 2022

manojmalik20 Sep 1, 2022

avas27JTG Sep 5, 2022

	const {entities} = useSelector((reduxState: GlobalState) => reduxState);
	const {currentTeamId} = useSelector((reduxState: GlobalState) => reduxState.entities.teams);

	return state[pluginPrefix].azureDevopsPluginApi?.queries;
	return state[pluginPrefix].azureDevopsPluginApi.queries;

[MI-2061]: Refactoring and optimisations around Forms, RTK query, and types and constants management #45

[MI-2061]: Refactoring and optimisations around Forms, RTK query, and types and constants management #45

Conversation

avas27JTG commented Aug 22, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

avas27JTG Sep 5, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

avas27JTG Sep 5, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

avas27JTG Sep 5, 2022 •

edited

Loading

avas27JTG Sep 5, 2022 •

edited

Loading