Feature: upgrade fabric version (#629)

Feature: upgrade fabric version

package.json

@@ -8,8 +8,8 @@
     "@microsoft/applicationinsights-web": "2.3.1",
     "@microsoft/microsoft-graph-client": "2.0.0",
     "@svgr/webpack": "4.1.0",
-    "@uifabric/react-cards": "0.108.2",
-    "@uifabric/styling": "6.46.0",
+    "@uifabric/react-cards": "0.109.101",
+    "@uifabric/styling": "7.13.1",
     "adaptivecards": "1.2.3",
     "adaptivecards-templating": "0.1.0-alpha.1",
     "babel-core": "7.0.0-bridge.0",
@@ -50,8 +50,8 @@
     "monaco-editor": "0.15.6",
     "monaco-editor-webpack-plugin": "1.7.0",
     "msal": "1.2.1",
-    "node-sass": "4.12.0",
-    "office-ui-fabric-react": "6.140.0",
+    "node-sass": "^4.14.1",
+    "office-ui-fabric-react": "7.121.2",
     "optimize-css-assets-webpack-plugin": "5.0.1",
     "pnp-webpack-plugin": "1.2.1",
     "postcss-flexbugs-fixes": "4.1.0",
@@ -74,7 +74,7 @@
     "typescript": "3.3.3",
     "url-loader": "1.1.2",
     "webpack": "4.28.3",
-    "webpack-dev-server": "3.1.14",
+    "webpack-dev-server": "^3.11.0",
     "webpack-manifest-plugin": "2.0.4",
     "workbox-webpack-plugin": "3.6.3"
   },
@@ -115,4 +115,4 @@
     "tslint-config-prettier": "1.18.0",
     "tslint-react": "4.0.0"
   }
-}
+}

src/app/views/App.styles.ts

@@ -18,6 +18,7 @@ export const appStyles = (theme: ITheme) => {
       background: theme.palette.neutralLighter,
       maxWidth: '65px',
       minWidth: '55px',
+      padding: 10
     },
     layoutExtra: {
       minWidth: '95%',

src/app/views/App.tsx

@@ -318,7 +318,7 @@ class App extends Component<IAppProps, IAppState> {
         : 'col-xs-12 col-sm-12 col-lg-9 col-md-8';
 
     if (minimised) {
-      sidebarWidth = `col-lg-1 col-md-1 ${classes.sidebarMini}`;
+      sidebarWidth = `${classes.sidebarMini}`;
       layout = `col-xs-12 col-sm-12 col-lg-11 col-md-11 ${classes.layoutExtra}`;
     }
 

src/app/views/query-response/QueryResponse.tsx

@@ -126,7 +126,6 @@ class QueryResponse extends Component<IQueryResponseProps, IQueryResponseState>
           <Modal
             isOpen={showModal}
             onDismiss={this.toggleModal}
-            dragOptions={false}
             styles={{ main: { width: '80%', height: '90%' }, }}
           >
 

src/app/views/query-runner/QueryInput.tsx

@@ -23,7 +23,7 @@ export class QueryInput extends Component<IQueryInputProps, any> {
       urlVersions: [
         { key: 'v1.0', text: 'v1.0' },
         { key: 'beta', text: 'beta' }
-      ],
+      ]
     };
   }
 
@@ -95,7 +95,7 @@ export class QueryInput extends Component<IQueryInputProps, any> {
             role='textbox'
             placeholder={messages['Query Sample']}
             onChange={(event, value) => handleOnUrlChange(value)}
-            defaultValue={sampleUrl}
+            value={sampleUrl}
             onBlur={() => handleOnBlur()}
             onKeyDown={this.handleKeyDown}
           />

src/app/views/query-runner/QueryRunner.tsx

@@ -45,7 +45,13 @@ export class QueryRunner extends Component<
   };
 
   private handleOnUrlChange = (newUrl = '') => {
-    this.setState({ url: newUrl });
+    const { actions, sampleQuery } = this.props;
+
+    const newQuery = { ...sampleQuery, ...{ sampleUrl: newUrl } };
+
+    if (actions) {
+      actions.setSampleQuery(newQuery);
+    }
 
     this.changeUrlVersion(newUrl);
   };

src/app/views/query-runner/request/permissions/PanelList.tsx

