Merge branch 'dev' into dependabot-upgrades

public/index.html

@@ -12,6 +12,7 @@
       justify-content: center;
       align-items: center;
       flex-direction: column;
+      position: relative;
     }
 
     #spinner-text {
@@ -41,6 +42,10 @@
       border-color: #258ede transparent transparent transparent;
     }
 
+    #spinner p {
+      margin: 0;
+    }
+
     #lds-ring div:nth-child(1) {
       animation-delay: -0.45s;
     }
@@ -53,6 +58,16 @@
       animation-delay: -0.15s;
     }
 
+    .hidden {
+      display: none;
+    }
+
+    body {
+      margin: 0;
+      padding: 0;
+      border: 0;
+    }
+
     @keyframes lds-ring {
       0% {
         transform: rotate(0deg);
@@ -77,7 +92,7 @@
     <p id="spinner-text">Loading Graph Explorer</p>
   </div>
   <noscript>You need to enable JavaScript to run this app.</noscript>
-  <div id="root"></div>
+  <div id="root" class="hidden"></div>
 </body>
 
-</html>
+</html>

src/app/views/App.tsx

@@ -34,6 +34,7 @@ import { QueryRunner } from './query-runner';
 import { parse } from './query-runner/util/iframe-message-parser';
 import { Sidebar } from './sidebar/Sidebar';
 import { MainHeader } from './main-header/MainHeader';
+import { removeSpinners } from '../..';
 
 export interface IAppProps {
   theme?: ITheme;
@@ -85,6 +86,7 @@ class App extends Component<IAppProps, IAppState> {
   }
 
   public componentDidMount = async () => {
+    removeSpinners();
     this.displayToggleButton(this.mediaQueryList);
     this.mediaQueryList.addListener(this.displayToggleButton);
 

src/app/views/query-response/adaptive-cards/AdaptiveCard.tsx

@@ -106,7 +106,7 @@ const AdaptiveCard = (props: any) => {
           if(!child){ return; }
           if(child && child.tagName === 'BUTTON'){ return; }
 
-          child.style.color = currentTheme.palette.whiteTranslucent40;
+          child.style.color = currentTheme.palette.black;
           if (child.children.length > 0) {
             // eslint-disable-next-line @typescript-eslint/prefer-for-of
             for (let i = 0; i < child.children.length; i++) {

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

@@ -35,7 +35,7 @@ const PanelList = ({ messages,
   }
 
   const { consentedScopes, scopes, authToken,
-    permissionsPanelOpen } = useAppSelector((state) => state);
+    permissionsPanelOpen, theme: appTheme } = useAppSelector((state) => state);
   const { fullPermissions } = scopes.data;
   const [permissions, setPermissions] = useState<any []>([]);
   const [groups, setGroups] = useState<IGroup[]>([]);
@@ -117,8 +117,17 @@ const PanelList = ({ messages,
     });
   };
 
+  const isCurrentThemeDark = (): boolean => {
+    return (appTheme === 'dark' || appTheme === 'high-contrast');
+  }
+
   const panelOverlayProps: IOverlayProps = {
-    isDarkThemed: true
+    styles: {
+      root: {
+        backgroundColor: isCurrentThemeDark() ? theme.palette.blackTranslucent40 :
+          theme.palette.whiteTranslucent40
+      }
+    }
   }
 
   const displayLoadingPermissionsText = () => {

src/app/views/sidebar/resource-explorer/panels/PathsReview.tsx

@@ -1,5 +1,5 @@
 import {
-  CommandBar, ICommandBarItemProps, Label, Panel, PanelType, PrimaryButton
+  CommandBar, getTheme, ICommandBarItemProps, IOverlayProps, Label, Panel, PanelType, PrimaryButton
 } from '@fluentui/react';
 import { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
@@ -21,12 +21,13 @@ export interface IPathsReview {
 
 const PathsReview = (props: IPathsReview) => {
   const dispatch: AppDispatch = useDispatch();
-  const { resources: { paths: items } } = useAppSelector(
+  const { resources: { paths: items }, theme } = useAppSelector(
     (state) => state
   );
   const { isOpen } = props;
   const headerText = translateMessage('Selected Resources') + ' ' + translateMessage('Preview');
   const [selectedItems, setSelectedItems] = useState<IResourceLink[]>([]);
+  const currentTheme = getTheme();
 
   const columns = [
     { key: 'url', name: 'URL', fieldName: 'url', minWidth: 300, maxWidth: 350, isResizable: true }
@@ -67,6 +68,19 @@ const PathsReview = (props: IPathsReview) => {
     setSelectedItems(content);
   };
 
+  const isCurrentThemeDark = (): boolean => {
+    return (theme === 'dark' || theme === 'high-contrast');
+  }
+
+  const panelOverlayProps: IOverlayProps = {
+    styles: {
+      root: {
+        backgroundColor: isCurrentThemeDark() ? currentTheme.palette.blackTranslucent40 :
+          currentTheme.palette.whiteTranslucent40
+      }
+    }
+  }
+
   return (
     <>
       <Panel
@@ -76,6 +90,7 @@ const PathsReview = (props: IPathsReview) => {
         type={PanelType.large}
         onRenderFooterContent={renderFooterContent}
         closeButtonAriaLabel='Close'
+        overlayProps={panelOverlayProps}
       >
         <Label>
           <FormattedMessage id='Export list as a Postman collection message' />

src/index.tsx

@@ -28,21 +28,27 @@ import { IDevxAPI } from './types/devx-api';
 import { Mode } from './types/enums';
 import { fetchResources } from './app/services/actions/resource-explorer-action-creators';
 
-// removes the loading spinner from GE html after the app is loaded
-const spinner = document.getElementById('spinner');
-if (spinner !== null) {
-  (spinner as any).parentElement.removeChild(spinner);
-}
-
-// removes the loading spinner from the portal team html after GE loads
-const apiExplorer = document.getElementsByTagName('api-explorer')[0];
-if (apiExplorer) {
-  (apiExplorer as any).parentElement.removeChild(apiExplorer);
-}
-
+const appRoot: HTMLElement = document.getElementById('root')!;
 initializeIcons();
 
 let currentTheme = readTheme() || 'light';
+export function removeSpinners() {
+  // removes the loading spinner from GE html after the app is loaded
+  const spinner = document.getElementById('spinner');
+  if (spinner !== null) {
+    (spinner as any).parentElement.removeChild(spinner);
+  }
+
+  // removes the loading spinner from the portal team html after GE loads
+  const apiExplorer = document.getElementsByTagName('api-explorer')[0];
+  if (apiExplorer) {
+    (apiExplorer as any).parentElement.removeChild(apiExplorer);
+  }
+
+  // makes appRoot visible
+  appRoot.classList.remove('hidden');
+}
+
 function setCurrentSystemTheme(): void {
   const themeFromLocalStorage = readTheme();
 
@@ -186,5 +192,5 @@ const Root = () => {
     </Provider>
   );
 };
-const root = ReactDOM.createRoot(document.getElementById('root')!);
+const root = ReactDOM.createRoot(appRoot);
 root.render(<Root />);

src/themes/dark.ts

@@ -25,8 +25,7 @@ export const dark = {
     black: '#ffffff',
     white: '#070707',
     blueMid: '#6cb8f6',
-    green: '#00a100',
-    whiteTranslucent40: '#ffffff'
+    green: '#00a100'
   },
   semanticColors: {
     messageText: '#f3f2f1',

src/themes/high-contrast.ts

@@ -23,8 +23,8 @@ export const highContrast = {
     black: '#f8f8f8',
     white: '#000000',
     blueMid: '#6cb8f6',
-    green: '#92c353',
-    whiteTranslucent40: '#ffffff'
+    green: '#92c353'
+
   },
   semanticColors: {
     messageText: '#f4f4f4',

src/themes/light.ts

@@ -25,7 +25,6 @@ export const light = {
     black: '#1d1d1d',
     white: '#ffffff',
     blueMid: '#00188F',
-    green: '#008000',
-    whiteTranslucent40: '#ffffff'
+    green: '#008000'
   }
 };