From 870276ab3ebe817e593a7f564d0f35fcb2fdf029 Mon Sep 17 00:00:00 2001 From: EvansA Date: Tue, 7 Feb 2023 14:16:16 +0300 Subject: [PATCH 1/2] Fix: Screen blanking on render (#2403) --- public/index.html | 19 +++++++++++++++++-- src/app/views/App.tsx | 2 ++ src/index.tsx | 32 +++++++++++++++++++------------- 3 files changed, 38 insertions(+), 15 deletions(-) diff --git a/public/index.html b/public/index.html index b328d01fc2..1959ee8a77 100644 --- a/public/index.html +++ b/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 @@

Loading Graph Explorer

-
+ - + \ No newline at end of file diff --git a/src/app/views/App.tsx b/src/app/views/App.tsx index a42484fd76..0c939ed287 100644 --- a/src/app/views/App.tsx +++ b/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 { } public componentDidMount = async () => { + removeSpinners(); this.displayToggleButton(this.mediaQueryList); this.mediaQueryList.addListener(this.displayToggleButton); diff --git a/src/index.tsx b/src/index.tsx index 7ddf94e2a5..33c278ca3e 100644 --- a/src/index.tsx +++ b/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 = () => { ); }; -const root = ReactDOM.createRoot(document.getElementById('root')!); +const root = ReactDOM.createRoot(appRoot); root.render(); From bd5da68603e233697e28276b938b76b6327a8690 Mon Sep 17 00:00:00 2001 From: EvansA Date: Tue, 7 Feb 2023 15:04:38 +0300 Subject: [PATCH 2/2] Fix: Default overlay on collections review panel (#2377) --- .../adaptive-cards/AdaptiveCard.tsx | 2 +- .../request/permissions/PanelList.tsx | 13 ++++++++++-- .../resource-explorer/panels/PathsReview.tsx | 19 ++++++++++++++++-- ...d-add-a-resource-to-collection-5-win32.png | Bin 22541 -> 30918 bytes ...uld-open-the-permissions-panel-1-win32.png | Bin 52447 -> 53334 bytes src/themes/dark.ts | 3 +-- src/themes/high-contrast.ts | 4 ++-- src/themes/light.ts | 3 +-- 8 files changed, 33 insertions(+), 11 deletions(-) diff --git a/src/app/views/query-response/adaptive-cards/AdaptiveCard.tsx b/src/app/views/query-response/adaptive-cards/AdaptiveCard.tsx index 3f3591a371..5fd8c1e139 100644 --- a/src/app/views/query-response/adaptive-cards/AdaptiveCard.tsx +++ b/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++) { diff --git a/src/app/views/query-runner/request/permissions/PanelList.tsx b/src/app/views/query-runner/request/permissions/PanelList.tsx index de1b61d116..7a18f526fd 100644 --- a/src/app/views/query-runner/request/permissions/PanelList.tsx +++ b/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([]); const [groups, setGroups] = useState([]); @@ -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 = () => { diff --git a/src/app/views/sidebar/resource-explorer/panels/PathsReview.tsx b/src/app/views/sidebar/resource-explorer/panels/PathsReview.tsx index 23226c5715..a54827dfc0 100644 --- a/src/app/views/sidebar/resource-explorer/panels/PathsReview.tsx +++ b/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([]); + 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 ( <> { type={PanelType.large} onRenderFooterContent={renderFooterContent} closeButtonAriaLabel='Close' + overlayProps={panelOverlayProps} >