From 60cb6cc23099a99d724a0a3d6207cfdc6ec3621f Mon Sep 17 00:00:00 2001
From: Charles Wahome <thewahome.cw@gmail.com>
Date: Thu, 17 Jun 2021 14:55:58 +0300
Subject: [PATCH] Fix: repopulate modify permissions when panel closed (#999)

* repopulate open modify permissions when permissions panel is closed

* move all fetch scopes logic to action creator
---
 .../actions/permissions-action-creator.ts      |  8 ++++----
 .../request/permissions/Permission.tsx         | 18 +++++++-----------
 src/types/permissions.ts                       |  1 +
 src/types/root.ts                              |  2 ++
 4 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/src/app/services/actions/permissions-action-creator.ts b/src/app/services/actions/permissions-action-creator.ts
index 69bacc4d1b..fc04987672 100644
--- a/src/app/services/actions/permissions-action-creator.ts
+++ b/src/app/services/actions/permissions-action-creator.ts
@@ -3,8 +3,8 @@ import { MessageBarType } from 'office-ui-fabric-react';
 import { geLocale } from '../../../appLocale';
 import { authenticationWrapper } from '../../../modules/authentication';
 import { IAction } from '../../../types/action';
-import { IQuery } from '../../../types/query-runner';
 import { IRequestOptions } from '../../../types/request';
+import { IRootState } from '../../../types/root';
 import { sanitizeQueryUrl } from '../../utils/query-url-sanitization';
 import { parseSampleUrl } from '../../utils/sample-url-generation';
 import { translateMessage } from '../../utils/translate-messages';
@@ -39,14 +39,14 @@ export function fetchScopesError(response: object): IAction {
   };
 }
 
-export function fetchScopes(query?: IQuery): Function {
+export function fetchScopes(): Function {
   return async (dispatch: Function, getState: Function) => {
     let hasUrl = false; // whether permissions are for a specific url
     try {
-      const { devxApi } = getState();
+      const { devxApi, permissionsPanelOpen, sampleQuery: query }: IRootState = getState();
       let permissionsUrl = `${devxApi.baseUrl}/permissions`;
 
-      if (query) {
+      if (!permissionsPanelOpen) {
         const signature = sanitizeQueryUrl(query.sampleUrl);
         const { requestUrl, sampleUrl } = parseSampleUrl(signature);
 
diff --git a/src/app/views/query-runner/request/permissions/Permission.tsx b/src/app/views/query-runner/request/permissions/Permission.tsx
index e92113e462..05337596f4 100644
--- a/src/app/views/query-runner/request/permissions/Permission.tsx
+++ b/src/app/views/query-runner/request/permissions/Permission.tsx
@@ -39,7 +39,7 @@ export class Permission extends Component<IPermissionProps, IPermissionState> {
   }
 
   public componentDidUpdate = (prevProps: IPermissionProps) => {
-    if (prevProps.sample !== this.props.sample) {
+    if ((prevProps.sample !== this.props.sample) || (prevProps.permissionsPanelOpen !== this.props.permissionsPanelOpen)) {
       this.getPermissions();
     }
     const permissions = this.props.scopes.data;
@@ -51,13 +51,7 @@ export class Permission extends Component<IPermissionProps, IPermissionState> {
   }
 
   private getPermissions() {
-    const { panel, sample } = this.props;
-    if (panel) {
-      this.props.actions!.fetchScopes();
-    }
-    else {
-      this.props.actions!.fetchScopes(sample);
-    }
+    this.props.actions!.fetchScopes();
   }
 
   public shouldComponentUpdate(nextProps: IPermissionProps, nextState: IPermissionState) {
@@ -65,6 +59,7 @@ export class Permission extends Component<IPermissionProps, IPermissionState> {
       || nextProps.scopes !== this.props.scopes
       || nextProps.consentedScopes !== this.props.consentedScopes
       || nextProps.dimensions !== this.props.dimensions
+      || nextProps.permissionsPanelOpen !== this.props.permissionsPanelOpen
       || nextState.permissions !== this.state.permissions;
     return shouldUpdate;
   }
@@ -242,7 +237,7 @@ export class Permission extends Component<IPermissionProps, IPermissionState> {
     if (loading) {
       return <Label>
         <FormattedMessage id={'Fetching permissions'} />...
-        </Label>;
+      </Label>;
     }
 
     const displayPermissionsPanel = () => {
@@ -278,13 +273,14 @@ export class Permission extends Component<IPermissionProps, IPermissionState> {
   }
 }
 
-function mapStateToProps({ sampleQuery, scopes, authToken, consentedScopes, dimensions }: IRootState) {
+function mapStateToProps({ sampleQuery, scopes, authToken, consentedScopes, dimensions, permissionsPanelOpen }: IRootState) {
   return {
     sample: sampleQuery,
     scopes,
     tokenPresent: authToken.token,
     consentedScopes,
-    dimensions
+    dimensions,
+    permissionsPanelOpen
   };
 }
 
diff --git a/src/types/permissions.ts b/src/types/permissions.ts
index c0045dbd3a..4761699627 100644
--- a/src/types/permissions.ts
+++ b/src/types/permissions.ts
@@ -17,6 +17,7 @@ export interface IPermissionProps {
   panel: boolean;
   sample: IQuery[];
   tokenPresent: boolean;
+  permissionsPanelOpen: boolean;
   consentedScopes: string[];
   setPermissions: Function;
   actions?: {
diff --git a/src/types/root.ts b/src/types/root.ts
index 251f02f115..894c0c0b14 100644
--- a/src/types/root.ts
+++ b/src/types/root.ts
@@ -1,6 +1,7 @@
 import { IAdaptiveCardResponse } from './adaptivecard';
 import { IAuthenticateResult } from './authentication';
 import { IAutocompleteResponse } from './auto-complete';
+import { IDevxAPI } from './devx-api';
 import { IDimensions } from './dimensions';
 import { Mode } from './enums';
 import { IHistoryItem } from './history';
@@ -33,6 +34,7 @@ export interface IRootState {
   responseAreaExpanded: boolean;
   dimensions: IDimensions;
   autoComplete: IAutocompleteResponse;
+  devxApi: IDevxAPI;
 }
 
 export interface IApiFetch {