Compare commits

..

2 Commits

Author SHA1 Message Date
MokireddySampath
9c99cc634b Delete TableEntity.tsx 2023-04-17 13:01:46 +05:30
Sampath
77d413423d Revert "autofocus removed for input to resolve 2276949"
This reverts commit cfc578f308.
2023-04-17 11:18:32 +05:30
5 changed files with 226 additions and 381 deletions

View File

@@ -1,169 +0,0 @@
import {
Dropdown,
IDropdownOption,
IDropdownStyles,
IImageProps,
Image,
IStackTokens,
Stack,
TextField,
TooltipHost,
} from "@fluentui/react";
import React, { FunctionComponent } from "react";
import DeleteIcon from "../../images/delete.svg";
import EditIcon from "../../images/Edit_entity.svg";
import { CassandraType, TableType } from "../Explorer/Tables/Constants";
import { userContext } from "../UserContext";
import { EntityValue } from "./EntityValue";
const dropdownStyles: Partial<IDropdownStyles> = { dropdown: { width: 100 } };
export interface TableEntityProps {
entityTypeLabel?: string;
entityPropertyLabel?: string;
entityValueLabel?: string;
isDeleteOptionVisible: boolean;
entityProperty: string;
entityPropertyPlaceHolder: string;
selectedKey: string | number;
entityValuePlaceholder: string;
entityValue: string | Date;
isEntityTypeDate: boolean;
options: { key: string; text: string }[];
isPropertyTypeDisable: boolean;
entityTimeValue: string;
isEntityValueDisable?: boolean;
onDeleteEntity?: () => void;
onEditEntity?: () => void;
onEntityPropertyChange: (event: React.FormEvent<HTMLElement>, newInput?: string) => void;
onEntityTypeChange: (event: React.FormEvent<HTMLElement>, selectedParam: IDropdownOption) => void;
onEntityValueChange: (event: React.FormEvent<HTMLElement>, newInput?: string) => void;
onSelectDate: (date: Date | null | undefined) => void;
onEntityTimeValueChange: (event: React.FormEvent<HTMLElement>, newInput?: string) => void;
}
export const TableEntity: FunctionComponent<TableEntityProps> = ({
entityTypeLabel,
entityPropertyLabel,
isDeleteOptionVisible,
entityProperty,
selectedKey,
entityPropertyPlaceHolder,
entityValueLabel,
entityValuePlaceholder,
entityValue,
options,
isPropertyTypeDisable,
isEntityTypeDate,
entityTimeValue,
isEntityValueDisable,
onEditEntity,
onDeleteEntity,
onEntityPropertyChange,
onEntityTypeChange,
onEntityValueChange,
onSelectDate,
onEntityTimeValueChange,
}: TableEntityProps): JSX.Element => {
const imageProps: IImageProps = {
width: 16,
height: 30,
className: entityPropertyLabel ? "addRemoveIconLabel" : "addRemoveIcon",
};
const sectionStackTokens: IStackTokens = { childrenGap: 12 };
const handleKeyPress = (event: React.KeyboardEvent<HTMLElement>) => {
if (event.key === "Enter" || event.key === "Space") {
onEditEntity();
}
};
const handleKeyPressdelete = (event: React.KeyboardEvent<HTMLElement>) => {
if (event.key === "Enter" || event.key === "Space") {
onDeleteEntity();
}
};
const getEntityValueType = (): string => {
const { Int, Smallint, Tinyint } = CassandraType;
const { Double, Int32, Int64 } = TableType;
if (
selectedKey === Double ||
selectedKey === Int32 ||
selectedKey === Int64 ||
selectedKey === Int ||
selectedKey === Smallint ||
selectedKey === Tinyint
) {
return "number";
}
return "string";
};
return (
<>
<Stack horizontal tokens={sectionStackTokens}>
<TextField
label={entityPropertyLabel && entityPropertyLabel}
id="entityPropertyId"
autoFocus
disabled={isPropertyTypeDisable}
placeholder={entityPropertyPlaceHolder}
value={entityProperty}
onChange={onEntityPropertyChange}
required
/>
<Dropdown
label={entityTypeLabel && entityTypeLabel}
selectedKey={selectedKey}
onChange={onEntityTypeChange}
options={options}
disabled={isPropertyTypeDisable}
id="entityTypeId"
styles={dropdownStyles}
/>
<EntityValue
entityValueLabel={entityValueLabel}
entityValueType={getEntityValueType()}
isEntityValueDisable={isEntityValueDisable}
entityValuePlaceholder={entityValuePlaceholder}
entityValue={entityValue}
isEntityTypeDate={isEntityTypeDate}
entityTimeValue={entityTimeValue}
onEntityValueChange={onEntityValueChange}
onSelectDate={onSelectDate}
onEntityTimeValueChange={onEntityTimeValueChange}
/>
{!isEntityValueDisable && (
<TooltipHost content="Edit property" id="editTooltip">
<div tabIndex={0}>
<Image
{...imageProps}
src={EditIcon}
alt="editEntity"
id="editEntity"
onClick={onEditEntity}
tabIndex={0}
onKeyPress={handleKeyPress}
/>
</div>
</TooltipHost>
)}
{isDeleteOptionVisible && userContext.apiType !== "Cassandra" && (
<TooltipHost content="Delete property" id="deleteTooltip">
<Image
{...imageProps}
src={DeleteIcon}
alt="delete entity"
id="deleteEntity"
onClick={onDeleteEntity}
tabIndex={0}
onKeyPress={handleKeyPressdelete}
/>
</TooltipHost>
)}
</Stack>
</>
);
};

