mirror of
https://github.com/Azure/cosmos-explorer.git
synced 2025-06-04 22:52:31 +01:00
Clean up EditTableEntityPanel (#955)
This commit is contained in:
parent
39a67dbc98
commit
dc21032d69
@ -150,9 +150,6 @@
|
|||||||
.backImageIcon {
|
.backImageIcon {
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
}
|
}
|
||||||
.entityValueTextField {
|
|
||||||
margin: 24px;
|
|
||||||
}
|
|
||||||
.addEntityDatePicker {
|
.addEntityDatePicker {
|
||||||
max-width: 145px;
|
max-width: 145px;
|
||||||
}
|
}
|
||||||
|
@ -218,7 +218,7 @@ export const AddTableEntityPanel: FunctionComponent<AddTableEntityPanelProps> =
|
|||||||
|
|
||||||
if (isEntityValuePanelOpen) {
|
if (isEntityValuePanelOpen) {
|
||||||
return (
|
return (
|
||||||
<Stack style={{ margin: "20px 0", padding: "0 34px" }}>
|
<Stack style={{ padding: "20px 34px" }}>
|
||||||
<Stack horizontal {...columnProps}>
|
<Stack horizontal {...columnProps}>
|
||||||
<Image {...backImageProps} src={RevertBackIcon} alt="back" onClick={() => setIsEntityValuePanelFalse()} />
|
<Image {...backImageProps} src={RevertBackIcon} alt="back" onClick={() => setIsEntityValuePanelFalse()} />
|
||||||
<Label>{entityAttributeProperty}</Label>
|
<Label>{entityAttributeProperty}</Label>
|
||||||
|
@ -1,11 +1,11 @@
|
|||||||
import { IDropdownOption, Image, IPanelProps, IRenderFunction, Label, Stack, Text, TextField } from "@fluentui/react";
|
import { IDropdownOption, Image, Label, Stack, Text, TextField } from "@fluentui/react";
|
||||||
import { useBoolean } from "@fluentui/react-hooks";
|
import { useBoolean } from "@fluentui/react-hooks";
|
||||||
import React, { FunctionComponent, useEffect, useState } from "react";
|
import React, { FunctionComponent, useEffect, useState } from "react";
|
||||||
import * as _ from "underscore";
|
import * as _ from "underscore";
|
||||||
import AddPropertyIcon from "../../../../images/Add-property.svg";
|
import AddPropertyIcon from "../../../../images/Add-property.svg";
|
||||||
import RevertBackIcon from "../../../../images/RevertBack.svg";
|
import RevertBackIcon from "../../../../images/RevertBack.svg";
|
||||||
|
import { getErrorMessage, handleError } from "../../../Common/ErrorHandlingUtils";
|
||||||
import { TableEntity } from "../../../Common/TableEntity";
|
import { TableEntity } from "../../../Common/TableEntity";
|
||||||
import { useSidePanel } from "../../../hooks/useSidePanel";
|
|
||||||
import { userContext } from "../../../UserContext";
|
import { userContext } from "../../../UserContext";
|
||||||
import * as TableConstants from "../../Tables/Constants";
|
import * as TableConstants from "../../Tables/Constants";
|
||||||
import * as DataTableUtilities from "../../Tables/DataTable/DataTableUtilities";
|
import * as DataTableUtilities from "../../Tables/DataTable/DataTableUtilities";
|
||||||
@ -14,7 +14,7 @@ import * as Entities from "../../Tables/Entities";
|
|||||||
import { CassandraAPIDataClient, TableDataClient } from "../../Tables/TableDataClient";
|
import { CassandraAPIDataClient, TableDataClient } from "../../Tables/TableDataClient";
|
||||||
import * as TableEntityProcessor from "../../Tables/TableEntityProcessor";
|
import * as TableEntityProcessor from "../../Tables/TableEntityProcessor";
|
||||||
import QueryTablesTab from "../../Tabs/QueryTablesTab";
|
import QueryTablesTab from "../../Tabs/QueryTablesTab";
|
||||||
import { PanelContainerComponent } from "../PanelContainerComponent";
|
import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
|
||||||
import {
|
import {
|
||||||
attributeNameLabel,
|
attributeNameLabel,
|
||||||
attributeValueLabel,
|
attributeValueLabel,
|
||||||
@ -29,7 +29,6 @@ import {
|
|||||||
getEntityValuePlaceholder,
|
getEntityValuePlaceholder,
|
||||||
getFormattedTime,
|
getFormattedTime,
|
||||||
imageProps,
|
imageProps,
|
||||||
isValidEntities,
|
|
||||||
options,
|
options,
|
||||||
} from "./Validators/EntityTableHelper";
|
} from "./Validators/EntityTableHelper";
|
||||||
|
|
||||||
@ -59,12 +58,13 @@ export const EditTableEntityPanel: FunctionComponent<EditTableEntityPanelProps>
|
|||||||
tableEntityListViewModel,
|
tableEntityListViewModel,
|
||||||
cassandraApiClient,
|
cassandraApiClient,
|
||||||
}: EditTableEntityPanelProps): JSX.Element => {
|
}: EditTableEntityPanelProps): JSX.Element => {
|
||||||
const closeSidePanel = useSidePanel((state) => state.closeSidePanel);
|
|
||||||
const [entities, setEntities] = useState<EntityRowType[]>([]);
|
const [entities, setEntities] = useState<EntityRowType[]>([]);
|
||||||
const [selectedRow, setSelectedRow] = useState<number>(0);
|
const [selectedRow, setSelectedRow] = useState<number>(0);
|
||||||
const [entityAttributeValue, setEntityAttributeValue] = useState<string>("");
|
const [entityAttributeValue, setEntityAttributeValue] = useState<string>("");
|
||||||
const [originalDocument, setOriginalDocument] = useState<Entities.ITableEntity>({});
|
const [originalDocument, setOriginalDocument] = useState<Entities.ITableEntity>({});
|
||||||
const [entityAttributeProperty, setEntityAttributeProperty] = useState<string>("");
|
const [entityAttributeProperty, setEntityAttributeProperty] = useState<string>("");
|
||||||
|
const [formError, setFormError] = useState<string>("");
|
||||||
|
const [isExecuting, setIsExecuting] = useState<boolean>(false);
|
||||||
|
|
||||||
const [
|
const [
|
||||||
isEntityValuePanelOpen,
|
isEntityValuePanelOpen,
|
||||||
@ -190,14 +190,26 @@ export const EditTableEntityPanel: FunctionComponent<EditTableEntityPanelProps>
|
|||||||
return displayValue;
|
return displayValue;
|
||||||
};
|
};
|
||||||
|
|
||||||
const submit = async (event: React.FormEvent<HTMLInputElement>): Promise<void> => {
|
const onSubmit = async (): Promise<void> => {
|
||||||
if (!isValidEntities(entities)) {
|
for (let i = 0; i < entities.length; i++) {
|
||||||
return undefined;
|
const { property, type } = entities[i];
|
||||||
|
if (property === "" || property === undefined) {
|
||||||
|
setFormError(`Property name cannot be empty. Please enter a property name`);
|
||||||
|
return;
|
||||||
}
|
}
|
||||||
event.preventDefault();
|
|
||||||
|
if (!type) {
|
||||||
|
setFormError(`Property type cannot be empty. Please select a type from the dropdown for property ${property}`);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
setIsExecuting(true);
|
||||||
const entity: Entities.ITableEntity = entityFromAttributes(entities);
|
const entity: Entities.ITableEntity = entityFromAttributes(entities);
|
||||||
const newTableDataClient = userContext.apiType === "Cassandra" ? cassandraApiClient : tableDataClient;
|
const newTableDataClient = userContext.apiType === "Cassandra" ? cassandraApiClient : tableDataClient;
|
||||||
const originalDocumentData = userContext.apiType === "Cassandra" ? originalDocument[0] : originalDocument;
|
const originalDocumentData = userContext.apiType === "Cassandra" ? originalDocument[0] : originalDocument;
|
||||||
|
|
||||||
|
try {
|
||||||
const newEntity: Entities.ITableEntity = await newTableDataClient.updateDocument(
|
const newEntity: Entities.ITableEntity = await newTableDataClient.updateDocument(
|
||||||
queryTablesTab.collection,
|
queryTablesTab.collection,
|
||||||
originalDocumentData,
|
originalDocumentData,
|
||||||
@ -209,7 +221,13 @@ export const EditTableEntityPanel: FunctionComponent<EditTableEntityPanelProps>
|
|||||||
}
|
}
|
||||||
tableEntityListViewModel.selected.removeAll();
|
tableEntityListViewModel.selected.removeAll();
|
||||||
tableEntityListViewModel.selected.push(newEntity);
|
tableEntityListViewModel.selected.push(newEntity);
|
||||||
closeSidePanel();
|
} catch (error) {
|
||||||
|
const errorMessage = getErrorMessage(error);
|
||||||
|
handleError(errorMessage, "EditTableRow");
|
||||||
|
throw error;
|
||||||
|
} finally {
|
||||||
|
setIsExecuting(false);
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const tryInsertNewHeaders = (viewModel: TableEntityListViewModel, newEntity: Entities.ITableEntity): boolean => {
|
const tryInsertNewHeaders = (viewModel: TableEntityListViewModel, newEntity: Entities.ITableEntity): boolean => {
|
||||||
@ -299,10 +317,35 @@ export const EditTableEntityPanel: FunctionComponent<EditTableEntityPanelProps>
|
|||||||
setIsEntityValuePanelTrue();
|
setIsEntityValuePanelTrue();
|
||||||
};
|
};
|
||||||
|
|
||||||
const renderPanelContent = (): JSX.Element => {
|
if (isEntityValuePanelOpen) {
|
||||||
return (
|
return (
|
||||||
<form className="panelFormWrapper">
|
<Stack style={{ padding: "20px 34px" }}>
|
||||||
<div className="panelFormWrapper">
|
<Stack horizontal {...columnProps}>
|
||||||
|
<Image {...backImageProps} src={RevertBackIcon} alt="back" onClick={() => setIsEntityValuePanelFalse()} />
|
||||||
|
<Label>{entityAttributeProperty}</Label>
|
||||||
|
</Stack>
|
||||||
|
<TextField
|
||||||
|
multiline
|
||||||
|
rows={5}
|
||||||
|
value={entityAttributeValue}
|
||||||
|
onChange={(event, newInput?: string) => {
|
||||||
|
setEntityAttributeValue(newInput);
|
||||||
|
entityChange(newInput, selectedRow, "value");
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Stack>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const props: RightPaneFormProps = {
|
||||||
|
formError,
|
||||||
|
isExecuting,
|
||||||
|
submitButtonText: "Update",
|
||||||
|
onSubmit,
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<RightPaneForm {...props}>
|
||||||
<div className="panelMainContent">
|
<div className="panelMainContent">
|
||||||
{entities.map((entity, index) => {
|
{entities.map((entity, index) => {
|
||||||
return (
|
return (
|
||||||
@ -349,59 +392,6 @@ export const EditTableEntityPanel: FunctionComponent<EditTableEntityPanelProps>
|
|||||||
</Stack>
|
</Stack>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
{renderPanelFooter()}
|
</RightPaneForm>
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const renderPanelFooter = (): JSX.Element => {
|
|
||||||
return (
|
|
||||||
<div className="paneFooter">
|
|
||||||
<div className="leftpanel-okbut">
|
|
||||||
<input type="submit" onClick={submit} className="genericPaneSubmitBtn" value="Update Entity" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const onRenderNavigationContent: IRenderFunction<IPanelProps> = () => (
|
|
||||||
<Stack horizontal {...columnProps}>
|
|
||||||
<Image {...backImageProps} src={RevertBackIcon} alt="back" onClick={() => setIsEntityValuePanelFalse()} />
|
|
||||||
<Label>{entityAttributeProperty}</Label>
|
|
||||||
</Stack>
|
|
||||||
);
|
|
||||||
if (isEntityValuePanelOpen) {
|
|
||||||
return (
|
|
||||||
<PanelContainerComponent
|
|
||||||
headerText=""
|
|
||||||
onRenderNavigationContent={onRenderNavigationContent}
|
|
||||||
panelWidth="700px"
|
|
||||||
isOpen={true}
|
|
||||||
panelContent={
|
|
||||||
<TextField
|
|
||||||
multiline
|
|
||||||
rows={5}
|
|
||||||
className="entityValueTextField"
|
|
||||||
value={entityAttributeValue}
|
|
||||||
onChange={(event, newInput?: string) => {
|
|
||||||
setEntityAttributeValue(newInput);
|
|
||||||
entityChange(newInput, selectedRow, "value");
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
isConsoleExpanded={false}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<PanelContainerComponent
|
|
||||||
headerText="Edit Table Entity"
|
|
||||||
panelWidth="700px"
|
|
||||||
isOpen={true}
|
|
||||||
panelContent={renderPanelContent()}
|
|
||||||
isConsoleExpanded={false}
|
|
||||||
/>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -80,7 +80,7 @@ export const int64Placeholder = "Enter a signed 64-bit integer, in the range (-2
|
|||||||
|
|
||||||
export const columnProps: Partial<IStackProps> = {
|
export const columnProps: Partial<IStackProps> = {
|
||||||
tokens: { childrenGap: 10 },
|
tokens: { childrenGap: 10 },
|
||||||
styles: { root: { width: 680, marginBottom: 8 } },
|
styles: { root: { marginBottom: 8 } },
|
||||||
};
|
};
|
||||||
|
|
||||||
// helper functions
|
// helper functions
|
||||||
|
File diff suppressed because it is too large
Load Diff
@ -158,7 +158,8 @@ export default class QueryTablesTab extends TabsBase {
|
|||||||
queryTablesTab={this}
|
queryTablesTab={this}
|
||||||
tableEntityListViewModel={this.tableEntityListViewModel()}
|
tableEntityListViewModel={this.tableEntityListViewModel()}
|
||||||
cassandraApiClient={new CassandraAPIDataClient()}
|
cassandraApiClient={new CassandraAPIDataClient()}
|
||||||
/>
|
/>,
|
||||||
|
"700px"
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user