@@ -0,0 +1,61 @@
+import { DetailsList, DetailsListLayoutMode, IColumn, Label, SearchBox, SelectionMode } from 'office-ui-fabric-react';
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import { SortOrder } from '../../../../../types/enums';
+import { IPermission } from '../../../../../types/permissions';
+import { dynamicSort } from '../../../../utils/dynamic-sort';
+import { generatePermissionGroups } from './util';
+
+interface IPanelList {
+  messages: any;
+  permissions: IPermission[];
+  columns: any[];
+  classes: any;
+  selection: any;
+  renderItemColumn: any;
+  searchValueChanged: Function;
+}
+
+const PanelList = ({ messages, permissions,
+  columns, classes, selection,
+  renderItemColumn, searchValueChanged }: IPanelList) => {
+
+  const groups = generatePermissionGroups(permissions);
+  permissions = permissions.sort(dynamicSort('value', SortOrder.ASC));
+
+  return (
+    <>
+      <Label className={classes.permissionText}>
+        <FormattedMessage id='Select different permissions' />
+      </Label>
+      <hr />
+      <SearchBox
+        className={classes.searchBox}
+        placeholder={messages['Search permissions']}
+        onChange={(event?: React.ChangeEvent<HTMLInputElement>, newValue?: string) =>
+          searchValueChanged(event, newValue)}
+        styles={{ field: { paddingLeft: 10 } }}
+      />
+      <hr />
+      <DetailsList
+        onShouldVirtualize={() => false}
+        items={permissions}
+        columns={columns}
+        groups={groups}
+        onRenderItemColumn={(item?: any, index?: number, column?: IColumn) => renderItemColumn(item, index, column)}
+        selectionMode={SelectionMode.multiple}
+        layoutMode={DetailsListLayoutMode.justified}
+        selection={selection}
+        compact={true}
+        groupProps={{
+          showEmptyGroups: false,
+        }}
+        ariaLabelForSelectionColumn={messages['Toggle selection'] || 'Toggle selection'}
+        ariaLabelForSelectAllCheckbox={messages['Toggle selection for all items'] || 'Toggle selection for all items'}
+        checkButtonAriaLabel={messages['Row checkbox'] || 'Row checkbox'}
+      />
+    </>
+  );
+};
+export default PanelList;

src/app/views/query-runner/request/permissions/Permission.styles.ts

@@ -12,6 +12,11 @@ export const permissionStyles = (theme: ITheme) => {
       flexDirection: 'column',
       justifyContent: 'space-between'
     },