View File

@@ -347,12 +347,14 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
ariaLabel="Set the throughput — Request Units per second (RU/s) — required for the workload. A read of a 1 KB document uses 1 RU. Select manual if you plan to scale RU/s yourself. Select autoscale to allow the system to scale RU/s based on usage." ariaLabel="Set the throughput — Request Units per second (RU/s) — required for the workload. A read of a 1 KB document uses 1 RU. Select manual if you plan to scale RU/s yourself. Select autoscale to allow the system to scale RU/s based on usage."
className="panelInfoIcon" className="panelInfoIcon"
iconName="Info" iconName="Info"
role="tooltip"
tabIndex={0} tabIndex={0}
> >
<IconBase <IconBase
ariaLabel="Set the throughput — Request Units per second (RU/s) — required for the workload. A read of a 1 KB document uses 1 RU. Select manual if you plan to scale RU/s yourself. Select autoscale to allow the system to scale RU/s based on usage." ariaLabel="Set the throughput — Request Units per second (RU/s) — required for the workload. A read of a 1 KB document uses 1 RU. Select manual if you plan to scale RU/s yourself. Select autoscale to allow the system to scale RU/s based on usage."
className="panelInfoIcon" className="panelInfoIcon"
iconName="Info" iconName="Info"
role="tooltip"
styles={[Function]} styles={[Function]}
tabIndex={0} tabIndex={0}
theme={ theme={
@@ -633,7 +635,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
aria-label="Set the throughput — Request Units per second (RU/s) — required for the workload. A read of a 1 KB document uses 1 RU. Select manual if you plan to scale RU/s yourself. Select autoscale to allow the system to scale RU/s based on usage." aria-label="Set the throughput — Request Units per second (RU/s) — required for the workload. A read of a 1 KB document uses 1 RU. Select manual if you plan to scale RU/s yourself. Select autoscale to allow the system to scale RU/s based on usage."
className="panelInfoIcon root-57" className="panelInfoIcon root-57"
data-icon-name="Info" data-icon-name="Info"
role="img" role="tooltip"
tabIndex={0} tabIndex={0}
> >
@@ -1339,12 +1341,14 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
ariaLabel="Set the max RU/s to the highest RU/s you want your container to scale to. The container will scale between 10% of max RU/s to the max RU/s based on usage." ariaLabel="Set the max RU/s to the highest RU/s you want your container to scale to. The container will scale between 10% of max RU/s to the max RU/s based on usage."
className="panelInfoIcon" className="panelInfoIcon"
iconName="Info" iconName="Info"
role="tooltip"
tabIndex={0} tabIndex={0}
> >
<IconBase <IconBase
ariaLabel="Set the max RU/s to the highest RU/s you want your container to scale to. The container will scale between 10% of max RU/s to the max RU/s based on usage." ariaLabel="Set the max RU/s to the highest RU/s you want your container to scale to. The container will scale between 10% of max RU/s to the max RU/s based on usage."
className="panelInfoIcon" className="panelInfoIcon"
iconName="Info" iconName="Info"
role="tooltip"
styles={[Function]} styles={[Function]}
tabIndex={0} tabIndex={0}
theme={ theme={
@@ -1625,7 +1629,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
aria-label="Set the max RU/s to the highest RU/s you want your container to scale to. The container will scale between 10% of max RU/s to the max RU/s based on usage." aria-label="Set the max RU/s to the highest RU/s you want your container to scale to. The container will scale between 10% of max RU/s to the max RU/s based on usage."
className="panelInfoIcon root-57" className="panelInfoIcon root-57"
data-icon-name="Info" data-icon-name="Info"
role="img" role="tooltip"
tabIndex={0} tabIndex={0}
> >

View File

@@ -10,7 +10,7 @@ import {
IButtonStyles, IButtonStyles,
IconButton, IconButton,
IContextualMenuItemProps, IContextualMenuItemProps,
IContextualMenuProps, IContextualMenuProps
} from "@fluentui/react"; } from "@fluentui/react";
import * as React from "react"; import * as React from "react";
import AnimateHeight from "react-animate-height"; import AnimateHeight from "react-animate-height";

View File

@@ -40,6 +40,7 @@ exports[`TreeNodeComponent does not render children by default 1`] = `
onKeyPress={[Function]} onKeyPress={[Function]}
role="treeitem" role="treeitem"
> >
<div>
<div <div
className="treeNodeHeader " className="treeNodeHeader "
data-test="label" data-test="label"
@@ -65,6 +66,7 @@ exports[`TreeNodeComponent does not render children by default 1`] = `
label label
</span> </span>
</div> </div>
</div>
<div <div
className="loadingIconContainer" className="loadingIconContainer"
> >
@@ -143,6 +145,7 @@ exports[`TreeNodeComponent renders a simple node (sorted children, expanded) 1`]
onKeyPress={[Function]} onKeyPress={[Function]}
role="treeitem" role="treeitem"
> >
<div>
<div <div
className="treeNodeHeader " className="treeNodeHeader "
data-test="label" data-test="label"
@@ -217,6 +220,7 @@ exports[`TreeNodeComponent renders a simple node (sorted children, expanded) 1`]
/> />
</div> </div>
</div> </div>
</div>
<div <div
className="loadingIconContainer" className="loadingIconContainer"
> >
@@ -294,6 +298,7 @@ exports[`TreeNodeComponent renders loading icon 1`] = `
onKeyPress={[Function]} onKeyPress={[Function]}
role="treeitem" role="treeitem"
> >
<div>
<div <div
className="treeNodeHeader " className="treeNodeHeader "
data-test="label" data-test="label"
@@ -319,6 +324,7 @@ exports[`TreeNodeComponent renders loading icon 1`] = `
label label
</span> </span>
</div> </div>
</div>
<div <div
className="loadingIconContainer" className="loadingIconContainer"
> >
@@ -368,6 +374,7 @@ exports[`TreeNodeComponent renders sorted children, expanded, leaves and parents
onKeyPress={[Function]} onKeyPress={[Function]}
role="treeitem" role="treeitem"
> >
<div>
<div <div
className="treeNodeHeader " className="treeNodeHeader "
data-test="label" data-test="label"
@@ -433,6 +440,7 @@ exports[`TreeNodeComponent renders sorted children, expanded, leaves and parents
/> />
</div> </div>
</div> </div>
</div>
<div <div
className="loadingIconContainer" className="loadingIconContainer"
> >
@@ -538,6 +546,7 @@ exports[`TreeNodeComponent renders unsorted children by default 1`] = `
onKeyPress={[Function]} onKeyPress={[Function]}
role="treeitem" role="treeitem"
> >
<div>
<div <div
className="treeNodeHeader " className="treeNodeHeader "
data-test="label" data-test="label"
@@ -563,6 +572,7 @@ exports[`TreeNodeComponent renders unsorted children by default 1`] = `
label label
</span> </span>
</div> </div>
</div>
<div <div
className="loadingIconContainer" className="loadingIconContainer"
> >