From 014816a0e992bceeeb1b5b850ea30fc804e161f5 Mon Sep 17 00:00:00 2001 From: Charles Wahome Date: Mon, 3 Apr 2023 17:43:12 +0300 Subject: [PATCH 01/37] add popups context --- .../context/popups-context/PopupsContext.tsx | 77 +++++++++++++++++++ .../services/context/popups-context/index.ts | 30 ++++++++ 2 files changed, 107 insertions(+) create mode 100644 src/app/services/context/popups-context/PopupsContext.tsx create mode 100644 src/app/services/context/popups-context/index.ts diff --git a/src/app/services/context/popups-context/PopupsContext.tsx b/src/app/services/context/popups-context/PopupsContext.tsx new file mode 100644 index 0000000000..8c57e5be96 --- /dev/null +++ b/src/app/services/context/popups-context/PopupsContext.tsx @@ -0,0 +1,77 @@ +import { createContext, useContext, useReducer } from 'react'; + +import { PopupsComponent, PopupsProps, PopupsStatus, PopupsType } from '.'; + +export interface IPopup { + component: React.ElementType>, + popupsProps: PopupsProps, + type: PopupsType, + id: string; + result?: any; + open?: boolean; + status?: PopupsStatus; + reference?: string; +} + +interface PopupAction { + type: string; + payload: IPopup; +} + +interface PopupState { + popups: IPopup[]; +} + +const initialState: PopupState = { + popups: [] +}; + +export const POPUPS = { + ADD_POPUPS: 'ADD_POPUPS', + DELETE_POPUPS: 'DELETE_POPUPS' +} + +const PopupStateContext = createContext(initialState); +const PopupDispatchContext = createContext({}); + +function reducedPopups(state: PopupState = initialState, action: PopupAction) { + const payload = { ...action.payload }; + switch (action.type) { + case POPUPS.ADD_POPUPS: { + let popups = [...state.popups]; + popups = popups.filter(k => k.open); + payload.open = true; + payload.status = 'open'; + return { + ...state, + popups: [...popups, payload] + } + } + + case POPUPS.DELETE_POPUPS: { + const popups = [...state.popups] + const index = state.popups.findIndex((e) => e.id === payload.id); + payload.open = false; + popups[index] = payload; + return { + ...state, + popups + } + } + } +} + +export function PopupsProvider({ children }: any) { + const [state, dispatch] = useReducer(reducedPopups, initialState); + + return ( + + + {children} + + + ); +} + +export const usePopupsStateContext = () => useContext(PopupStateContext); +export const usePopupsDispatchContext = () => useContext(PopupDispatchContext); diff --git a/src/app/services/context/popups-context/index.ts b/src/app/services/context/popups-context/index.ts new file mode 100644 index 0000000000..2aaf270079 --- /dev/null +++ b/src/app/services/context/popups-context/index.ts @@ -0,0 +1,30 @@ +import { PopupsProvider } from './PopupsContext'; + +export interface PopupsComponent { + dismissPopup: () => void; + closePopup: (results?: object | string) => void; + data: Data; + settings: PopupSettings; +} + +interface PopupSettings { + title: React.ReactNode; + subtitle?: string; + width?: number | string; +} + +export interface PopupsProps { + settings: PopupSettings; + data?: Data; +} + +export type PopupsStatus = 'open' | 'closed' | 'dismissed' | null; +export type PopupsType = 'modal' | 'panel'; + +export interface ShowPopupsParameters { + component: React.ElementType>; + type: PopupsType; + dialogProps: PopupsProps; +} + +export { PopupsProvider }; \ No newline at end of file From b7666dbd85a66f7107fc9f6eb3cdb396cf175f67 Mon Sep 17 00:00:00 2001 From: Charles Wahome Date: Mon, 3 Apr 2023 17:43:25 +0300 Subject: [PATCH 02/37] utilise context in hook --- src/app/services/hooks/index.ts | 5 ++++ src/app/services/hooks/usePopups.ts | 45 +++++++++++++++++++++++++++++ 2 files changed, 50 insertions(+) create mode 100644 src/app/services/hooks/index.ts create mode 100644 src/app/services/hooks/usePopups.ts diff --git a/src/app/services/hooks/index.ts b/src/app/services/hooks/index.ts new file mode 100644 index 0000000000..6f479b3cd2 --- /dev/null +++ b/src/app/services/hooks/index.ts @@ -0,0 +1,5 @@ +import { usePopups } from './usePopups'; + +export { + usePopups +} \ No newline at end of file diff --git a/src/app/services/hooks/usePopups.ts b/src/app/services/hooks/usePopups.ts new file mode 100644 index 0000000000..35a2a113cc --- /dev/null +++ b/src/app/services/hooks/usePopups.ts @@ -0,0 +1,45 @@ +import { PopupItem, popups } from '../../views/common/registry/popups'; +import { PopupsProps, PopupsStatus, PopupsType } from '../context/popups-context'; +import { POPUPS, usePopupsDispatchContext, usePopupsStateContext } from '../context/popups-context/PopupsContext'; + +type OpenPopupsFn = (properties: PopupsProps) => void; + +interface UsePopupsResponse { + open: OpenPopupsFn; + status?: PopupsStatus; + result: any; + reference: string | null; +} + +const usePopups = (item: PopupItem, type: PopupsType, + reference: string | null = null): UsePopupsResponse => { + const dispatch = usePopupsDispatchContext(); + const { popups: popupsState } = usePopupsStateContext(); + const current = popupsState.find(k => k.reference === reference) + + function open(properties: PopupsProps) { + + let component = null; + if (typeof (item) === 'string' && popups.has(item)) { + component = popups.get(item); + } + + if (!properties.settings.width) { properties.settings.width = 600 } + + const payload = { + component, + popupsProps: properties, + type, + id: new Date().getTime().toString(), + reference + }; + + dispatch({ + type: POPUPS.ADD_POPUPS, + payload + }); + } + return { open, status: current?.status, result: current?.result, reference }; +} + +export { usePopups }; From 4958e070557e2df7026b0b9e856e03d203afa497 Mon Sep 17 00:00:00 2001 From: Charles Wahome Date: Mon, 3 Apr 2023 17:43:41 +0300 Subject: [PATCH 03/37] define generic popups wrappers --- src/app/views/common/popups/ModalWrapper.tsx | 42 ++++++++++++++ src/app/views/common/popups/PanelWrapper.tsx | 56 +++++++++++++++++++ src/app/views/common/popups/PopupsWrapper.tsx | 55 ++++++++++++++++++ src/app/views/common/popups/popups.types.ts | 9 +++ 4 files changed, 162 insertions(+) create mode 100644 src/app/views/common/popups/ModalWrapper.tsx create mode 100644 src/app/views/common/popups/PanelWrapper.tsx create mode 100644 src/app/views/common/popups/PopupsWrapper.tsx create mode 100644 src/app/views/common/popups/popups.types.ts diff --git a/src/app/views/common/popups/ModalWrapper.tsx b/src/app/views/common/popups/ModalWrapper.tsx new file mode 100644 index 0000000000..f43c0bcfbb --- /dev/null +++ b/src/app/views/common/popups/ModalWrapper.tsx @@ -0,0 +1,42 @@ +import { IconButton, Modal, Spinner } from '@fluentui/react'; +import { Suspense } from 'react'; + +import { translateMessage } from '../../../utils/translate-messages'; +import { WrapperProps } from './popups.types'; + +export function ModalWrapper(props: WrapperProps) { + const { isOpen, dismissPopup, Component, popupsProps, closePopup } = props; + + return ( + dismissPopup()} + layerProps={{ eventBubblingEnabled: true }} + > + closePopup()} + /> + { + }> + dismissPopup()} + closePopup={(e: any) => closePopup(e)} + /> + + } + + + ); +} + + diff --git a/src/app/views/common/popups/PanelWrapper.tsx b/src/app/views/common/popups/PanelWrapper.tsx new file mode 100644 index 0000000000..6fb741f3ae --- /dev/null +++ b/src/app/views/common/popups/PanelWrapper.tsx @@ -0,0 +1,56 @@ +import { getTheme, IOverlayProps, Panel, Spinner } from '@fluentui/react'; +import { Suspense } from 'react'; + +import { useAppSelector } from '../../../../store'; +import { WrapperProps } from './popups.types'; + +export function PanelWrapper(props: WrapperProps) { + const { theme: appTheme } = useAppSelector((state) => state); + const theme = getTheme(); + const { isOpen, dismissPopup, Component, popupsProps, closePopup } = props; + const { title } = popupsProps.settings; + + const isCurrentThemeDark = (): boolean => { + return (appTheme === 'dark' || appTheme === 'high-contrast'); + } + + const panelOverlayProps: IOverlayProps = { + styles: { + root: { + backgroundColor: isCurrentThemeDark() ? theme.palette.blackTranslucent40 : + theme.palette.whiteTranslucent40 + } + } + } + + const headerText = title ? title! : ''; + + return ( +
+ dismissPopup()} + hasCloseButton={true} + headerText={headerText.toString()} + isFooterAtBottom={true} + closeButtonAriaLabel='Close' + overlayProps={panelOverlayProps} + > +
+ { + }> + dismissPopup()} + closePopup={(e: any) => closePopup(e)} + /> + + } +
+ + +
+ ); +} \ No newline at end of file diff --git a/src/app/views/common/popups/PopupsWrapper.tsx b/src/app/views/common/popups/PopupsWrapper.tsx new file mode 100644 index 0000000000..8e799e56d1 --- /dev/null +++ b/src/app/views/common/popups/PopupsWrapper.tsx @@ -0,0 +1,55 @@ +import { + IPopup, POPUPS, usePopupsDispatchContext, + usePopupsStateContext +} from '../../../services/context/popups-context/PopupsContext'; +import { ModalWrapper } from './ModalWrapper'; +import { PanelWrapper } from './PanelWrapper'; + +const PopupWrapper = () => { + + const { popups } = usePopupsStateContext(); + const dispatch = usePopupsDispatchContext(); + + const close = (payload: IPopup, result: any) => { + if (result) { + payload.result = result; + } + payload.status = 'closed'; + dispatch({ type: POPUPS.DELETE_POPUPS, payload }); + } + + const dismiss = (payload: IPopup) => { + payload.status = 'dismissed'; + dispatch({ type: POPUPS.DELETE_POPUPS, payload }); + } + + return ( + <> + {popups && popups.map((popup: IPopup, index: number) => { + const { component, type, popupsProps, open } = popup; + if (type === 'panel') { + return component && dismiss(popup)} + Component={component} + popupsProps={popupsProps} + closePopup={(e: any) => close(popup, e)} + /> + } + + return component && dismiss(popup)} + Component={component} + popupsProps={popupsProps} + closePopup={(e: any) => close(popup, e)} + /> + + })} + + ); +}; + +export default PopupWrapper; \ No newline at end of file diff --git a/src/app/views/common/popups/popups.types.ts b/src/app/views/common/popups/popups.types.ts new file mode 100644 index 0000000000..34f272eb4f --- /dev/null +++ b/src/app/views/common/popups/popups.types.ts @@ -0,0 +1,9 @@ +import { PopupsComponent, PopupsProps } from '../../../services/context/popups-context'; + +export interface WrapperProps { + isOpen: boolean; + dismissPopup: Function; + Component: React.ElementType>; + popupsProps: PopupsProps; + closePopup: Function; +} \ No newline at end of file From a7422728b12965aef81bf3940a204358ed92cf67 Mon Sep 17 00:00:00 2001 From: Charles Wahome Date: Mon, 3 Apr 2023 17:43:53 +0300 Subject: [PATCH 04/37] register sample popup --- src/app/views/common/registry/popups.tsx | 9 +++++++++ .../query-runner/query-input/share-query/ShareQuery.tsx | 6 ++++-- 2 files changed, 13 insertions(+), 2 deletions(-) create mode 100644 src/app/views/common/registry/popups.tsx diff --git a/src/app/views/common/registry/popups.tsx b/src/app/views/common/registry/popups.tsx new file mode 100644 index 0000000000..dd54783c97 --- /dev/null +++ b/src/app/views/common/registry/popups.tsx @@ -0,0 +1,9 @@ +import { lazy } from 'react'; + +const ShareQuery = lazy(() => import('../../query-runner/query-input/share-query/ShareQuery')); + +export const popups = new Map([ + ['share-query', ShareQuery] +]); + +export type PopupItem = keyof typeof popups; \ No newline at end of file diff --git a/src/app/views/query-runner/query-input/share-query/ShareQuery.tsx b/src/app/views/query-runner/query-input/share-query/ShareQuery.tsx index 82088e3e99..85a269e59a 100644 --- a/src/app/views/query-runner/query-input/share-query/ShareQuery.tsx +++ b/src/app/views/query-runner/query-input/share-query/ShareQuery.tsx @@ -14,7 +14,7 @@ import { createShareLink } from '../../../common/share'; import { shareQueryStyles } from './ShareQuery.styles'; -export const ShareQuery = () => { +const ShareQuery = () => { const { sampleQuery } = useAppSelector((state) => state); const [showShareQueryDialog, setShareQuaryDialogStatus] = useState(true); @@ -101,4 +101,6 @@ export const ShareQuery = () => { ) -} \ No newline at end of file +} + +export default ShareQuery; \ No newline at end of file From 1e9621a602ca0e36cad77962b3eb56272239f084 Mon Sep 17 00:00:00 2001 From: Charles Wahome Date: Tue, 4 Apr 2023 12:03:18 +0300 Subject: [PATCH 05/37] utilise provider in app.tsx --- src/app/views/App.tsx | 179 ++++++++++++++++++++++-------------------- 1 file changed, 92 insertions(+), 87 deletions(-) diff --git a/src/app/views/App.tsx b/src/app/views/App.tsx index 394cd06190..a6ec030bf4 100644 --- a/src/app/views/App.tsx +++ b/src/app/views/App.tsx @@ -5,6 +5,7 @@ import { injectIntl } from 'react-intl'; import { connect } from 'react-redux'; import { bindActionCreators, Dispatch } from 'redux'; +import { removeSpinners } from '../..'; import { authenticationWrapper } from '../../modules/authentication'; import { componentNames, eventTypes, telemetry } from '../../telemetry'; import { loadGETheme } from '../../themes'; @@ -20,22 +21,23 @@ import { runQuery } from '../services/actions/query-action-creators'; import { setSampleQuery } from '../services/actions/query-input-action-creators'; import { changeTheme } from '../services/actions/theme-action-creator'; import { toggleSidebar } from '../services/actions/toggle-sidebar-action-creator'; +import { PopupsProvider } from '../services/context/popups-context'; import { GRAPH_URL } from '../services/graph-constants'; import { parseSampleUrl } from '../utils/sample-url-generation'; import { substituteTokens } from '../utils/token-helpers'; import { translateMessage } from '../utils/translate-messages'; -import { headerMessaging } from './app-sections/HeaderMessaging'; import { StatusMessages, TermsOfUseMessage } from './app-sections'; +import { headerMessaging } from './app-sections/HeaderMessaging'; import { appStyles } from './App.styles'; import { classNames } from './classnames'; +import { KeyboardCopyEvent } from './common/copy/KeyboardCopyEvent'; +import PopupsWrapper from './common/popups/PopupsWrapper'; import { createShareLink } from './common/share'; +import { MainHeader } from './main-header/MainHeader'; import { QueryResponse } from './query-response'; 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 '../..'; -import { KeyboardCopyEvent } from './common/copy/KeyboardCopyEvent'; export interface IAppProps { theme?: ITheme; @@ -398,91 +400,94 @@ class App extends Component { return ( // @ts-ignore -
- - -
- {graphExplorerMode === Mode.Complete && ( - { - if (ref?.style?.width) { - this.resizeSideBar(ref.style.width); - } - }} - className={`ms-Grid-col ms-sm12 ms-md4 ms-lg4 ${sidebarWidth} resizable-sidebar`} - minWidth={'71'} - maxWidth={maxWidth} - enable={{ - right: true - }} - handleClasses={{ - right: classes.vResizeHandle - }} - bounds={'parent'} - size={{ - width: sideWidth, - height: '' - }} - > - - - )} - {graphExplorerMode === Mode.TryIt && - headerMessaging(query)} - - {displayContent && ( - -
- -
- -
-
- + +
+ + +
+ {graphExplorerMode === Mode.Complete && ( + { + if (ref?.style?.width) { + this.resizeSideBar(ref.style.width); + } + }} + className={`ms-Grid-col ms-sm12 ms-md4 ms-lg4 ${sidebarWidth} resizable-sidebar`} + minWidth={'71'} + maxWidth={maxWidth} + enable={{ + right: true + }} + handleClasses={{ + right: classes.vResizeHandle + }} + bounds={'parent'} + size={{ + width: sideWidth, + height: '' + }} + > + + + )} + {graphExplorerMode === Mode.TryIt && + headerMessaging(query)} + + {displayContent && ( + +
+
- -
- - )} -
-
- + +
+
+ +
+ +
+ + )} +
+
+ +
-
+ + ); } From 508d0193ee94f735e0e13f152b723da1aae04acf Mon Sep 17 00:00:00 2001 From: Charles Wahome Date: Wed, 5 Apr 2023 12:44:18 +0300 Subject: [PATCH 06/37] add new dialogcomponent for dialog uis --- .../services/context/popups-context/index.ts | 4 +-- src/app/views/common/popups/DialogWrapper.tsx | 33 +++++++++++++++++++ src/app/views/common/popups/ModalWrapper.tsx | 1 - src/app/views/common/popups/PopupsWrapper.tsx | 12 +++++++ src/app/views/common/registry/popups.tsx | 2 +- src/types/query-response.ts | 6 ---- 6 files changed, 48 insertions(+), 10 deletions(-) create mode 100644 src/app/views/common/popups/DialogWrapper.tsx diff --git a/src/app/services/context/popups-context/index.ts b/src/app/services/context/popups-context/index.ts index 2aaf270079..5cd1581bfe 100644 --- a/src/app/services/context/popups-context/index.ts +++ b/src/app/services/context/popups-context/index.ts @@ -8,7 +8,7 @@ export interface PopupsComponent { } interface PopupSettings { - title: React.ReactNode; + title: React.ReactNode | string; subtitle?: string; width?: number | string; } @@ -19,7 +19,7 @@ export interface PopupsProps { } export type PopupsStatus = 'open' | 'closed' | 'dismissed' | null; -export type PopupsType = 'modal' | 'panel'; +export type PopupsType = 'modal' | 'panel' | 'dialog'; export interface ShowPopupsParameters { component: React.ElementType>; diff --git a/src/app/views/common/popups/DialogWrapper.tsx b/src/app/views/common/popups/DialogWrapper.tsx new file mode 100644 index 0000000000..2036c47b14 --- /dev/null +++ b/src/app/views/common/popups/DialogWrapper.tsx @@ -0,0 +1,33 @@ +import { Dialog, DialogType, Spinner } from '@fluentui/react'; +import { Suspense } from 'react'; + +import { WrapperProps } from './popups.types'; + +export function DialogWrapper(props: WrapperProps) { + const { isOpen, dismissPopup, Component, popupsProps, closePopup } = props; + const { settings: { title, subtitle } } = popupsProps; + + return ( + + ); +} \ No newline at end of file diff --git a/src/app/views/common/popups/ModalWrapper.tsx b/src/app/views/common/popups/ModalWrapper.tsx index f43c0bcfbb..e997a75dc1 100644 --- a/src/app/views/common/popups/ModalWrapper.tsx +++ b/src/app/views/common/popups/ModalWrapper.tsx @@ -35,7 +35,6 @@ export function ModalWrapper(props: WrapperProps) { } - ); } diff --git a/src/app/views/common/popups/PopupsWrapper.tsx b/src/app/views/common/popups/PopupsWrapper.tsx index 8e799e56d1..e54593abca 100644 --- a/src/app/views/common/popups/PopupsWrapper.tsx +++ b/src/app/views/common/popups/PopupsWrapper.tsx @@ -2,6 +2,7 @@ import { IPopup, POPUPS, usePopupsDispatchContext, usePopupsStateContext } from '../../../services/context/popups-context/PopupsContext'; +import { DialogWrapper } from './DialogWrapper'; import { ModalWrapper } from './ModalWrapper'; import { PanelWrapper } from './PanelWrapper'; @@ -38,6 +39,17 @@ const PopupWrapper = () => { /> } + if (type === 'dialog') { + return component && dismiss(popup)} + Component={component} + popupsProps={popupsProps} + closePopup={(e: any) => close(popup, e)} + /> + } + return component && ([ ['share-query', ShareQuery] ]); -export type PopupItem = keyof typeof popups; \ No newline at end of file +export type PopupItem = 'share-query'; diff --git a/src/types/query-response.ts b/src/types/query-response.ts index e409b8829b..2770faea50 100644 --- a/src/types/query-response.ts +++ b/src/types/query-response.ts @@ -18,12 +18,6 @@ export interface IQueryResponseProps { mobileScreen: boolean; } -export interface IQueryResponseState { - showShareQueryDialog: boolean; - showModal: boolean; - query: string; -} - export interface IGraphResponse { body: any | undefined; headers: any | undefined; From 6f6d05fb398ca3a9524ec837fe7f6db3a353ed40 Mon Sep 17 00:00:00 2001 From: Charles Wahome Date: Wed, 5 Apr 2023 12:45:34 +0300 Subject: [PATCH 07/37] separate share query component from button --- .../query-runner/query-input/QueryInput.tsx | 6 +- .../query-input/share-query/ShareButton.tsx | 49 +++++++++ .../query-input/share-query/ShareQuery.tsx | 101 +++++------------- .../query-input/share-query/index.ts | 4 +- 4 files changed, 84 insertions(+), 76 deletions(-) create mode 100644 src/app/views/query-runner/query-input/share-query/ShareButton.tsx diff --git a/src/app/views/query-runner/query-input/QueryInput.tsx b/src/app/views/query-runner/query-input/QueryInput.tsx index 58e1fb8db3..c465565361 100644 --- a/src/app/views/query-runner/query-input/QueryInput.tsx +++ b/src/app/views/query-runner/query-input/QueryInput.tsx @@ -3,7 +3,7 @@ import { injectIntl } from 'react-intl'; import { useDispatch } from 'react-redux'; import { AppDispatch, useAppSelector } from '../../../../store'; -import { httpMethods, IQuery, IQueryInputProps } from '../../../../types/query-runner'; +import { IQuery, IQueryInputProps, httpMethods } from '../../../../types/query-runner'; import { setSampleQuery } from '../../../services/actions/query-input-action-creators'; import { GRAPH_API_VERSIONS } from '../../../services/graph-constants'; import { getStyleFor } from '../../../utils/http-methods.utils'; @@ -12,7 +12,7 @@ import { translateMessage } from '../../../utils/translate-messages'; import SubmitButton from '../../../views/common/submit-button/SubmitButton'; import { queryRunnerStyles } from '../QueryRunner.styles'; import { AutoComplete } from './auto-complete'; -import { ShareQuery } from './share-query'; +import { ShareButton } from './share-query'; const QueryInput = (props: IQueryInputProps) => { const { @@ -115,7 +115,7 @@ const QueryInput = (props: IQueryInputProps) => { /> - + diff --git a/src/app/views/query-runner/query-input/share-query/ShareButton.tsx b/src/app/views/query-runner/query-input/share-query/ShareButton.tsx new file mode 100644 index 0000000000..eedcdc0c10 --- /dev/null +++ b/src/app/views/query-runner/query-input/share-query/ShareButton.tsx @@ -0,0 +1,49 @@ +import { + DirectionalHint, + IconButton, IIconProps, TooltipHost +} from '@fluentui/react'; + +import { usePopups } from '../../../../services/hooks'; +import { translateMessage } from '../../../../utils/translate-messages'; +import { shareQueryStyles } from './ShareQuery.styles'; + +const ShareButton = () => { + + const { open: openShareQuery } = usePopups('share-query', 'dialog'); + + const iconProps: IIconProps = { + iconName: 'Share' + } + + const shareButtonStyles = shareQueryStyles().iconButton; + + const content =
{translateMessage('Share Query')}
+ const calloutProps = { + gapSpace: 0 + }; + + return ( +
+ + openShareQuery({ + settings: { + title: translateMessage('Share Query'), + subtitle: translateMessage('Share Query Message') + } + })} + iconProps={iconProps} + styles={shareButtonStyles} + role={'button'} + ariaLabel={translateMessage('Share Query')} + /> + +
+ ) +} + +export default ShareButton; \ No newline at end of file diff --git a/src/app/views/query-runner/query-input/share-query/ShareQuery.tsx b/src/app/views/query-runner/query-input/share-query/ShareQuery.tsx index 85a269e59a..440de57a32 100644 --- a/src/app/views/query-runner/query-input/share-query/ShareQuery.tsx +++ b/src/app/views/query-runner/query-input/share-query/ShareQuery.tsx @@ -1,31 +1,23 @@ -import { - DefaultButton, Dialog, DialogFooter, DialogType, DirectionalHint, FontSizes, - IconButton, IIconProps, TooltipHost -} from '@fluentui/react'; -import { useState } from 'react'; -import { useAppSelector } from '../../../../../store'; +import { DefaultButton, DialogFooter, FontSizes } from '@fluentui/react'; +import React from 'react'; +import { useAppSelector } from '../../../../../store'; import { componentNames, eventTypes, telemetry } from '../../../../../telemetry'; +import { PopupsComponent } from '../../../../services/context/popups-context'; import { sanitizeQueryUrl } from '../../../../utils/query-url-sanitization'; import { translateMessage } from '../../../../utils/translate-messages'; import { copy } from '../../../common/copy'; import { CopyButton } from '../../../common/copy/CopyButton'; import { createShareLink } from '../../../common/share'; -import { shareQueryStyles } from './ShareQuery.styles'; -const ShareQuery = () => { - const { sampleQuery } = useAppSelector((state) => state); - const [showShareQueryDialog, setShareQuaryDialogStatus] = useState(true); +const ShareQuery: React.FC> = (props) => { + const { sampleQuery } = useAppSelector((state) => state); const query = { ...sampleQuery }; const sanitizedQueryUrl = sanitizeQueryUrl(query.sampleUrl); const shareLink = createShareLink(sampleQuery); - const toggleShareQueryDialogState = () => { - setShareQuaryDialogStatus(prevState => !prevState); - } - const handleCopy = () => { copy('share-query-text'); trackCopyEvent(); @@ -39,68 +31,33 @@ const ShareQuery = () => { }); } - const iconProps: IIconProps = { - iconName: 'Share' - } - - const shareButtonStyles = shareQueryStyles().iconButton; - - const content =
{translateMessage('Share Query')}
- const calloutProps = { - gapSpace: 0 - }; - return ( -
- - - -