+    panelContainer: {
+      padding: 10,
+      overflowY: 'auto',
+      overflowX: 'auto',
+    },
     consented: {
       fontSize: FontSizes.small,
       fontStyle: 'italic'

src/app/views/query-runner/request/permissions/Permission.tsx

@@ -1,30 +1,26 @@
 import {
-  CheckboxVisibility,
-  DetailsList,
-  DetailsListLayoutMode,
   FontSizes,
   getId,
   IColumn,
   Icon,
   Label,
   PrimaryButton,
-  SearchBox,
   Selection,
-  SelectionMode,
   styled,
   TooltipHost
 } from 'office-ui-fabric-react';
 import React, { Component } from 'react';
 import { FormattedMessage, injectIntl } from 'react-intl';
 import { connect } from 'react-redux';
 import { bindActionCreators, Dispatch } from 'redux';
-import { SortOrder } from '../../../../../types/enums';
+
 import { IPermission, IPermissionProps, IPermissionState } from '../../../../../types/permissions';
 import * as permissionActionCreators from '../../../../services/actions/permissions-action-creator';
-import { dynamicSort } from '../../../../utils/dynamic-sort';
 import { classNames } from '../../../classnames';
+import PanelList from './PanelList';
 import { permissionStyles } from './Permission.styles';
-import { generatePermissionGroups } from './util';
+import TabList from './TabList';
+import { generatePermissionGroups, setConsentedStatus } from './util';
 
 export class Permission extends Component<IPermissionProps, IPermissionState> {
 
@@ -72,19 +68,20 @@ export class Permission extends Component<IPermissionProps, IPermissionState> {
     return shouldUpdate;
   }
 
-  public searchValueChanged = (value: string): void => {
+  public searchValueChanged = (event: any, value?: string): void => {
     const { scopes } = this.props;
-    const keyword = value.toLowerCase();
+    let filteredPermissions = scopes.data;
+    if (value) {
+      const keyword = value.toLowerCase();
 
-    const filteredPermissions = scopes.data.filter((permission: IPermission) => {
-      const name = permission.value.toLowerCase();
-      return name.includes(keyword);
-    });
+      filteredPermissions = scopes.data.filter((permission: IPermission) => {
+        const name = permission.value.toLowerCase();
+        return name.includes(keyword);
+      });
+    }
 
-    const groups = generatePermissionGroups(filteredPermissions);
     this.setState({
-      permissions: filteredPermissions,
-      groups
+      permissions: filteredPermissions
     });
   }
 
@@ -93,7 +90,6 @@ export class Permission extends Component<IPermissionProps, IPermissionState> {
     this.props.actions!.consentToScopes(consentScopes);
   };
 
-
   private renderItemColumn = (item: any, index: number | undefined, column: IColumn | undefined) => {
     const hostId: string = getId('tooltipHost');
     const consented = !!item.consented;
@@ -231,108 +227,64 @@ export class Permission extends Component<IPermissionProps, IPermissionState> {
     return columns;
   }
 
-  private renderList = () => {
-    const {
-      panel,
-      tokenPresent,
-      consentedScopes,
-      intl: { messages },
-    }: any = this.props;
-    let { permissions } = this.state;
-    const classes = classNames(this.props);
-    const columns = this.getColumns();
-
-    if (tokenPresent) {
-      permissions.forEach((permission: IPermission) => {
-        if (consentedScopes.indexOf(permission.value) !== -1) {
-          permission.consented = true;
-        }
-      });
-    }
-
-    if (panel) {
-
-      if (permissions.length > 0) {
-        permissions = (panel) ? permissions.sort(dynamicSort('value', SortOrder.ASC)) : permissions;
-      }
 
-      const groups = generatePermissionGroups(permissions);
-      const selection = new Selection({
-        onSelectionChanged: () => {
-          const selected = selection.getSelection() as any;
-          const permissionsToConsent: string[] = [];
-          if (selected.length > 0) {
-            selected.forEach((option: IPermission) => {
-              permissionsToConsent.push(option.value);
-            });
-          }
-          this.props.setPermissions(permissionsToConsent);
-        }
-      });
 
-      return (
-        <>
-          <Label className={classes.permissionText}>
-            <FormattedMessage id='Select different permissions' />
-          </Label>
-          <hr />
-          <SearchBox className={classes.searchBox} placeholder={messages['Search permissions']}
-            onChange={(value) => this.searchValueChanged(value)}
-            styles={{ field: { paddingLeft: 10 } }}
-          />
-          <hr />
-          <DetailsList
-            items={permissions}
-            columns={columns}
-            groups={groups}
-            onRenderItemColumn={this.renderItemColumn}
-            selectionMode={SelectionMode.multiple}
-            layoutMode={DetailsListLayoutMode.justified}
-            selection={selection}
-            compact={true}
-            groupProps={{
-              showEmptyGroups: false,
-            }}
-            ariaLabelForSelectionColumn='Toggle selection'
-            ariaLabelForSelectAllCheckbox='Toggle selection for all items'
-            checkButtonAriaLabel='Row checkbox'
-          />
-        </>
-      );
-    }
-    return (
-      <>
-        <Label className={classes.permissionLength}>
-          <FormattedMessage id='Permissions' />&nbsp;({permissions.length})
-        </Label>
-        <Label className={classes.permissionText}>
-          <FormattedMessage id='permissions required to run the query' />
-        </Label>
-        <DetailsList styles={{ root: { minHeight: '300px' } }}
-          items={permissions}
-          columns={columns}
-          onRenderItemColumn={this.renderItemColumn}
-          selectionMode={SelectionMode.none}
-          layoutMode={DetailsListLayoutMode.justified}
-        />
-      </>
-    );
-  }
 
   public render() {
     const classes = classNames(this.props);
-    const { panel, scopes } = this.props;
+    const { panel, scopes, tokenPresent, consentedScopes } = this.props;
     const { pending: loading } = scopes;
     const { permissions } = this.state;
 
+    const {
+      intl: { messages },
+    }: any = this.props;
+
+    setConsentedStatus(tokenPresent, permissions, consentedScopes);
+
+    const selection = new Selection({
+      onSelectionChanged: () => {
+        const selected = selection.getSelection() as any;
+        const permissionsToConsent: string[] = [];
+        if (selected.length > 0) {
+          selected.forEach((option: IPermission) => {
+            permissionsToConsent.push(option.value);
+          });
+        }
+        this.props.setPermissions(permissionsToConsent);
+      }
+    });
+
     return (
-      <div className={classes.container} style={{ minHeight: (panel) ? '800px' : '300px' }}>
+      <div className={panel ? classes.panelContainer : classes.container}
+        style={{ minHeight: (panel) ? '800px' : '300px' }}>
         {loading && <Label>
           <FormattedMessage id={'Fetching permissions'} />...
         </Label>}
-        {permissions && permissions.length > 0 && !loading &&
+        {!loading &&
           <div className={classes.permissions}>
-            {this.renderList()}
+            {!panel && <TabList
+              permissions={permissions}
+              columns={this.getColumns()}
+              classes={classes}
+              renderItemColumn={(item?: any, index?: number, column?: IColumn) =>
+                this.renderItemColumn(item, index, column)}
+            />}
+            {panel &&
+              <div data-is-scrollable={true}>
+                <PanelList
+                  classes={classes}
+                  permissions={permissions}
+                  messages={messages}
+                  selection={selection}
+                  columns={this.getColumns()}
+                  renderItemColumn={(item?: any, index?: number, column?: IColumn) =>
+                    this.renderItemColumn(item, index, column)}
+                  searchValueChanged={(event?: React.ChangeEvent<HTMLInputElement>, value?: string) =>
+                    this.searchValueChanged(event, value)}
+                />
+              </div>
+            }
           </div>
         }
         {permissions && permissions.length === 0 && !loading &&