From fe9eab142121870311bd6d60eef349b17d35ab2d Mon Sep 17 00:00:00 2001 From: Evans Aboge Date: Wed, 12 Jan 2022 11:18:39 +0300 Subject: [PATCH 1/5] added a custom button --- .../resource-explorer/CommandOptions.tsx | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/src/app/views/sidebar/resource-explorer/CommandOptions.tsx b/src/app/views/sidebar/resource-explorer/CommandOptions.tsx index a06cf83888..b7f8c21fd2 100644 --- a/src/app/views/sidebar/resource-explorer/CommandOptions.tsx +++ b/src/app/views/sidebar/resource-explorer/CommandOptions.tsx @@ -1,5 +1,7 @@ -import { CommandBar, ICommandBarItemProps } from '@fluentui/react'; +import { CommandBar, CommandBarButton, getTheme, IButtonProps, ICommandBarItemProps, ICommandBarStyles, + IComponentAs, IContextualMenuItemStyles, PrimaryButton } from '@fluentui/react'; import React, { useState } from 'react'; +import { FormattedMessage } from 'react-intl'; import { translateMessage } from '../../../utils/translate-messages'; import PathsReview from './panels/PathsReview'; @@ -11,6 +13,7 @@ interface ICommandOptions { const CommandOptions = (props: ICommandOptions) => { const [isOpen, setIsOpen] = useState(false); const { version } = props; + const theme = getTheme(); const options: ICommandBarItemProps[] = [ { key: 'preview', @@ -26,6 +29,17 @@ const CommandOptions = (props: ICommandOptions) => { setIsOpen(open); } + const itemStyles: Partial = { + root: { + border: '1px solid', + borderColor: theme.palette.themePrimary, + marginLeft: '-15px' + } + }; + const CustomButton: React.FunctionComponent = (props_: any) => { + return ; + }; + return (
{ ariaLabel='Selection actions' primaryGroupAriaLabel='Selection actions' farItemsGroupAriaLabel='More selection actions' + buttonAs={CustomButton} /> Date: Fri, 14 Jan 2022 16:55:33 +0300 Subject: [PATCH 2/5] fixes commandbar background --- .../views/sidebar/resource-explorer/CommandOptions.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/app/views/sidebar/resource-explorer/CommandOptions.tsx b/src/app/views/sidebar/resource-explorer/CommandOptions.tsx index b7f8c21fd2..d5240ce7ce 100644 --- a/src/app/views/sidebar/resource-explorer/CommandOptions.tsx +++ b/src/app/views/sidebar/resource-explorer/CommandOptions.tsx @@ -1,7 +1,6 @@ import { CommandBar, CommandBarButton, getTheme, IButtonProps, ICommandBarItemProps, ICommandBarStyles, - IComponentAs, IContextualMenuItemStyles, PrimaryButton } from '@fluentui/react'; + IContextualMenuItemStyles } from '@fluentui/react'; import React, { useState } from 'react'; -import { FormattedMessage } from 'react-intl'; import { translateMessage } from '../../../utils/translate-messages'; import PathsReview from './panels/PathsReview'; @@ -36,6 +35,12 @@ const CommandOptions = (props: ICommandOptions) => { marginLeft: '-15px' } }; + + const commandBarStyles: Partial = { + root: { + backgroundColor: theme.palette.neutralLighter + } + } const CustomButton: React.FunctionComponent = (props_: any) => { return ; }; @@ -48,6 +53,7 @@ const CommandOptions = (props: ICommandOptions) => { primaryGroupAriaLabel='Selection actions' farItemsGroupAriaLabel='More selection actions' buttonAs={CustomButton} + styles={commandBarStyles} /> Date: Mon, 17 Jan 2022 15:28:47 +0300 Subject: [PATCH 3/5] restore resources tab for review --- src/app/views/sidebar/Sidebar.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/app/views/sidebar/Sidebar.tsx b/src/app/views/sidebar/Sidebar.tsx index 48a9ffdd7f..5aeee8718b 100644 --- a/src/app/views/sidebar/Sidebar.tsx +++ b/src/app/views/sidebar/Sidebar.tsx @@ -5,7 +5,7 @@ import { telemetry } from '../../../telemetry'; import { translateMessage } from '../../utils/translate-messages'; import History from './history/History'; import SampleQueries from './sample-queries/SampleQueries'; - +import { ResourceExplorer } from './resource-explorer'; export const Sidebar = () => { return (
@@ -13,6 +13,9 @@ export const Sidebar = () => { + + + From 042f82044cd8ac6f1de02d88fe43c199fe48925e Mon Sep 17 00:00:00 2001 From: Evans Aboge Date: Tue, 18 Jan 2022 12:41:08 +0300 Subject: [PATCH 4/5] refactor styles to a .styles file --- .../actions/query-action-creator-util.ts | 4 ++-- .../resource-explorer/CommandOptions.tsx | 24 +++++-------------- .../resource-explorer/resources.styles.ts | 18 ++++++++++++++ 3 files changed, 26 insertions(+), 20 deletions(-) create mode 100644 src/app/views/sidebar/resource-explorer/resources.styles.ts diff --git a/src/app/services/actions/query-action-creator-util.ts b/src/app/services/actions/query-action-creator-util.ts index 42522de370..eae931a843 100644 --- a/src/app/services/actions/query-action-creator-util.ts +++ b/src/app/services/actions/query-action-creator-util.ts @@ -3,8 +3,8 @@ import { GraphRequest, ResponseType } from '@microsoft/microsoft-graph-client'; -import { - MSALAuthenticationProviderOptions +import { + MSALAuthenticationProviderOptions } from '@microsoft/microsoft-graph-client/lib/src/MSALAuthenticationProviderOptions'; import { IAction } from '../../../types/action'; diff --git a/src/app/views/sidebar/resource-explorer/CommandOptions.tsx b/src/app/views/sidebar/resource-explorer/CommandOptions.tsx index d5240ce7ce..f9b51bca97 100644 --- a/src/app/views/sidebar/resource-explorer/CommandOptions.tsx +++ b/src/app/views/sidebar/resource-explorer/CommandOptions.tsx @@ -1,10 +1,8 @@ -import { CommandBar, CommandBarButton, getTheme, IButtonProps, ICommandBarItemProps, ICommandBarStyles, - IContextualMenuItemStyles } from '@fluentui/react'; +import { CommandBar, CommandBarButton, getTheme, IButtonProps, ICommandBarItemProps } from '@fluentui/react'; import React, { useState } from 'react'; - import { translateMessage } from '../../../utils/translate-messages'; import PathsReview from './panels/PathsReview'; - +import { resourceExplorerStyles } from './resources.styles' interface ICommandOptions { version: string; } @@ -13,6 +11,9 @@ const CommandOptions = (props: ICommandOptions) => { const [isOpen, setIsOpen] = useState(false); const { version } = props; const theme = getTheme(); + + const itemStyles = resourceExplorerStyles(theme).itemStyles; + const commandStyles = resourceExplorerStyles(theme).commandBarStyles; const options: ICommandBarItemProps[] = [ { key: 'preview', @@ -28,19 +29,6 @@ const CommandOptions = (props: ICommandOptions) => { setIsOpen(open); } - const itemStyles: Partial = { - root: { - border: '1px solid', - borderColor: theme.palette.themePrimary, - marginLeft: '-15px' - } - }; - - const commandBarStyles: Partial = { - root: { - backgroundColor: theme.palette.neutralLighter - } - } const CustomButton: React.FunctionComponent = (props_: any) => { return ; }; @@ -53,7 +41,7 @@ const CommandOptions = (props: ICommandOptions) => { primaryGroupAriaLabel='Selection actions' farItemsGroupAriaLabel='More selection actions' buttonAs={CustomButton} - styles={commandBarStyles} + styles={commandStyles} /> { + return { + itemStyles: { + root: { + border: '1px solid', + borderColor: theme.palette.themePrimary, + marginLeft: '-15px' + } + }, + commandBarStyles: { + root: { + backgroundColor: theme.palette.neutralLighter + } + } + } +} \ No newline at end of file From 0e5796099ce349ccdf97c929acdfe48d636a7dcd Mon Sep 17 00:00:00 2001 From: Evans Aboge Date: Tue, 18 Jan 2022 12:48:44 +0300 Subject: [PATCH 5/5] remove resources tab --- src/app/views/sidebar/Sidebar.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/app/views/sidebar/Sidebar.tsx b/src/app/views/sidebar/Sidebar.tsx index 5aeee8718b..d7c355134a 100644 --- a/src/app/views/sidebar/Sidebar.tsx +++ b/src/app/views/sidebar/Sidebar.tsx @@ -5,7 +5,6 @@ import { telemetry } from '../../../telemetry'; import { translateMessage } from '../../utils/translate-messages'; import History from './history/History'; import SampleQueries from './sample-queries/SampleQueries'; -import { ResourceExplorer } from './resource-explorer'; export const Sidebar = () => { return (
@@ -13,9 +12,6 @@ export const Sidebar = () => { - - -