Fixed DirectoryPickerPanel and NotificationConsoleComponent

This commit is contained in:
vaidankarswapnil
2021-07-19 11:17:17 +05:30
parent 103b3bf6c9
commit 9685e768fa
3 changed files with 15 additions and 12 deletions

View File

@@ -27,7 +27,7 @@ export interface NotificationConsoleComponentProps {
} }
interface NotificationConsoleComponentState { interface NotificationConsoleComponentState {
headerStatus: string; headerStatus: string | undefined;
selectedFilter: string; selectedFilter: string;
allConsoleData: ConsoleData[]; allConsoleData: ConsoleData[];
} }
@@ -44,7 +44,7 @@ export class NotificationConsoleComponent extends React.Component<
{ key: "Error", text: "Error" }, { key: "Error", text: "Error" },
]; ];
private headerTimeoutId?: number; private headerTimeoutId?: number;
private prevHeaderStatus: string; private prevHeaderStatus: string | undefined;
private consoleHeaderElement?: HTMLElement; private consoleHeaderElement?: HTMLElement;
constructor(props: NotificationConsoleComponentProps) { constructor(props: NotificationConsoleComponentProps) {
@@ -99,7 +99,7 @@ export class NotificationConsoleComponent extends React.Component<
<div <div
className="notificationConsoleHeader" className="notificationConsoleHeader"
id="notificationConsoleHeader" id="notificationConsoleHeader"
ref={this.setElememntRef} ref={this.setElememntRef as React.LegacyRef<HTMLDivElement>}
onClick={() => this.expandCollapseConsole()} onClick={() => this.expandCollapseConsole()}
onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => this.onExpandCollapseKeyPress(event)} onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => this.onExpandCollapseKeyPress(event)}
tabIndex={0} tabIndex={0}
@@ -150,7 +150,7 @@ export class NotificationConsoleComponent extends React.Component<
role="combobox" role="combobox"
selectedKey={this.state.selectedFilter} selectedKey={this.state.selectedFilter}
options={NotificationConsoleComponent.FilterOptions} options={NotificationConsoleComponent.FilterOptions}
onChange={this.onFilterSelected.bind(this)} onChange={() => this.onFilterSelected.bind(this)}
aria-labelledby="consoleFilterLabel" aria-labelledby="consoleFilterLabel"
aria-label={this.state.selectedFilter} aria-label={this.state.selectedFilter}
/> />
@@ -210,12 +210,12 @@ export class NotificationConsoleComponent extends React.Component<
)); ));
} }
private onFilterSelected = (event: React.ChangeEvent<HTMLSelectElement>, option: IDropdownOption): void => { private onFilterSelected = (option: IDropdownOption): void => {
this.setState({ selectedFilter: String(option.key) }); this.setState({ selectedFilter: String(option.key) });
}; };
private getFilteredConsoleData(): ConsoleData[] { private getFilteredConsoleData(): ConsoleData[] {
let filterType: ConsoleDataType; let filterType: ConsoleDataType | undefined;
switch (this.state.selectedFilter) { switch (this.state.selectedFilter) {
case "In Progress": case "In Progress":
@@ -308,7 +308,8 @@ const PrPreview = (props: { pr: string }) => {
export const NotificationConsole: React.FC = () => { export const NotificationConsole: React.FC = () => {
const setIsExpanded = useNotificationConsole((state) => state.setIsExpanded); const setIsExpanded = useNotificationConsole((state) => state.setIsExpanded);
const isExpanded = useNotificationConsole((state) => state.isExpanded); const isExpanded = useNotificationConsole((state) => state.isExpanded);
const consoleData = useNotificationConsole((state) => state.consoleData); //eslint-disable-next-line
const consoleData = useNotificationConsole((state) => state.consoleData!);
const inProgressConsoleDataIdToBeDeleted = useNotificationConsole( const inProgressConsoleDataIdToBeDeleted = useNotificationConsole(
(state) => state.inProgressConsoleDataIdToBeDeleted (state) => state.inProgressConsoleDataIdToBeDeleted
); );

View File

@@ -1,4 +1,4 @@
import { Panel, PanelType, ChoiceGroup } from "@fluentui/react"; import { ChoiceGroup, Panel, PanelType } from "@fluentui/react";
import * as React from "react"; import * as React from "react";
import { useDirectories } from "../../../hooks/useDirectories"; import { useDirectories } from "../../../hooks/useDirectories";
@@ -7,7 +7,7 @@ interface Props {
dismissPanel: () => void; dismissPanel: () => void;
tenantId: string; tenantId: string;
armToken: string; armToken: string;
switchTenant: (tenantId: string) => void; switchTenant: (tenantId: string | undefined) => void;
} }
export const DirectoryPickerPanel: React.FunctionComponent<Props> = ({ export const DirectoryPickerPanel: React.FunctionComponent<Props> = ({
@@ -29,8 +29,8 @@ export const DirectoryPickerPanel: React.FunctionComponent<Props> = ({
<ChoiceGroup <ChoiceGroup
options={directories.map((dir) => ({ key: dir.tenantId, text: `${dir.displayName} (${dir.tenantId})` }))} options={directories.map((dir) => ({ key: dir.tenantId, text: `${dir.displayName} (${dir.tenantId})` }))}
selectedKey={tenantId} selectedKey={tenantId}
onChange={(event, option) => { onChange={(_event, option) => {
switchTenant(option.key); switchTenant(option?.key);
dismissPanel(); dismissPanel();
}} }}
/> />

View File

@@ -134,7 +134,9 @@
"./src/quickstart.ts", "./src/quickstart.ts",
"./src/setupTests.ts", "./src/setupTests.ts",
"./src/userContext.test.ts", "./src/userContext.test.ts",
"src/Common/EntityValue.tsx" "src/Common/EntityValue.tsx",
"./src/Platform/Hosted/Components/DirectoryPickerPanel.tsx",
"./src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx"
], ],
"include": [ "include": [
"src/CellOutputViewer/transforms/**/*", "src/CellOutputViewer/transforms/**/*",