Skip to content

Commit bbb0e6c

Browse files
MnickiiMnickii
authored
fix: correct GE try-it mode view (#3800)
1 parent e16aac1 commit bbb0e6c

File tree

5 files changed

+84
-67
lines changed

5 files changed

+84
-67
lines changed

‎src/app/views/App.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -260,7 +260,10 @@ class App extends Component<IAppProps, IAppState> {
260260
return (
261261
<FluentProvider theme={fluentV9Themes[this.props.appTheme]}>
262262
<ThemeContext.Provider value={this.props.appTheme}>
263-
<Layout handleSelectVerb={this.handleSelectVerb} />
263+
<Layout
264+
handleSelectVerb={this.handleSelectVerb}
265+
graphExplorerMode={this.props.graphExplorerMode}
266+
authenticated={this.props.authenticated} />
264267
</ThemeContext.Provider>
265268
</FluentProvider>
266269
);

‎src/app/views/common/monaco/Monaco.tsx‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,10 +29,7 @@ const useStyles = makeStyles({
2929
}
3030
});
3131

32-
const Monaco = ({ body, onChange, language, readOnly, height, extraInfoElement, isVisible }: MonacoProps) => {
33-
const mode = useAppSelector((state) => state.graphExplorerMode);
34-
const mobileScreen = useAppSelector((state) => state.sidebarProperties.mobileScreen);
35-
const showSidebar = mode === Mode.Complete && !mobileScreen;
32+
const Monaco = ({ body, onChange, language, readOnly, extraInfoElement, isVisible }: MonacoProps) => {
3633
const styles = useStyles();
3734
const editorRef = useRef<editor.IStandaloneCodeEditor | null>(null);
3835

‎src/app/views/layout/Layout.tsx‎

Lines changed: 66 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,14 @@ import { LayoutResizeHandler } from './LayoutResizeHandler';
1919
import { useResizeHandle } from '@fluentui-contrib/react-resize-handle';
2020
import { useLayoutResizeStyles, useLayoutStyles, SIDEBAR_SIZE_CSS_VAR, REQUEST_HEIGHT_CSS_VAR } from './LayoutStyles';
2121
import { useDetectMobileScreen } from '../../utils/useDetectMobileScreen';
22+
import { Mode } from '../../../types/enums';
23+
import { createShareLink } from '../common/share';
24+
import { headerMessaging } from '../app-sections/HeaderMessaging';
2225

2326
interface LayoutProps {
2427
handleSelectVerb: (verb: string) => void;
28+
graphExplorerMode: Mode;
29+
authenticated: boolean;
2530
}
2631

2732
export const Layout = (props: LayoutProps) => {
@@ -34,6 +39,7 @@ export const Layout = (props: LayoutProps) => {
3439
const { mobileScreen, showSidebar } = useAppSelector((state) => state.sidebarProperties);
3540
const [initialSidebarWidth, setInitialSidebarWidth] = useState(456);
3641
const [sidebarElement, setSidebarElement] = useState<HTMLElement | null>(null);
42+
const query = createShareLink(sampleQuery, props.authenticated);
3743
const [requestHeight, setRequestHeight] = useState(300);
3844
const requestRef = useRef<HTMLDivElement | null>(null);
3945

@@ -153,69 +159,72 @@ export const Layout = (props: LayoutProps) => {
153159
document.documentElement.style.setProperty(REQUEST_HEIGHT_CSS_VAR, `${requestHeight}px`);
154160
}, []);
155161
return (
156-
<>
157-
<PopupsProvider>
158-
<div className={layoutStyles.container}>
159-
<MainHeader />
160-
<div id='content-ref' className={mergeClasses(layoutStyles.content, resizeStyles)} ref={sidebarWrapperRef}>
161-
{showSidebar && (
162-
<div id='sidebar-ref' className={layoutStyles.sidebar} ref={storeSidebarElement}>
163-
<Sidebar handleToggleSelect={handleToggleSelect} />
164-
{!mobileScreen && (
165-
<LayoutResizeHandler
166-
position='end'
167-
ref={sidebarHandleRef}
168-
onDoubleClick={() => updateSidebarSize(456)}
169-
onMouseDown={handleResizeStart}
170-
/>
171-
)}
172-
</div>
173-
)}
174-
<div id='main-content' className={layoutStyles.mainContent}>
175-
<div style={{ margin: '0 10px' }}>
176-
<Notification
177-
header={translateMessage('Banner notification 1 header')}
178-
content={translateMessage('Banner notification 1 content')}
179-
link={translateMessage('Banner notification 1 link')}
180-
linkText={translateMessage('Banner notification 1 link text')}
162+
<PopupsProvider>
163+
<div className={layoutStyles.container}>
164+
<MainHeader />
165+
{props.graphExplorerMode === Mode.TryIt && (
166+
<div className={layoutStyles.headerMessaging}>
167+
{headerMessaging(query)}
168+
</div>
169+
)}
170+
<div id='content-ref' className={mergeClasses(layoutStyles.content, resizeStyles)} ref={sidebarWrapperRef}>
171+
{showSidebar && props.graphExplorerMode === Mode.Complete && (
172+
<div id='sidebar-ref' className={layoutStyles.sidebar} ref={storeSidebarElement}>
173+
<Sidebar handleToggleSelect={handleToggleSelect} />
174+
{!mobileScreen && (
175+
<LayoutResizeHandler
176+
position='end'
177+
ref={sidebarHandleRef}
178+
onDoubleClick={() => updateSidebarSize(456)}
179+
onMouseDown={handleResizeStart}
181180
/>
181+
)}
182+
</div>
183+
)}
184+
<div id='main-content' className={layoutStyles.mainContent}>
185+
<div style={{ margin: '0 10px' }}>
186+
<Notification
187+
header={translateMessage('Banner notification 1 header')}
188+
content={translateMessage('Banner notification 1 content')}
189+
link={translateMessage('Banner notification 1 link')}
190+
linkText={translateMessage('Banner notification 1 link text')}
191+
/>
192+
</div>
193+
<ValidationProvider>
194+
<div style={{ margin: '0 10px' }}>
195+
<QueryRunner onSelectVerb={props.handleSelectVerb} />
182196
</div>
183-
<ValidationProvider>
197+
<div id='request-response-area' className={layoutStyles.requestResponseArea}>
198+
<div
199+
id='request-area'
200+
className={layoutStyles.requestArea}
201+
ref={requestRef}
202+
style={{ height: `var(${REQUEST_HEIGHT_CSS_VAR})` }}
203+
>
204+
<Request handleOnEditorChange={handleOnEditorChange} sampleQuery={sampleQuery} />
205+
{!mobileScreen && (
206+
<LayoutResizeHandler
207+
position='bottom'
208+
onMouseDown={handleRequestResizeStart}
209+
onDoubleClick={() => updateRequestHeight(300)}
210+
/>
211+
)}
212+
</div>
184213
<div style={{ margin: '0 10px' }}>
185-
<QueryRunner onSelectVerb={props.handleSelectVerb} />
214+
<StatusMessages />
186215
</div>
187-
<div id='request-response-area' className={layoutStyles.requestResponseArea}>
188-
<div
189-
id='request-area'
190-
className={layoutStyles.requestArea}
191-
ref={requestRef}
192-
style={{ height: `var(${REQUEST_HEIGHT_CSS_VAR})` }}
193-
>
194-
<Request handleOnEditorChange={handleOnEditorChange} sampleQuery={sampleQuery} />
195-
{!mobileScreen && (
196-
<LayoutResizeHandler
197-
position='bottom'
198-
onMouseDown={handleRequestResizeStart}
199-
onDoubleClick={() => updateRequestHeight(300)}
200-
/>
201-
)}
202-
</div>
203-
<div style={{ margin: '0 10px' }}>
204-
<StatusMessages />
205-
</div>
206-
<div id='response-area' className={layoutStyles.responseArea}>
207-
<QueryResponse />
208-
</div>
216+
<div id='response-area' className={layoutStyles.responseArea}>
217+
<QueryResponse />
209218
</div>
210-
</ValidationProvider>
211-
</div>
219+
</div>
220+
</ValidationProvider>
212221
</div>
213-
<TermsOfUseMessage />
214222
</div>
215-
<CollectionPermissionsProvider>
216-
<PopupsWrapper />
217-
</CollectionPermissionsProvider>
218-
</PopupsProvider>
219-
</>
223+
<TermsOfUseMessage />
224+
</div>
225+
<CollectionPermissionsProvider>
226+
<PopupsWrapper />
227+
</CollectionPermissionsProvider>
228+
</PopupsProvider>
220229
);
221230
};

‎src/app/views/layout/LayoutStyles.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,5 +70,8 @@ export const useLayoutStyles = makeStyles({
7070
overflow: 'auto',
7171
borderRadius: tokens.borderRadiusMedium,
7272
padding: tokens.spacingHorizontalS
73+
},
74+
headerMessaging: {
75+
margin: '10px'
7376
}
7477
});

‎src/app/views/query-response/pivot-items/pivot-item.tsx‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ import {
3232
} from '../adaptive-cards/AdaptiveHostConfig';
3333
import GraphToolkit from '../graph-toolkit/GraphToolkit';
3434
import { Response } from '../response';
35+
import { Mode } from '../../../../types/enums';
3536
import {
3637
ArrowHookDownRightRegular,
3738
DocumentChevronDoubleRegular,
@@ -110,6 +111,7 @@ const OverflowMenu = ({
110111

111112
export const GetPivotItems = () => {
112113
const styles = useStyles();
114+
const mode = useAppSelector((state)=> state.graphExplorerMode);
113115
const body = useAppSelector((state) => state.graphResponse.response.body);
114116
const currentTheme = useAppSelector((state) => state.theme);
115117
const selected = translateMessage('Response Preview');
@@ -119,7 +121,7 @@ export const GetPivotItems = () => {
119121
setSelectedValue(data.value);
120122
};
121123

122-
const tabs = [
124+
let tabs = [
123125
{
124126
id: translateMessage('Response Preview'),
125127
name: translateMessage('Response Preview'),
@@ -129,8 +131,10 @@ export const GetPivotItems = () => {
129131
id: translateMessage('Response Headers'),
130132
name: translateMessage('Response Headers'),
131133
icon: <DocumentChevronDoubleRegular />
132-
},
133-
{
134+
}]
135+
136+
if (mode === Mode.Complete) {
137+
const newTabs = [{
134138
id: translateMessage('Snippets'),
135139
name: translateMessage('Snippets'),
136140
icon: <ClipboardCodeRegular />
@@ -144,8 +148,9 @@ export const GetPivotItems = () => {
144148
id: translateMessage('Adaptive Cards'),
145149
name: translateMessage('Adaptive Cards'),
146150
icon: <CardUiRegular />
147-
}
148-
];
151+
}];
152+
tabs = [...tabs, ...newTabs];
153+
}
149154

150155
return (
151156
<div className={styles.container}>

0 commit comments

Comments
 (0)