random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2025-12-19 17:01:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add hideInputs query param in notebookViewer and other minor updates (#82)

Browse Source 
* Add hideInputs query param in notebookViewer

* Fix test and other minor changes

* Make GalleryHeaderComponent more functional
This commit is contained in:
Tanuj Mittal
2020-07-10 14:23:53 -07:00
committed by GitHub
parent 9bdf7e0cce
commit dcd6e0361c
7 changed files with 73 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
src/Explorer/Controls/Header/GalleryHeaderComponent.tsx
View File

@@ -1,15 +1,36 @@
import * as React from "react";
import { Stack, Text, Separator, FontIcon, CommandButton, FontWeights } from "office-ui-fabric-react";
import { Stack, Text, Separator, FontIcon, CommandButton, FontWeights, ITextProps } from "office-ui-fabric-react";
export class GalleryHeaderComponent extends React.Component {
private static readonly headerText = "Microsoft Azure";
private static readonly azureText = "Microsoft Azure";
private static readonly cosmosdbText = "Cosmos DB";
private static readonly galleryText = "Gallery";
private static readonly loginText = "Log in";
private static readonly loginOnClick = () => (window.location.href = new URL("./", window.location.href).href);
private static readonly textStyle: React.CSSProperties = {
private static readonly openPortal = () => window.open("https://portal.azure.com", "_blank");
private static readonly openDataExplorer = () => (window.location.href = new URL("./", window.location.href).href);
private static readonly openGallery = () =>
(window.location.href = new URL("./galleryViewer.html", window.location.href).href);
private static readonly headerItemStyle: React.CSSProperties = {
color: "white"
};
private static readonly mainHeaderTextProps: ITextProps = {
style: GalleryHeaderComponent.headerItemStyle,
variant: "mediumPlus",
styles: {
root: {
fontWeight: FontWeights.semibold
}
}
};
private static readonly headerItemTextProps: ITextProps = { style: GalleryHeaderComponent.headerItemStyle };
private renderHeaderItem = (text: string, onClick: () => void, textProps: ITextProps): JSX.Element => {
return (
<CommandButton onClick={onClick} ariaLabel={text}>
<Text {...textProps}>{text}</Text>
</CommandButton>
);
};
public render(): JSX.Element {
return (
@@ -20,36 +41,41 @@ export class GalleryHeaderComponent extends React.Component {
verticalAlign="center"
>
<Stack.Item>
<Text
style={GalleryHeaderComponent.textStyle}
variant="mediumPlus"
styles={{ root: { fontWeight: FontWeights.semibold } }}
>
{GalleryHeaderComponent.headerText}
</Text>
{this.renderHeaderItem(
GalleryHeaderComponent.azureText,
GalleryHeaderComponent.openPortal,
GalleryHeaderComponent.mainHeaderTextProps
)}
</Stack.Item>
<Stack.Item>
<Separator vertical />
</Stack.Item>
<Stack.Item>
<Text style={GalleryHeaderComponent.textStyle}>{GalleryHeaderComponent.cosmosdbText}</Text>
{this.renderHeaderItem(
GalleryHeaderComponent.cosmosdbText,
GalleryHeaderComponent.openDataExplorer,
GalleryHeaderComponent.headerItemTextProps
)}
</Stack.Item>
<Stack.Item>
<FontIcon style={GalleryHeaderComponent.textStyle} iconName="ChevronRight" />
<FontIcon style={GalleryHeaderComponent.headerItemStyle} iconName="ChevronRight" />
</Stack.Item>
<Stack.Item>
<Text style={GalleryHeaderComponent.textStyle}>{GalleryHeaderComponent.galleryText}</Text>
{this.renderHeaderItem(
GalleryHeaderComponent.galleryText,
GalleryHeaderComponent.openGallery,
GalleryHeaderComponent.headerItemTextProps
)}
</Stack.Item>
<Stack.Item grow>
<></>
</Stack.Item>
<Stack.Item>
<CommandButton
style={GalleryHeaderComponent.textStyle}
text={GalleryHeaderComponent.loginText}
ariaLabel={GalleryHeaderComponent.loginText}
onClick={GalleryHeaderComponent.loginOnClick}
/>
{this.renderHeaderItem(
GalleryHeaderComponent.loginText,
GalleryHeaderComponent.openDataExplorer,
GalleryHeaderComponent.headerItemTextProps
)}
</Stack.Item>
</Stack>
);

5
src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.tsx
View File

@@ -26,6 +26,7 @@ export interface NotebookViewerComponentProps {
galleryItem?: IGalleryItem;
isFavorite?: boolean;
backNavigationText: string;
hideInputs?: boolean;
onBackClick: () => void;
onTagClick: (tag: string) => void;
}
@@ -129,7 +130,9 @@ export class NotebookViewerComponent extends React.Component<NotebookViewerCompo
<></>
)}
{this.notebookComponentBootstrapper.renderComponent(NotebookReadOnlyRenderer, { hideInputs: false })}
{this.notebookComponentBootstrapper.renderComponent(NotebookReadOnlyRenderer, {
hideInputs: this.props.hideInputs
})}
{this.state.dialogProps && <DialogComponent {...this.state.dialogProps} />}
</div>