Skip to content

Commit

Permalink
replace attach new layer popup
Browse files Browse the repository at this point in the history
  • Loading branch information
@hl662
hl662 committed Feb 3, 2025
1 parent 62adf02 commit 0311082
Show file tree
Hide file tree
Showing 4 changed files with 27 additions and 63 deletions.
19 changes: 9 additions & 10 deletions packages/itwin/map-layers/src/test/MapUrlDialog.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,17 +7,17 @@ import { assert, expect } from "chai";
import * as enzyme from "enzyme";
import * as sinon from "sinon";
import * as moq from "typemoq";
import type { MapSubLayerProps } from "@itwin/core-common";
import { ImageMapLayerSettings } from "@itwin/core-common";
import type { DisplayStyle3dState, IModelConnection, MapLayerTokenEndpoint, ScreenViewport, ViewState3d } from "@itwin/core-frontend";
import { IModelApp, MapLayerSource, MapLayerSourceStatus, MockRender, NotifyMessageDetails, OutputMessagePriority } from "@itwin/core-frontend";
import { Select } from "@itwin/itwinui-react";
import { MapLayersUI } from "../mapLayers";
import type { SourceState } from "../ui/widget/MapUrlDialog";
import { MapUrlDialog } from "../ui/widget/MapUrlDialog";
import { AccessClientMock, TokenEndpointMock } from "./AccessClientMock";
import { TestUtils } from "./TestUtils";

import type { MapSubLayerProps } from "@itwin/core-common";
import type { DisplayStyle3dState, IModelConnection, MapLayerTokenEndpoint, ScreenViewport, ViewState3d } from "@itwin/core-frontend";
import type { SourceState } from "../ui/widget/MapUrlDialog";
describe("MapUrlDialog", () => {
const sandbox = sinon.createSandbox();
const viewportMock = moq.Mock.ofType<ScreenViewport>();
Expand Down Expand Up @@ -62,7 +62,7 @@ describe("MapUrlDialog", () => {
});

const spyOnOkResult = sandbox.fake();
const component = enzyme.mount(<MapUrlDialog isOverlay={false} activeViewport={viewportMock.object} onOkResult={spyOnOkResult} />);
const component = enzyme.mount(<MapUrlDialog activeViewport={viewportMock.object} onOkResult={spyOnOkResult} />);
const layerTypeSelect = component.find(Select).at(0);
await (layerTypeSelect.props() as any).onChange(format);

Expand Down Expand Up @@ -159,7 +159,7 @@ describe("MapUrlDialog", () => {
const mockModalUrlDialogOk = (_result?: SourceState) => {};

it("renders", () => {
const component = enzyme.mount(<MapUrlDialog activeViewport={viewportMock.object} isOverlay={false} onOkResult={mockModalUrlDialogOk} />);
const component = enzyme.mount(<MapUrlDialog activeViewport={viewportMock.object} onOkResult={mockModalUrlDialogOk} />);
const allInputs = component.find("input");

expect(allInputs.length).to.equals(defaultNumberOfInput);
Expand All @@ -186,7 +186,7 @@ describe("MapUrlDialog", () => {
return Promise.resolve({ status: MapLayerSourceStatus.Valid, subLayers: sampleWmsLayerSettings.subLayers });
});

const component = enzyme.mount(<MapUrlDialog isOverlay={false} activeViewport={viewportMock.object} onOkResult={spyOnOkResult} />);
const component = enzyme.mount(<MapUrlDialog activeViewport={viewportMock.object} onOkResult={spyOnOkResult} />);
const layerTypeSelect = component.find(Select).at(0);
await (layerTypeSelect.props() as any).onChange("WMS");

Expand Down Expand Up @@ -229,7 +229,7 @@ describe("MapUrlDialog", () => {
});

it("should not display user preferences options if iTwinConfig is undefined ", () => {
const component = enzyme.mount(<MapUrlDialog activeViewport={viewportMock.object} isOverlay={false} onOkResult={mockModalUrlDialogOk} />);
const component = enzyme.mount(<MapUrlDialog activeViewport={viewportMock.object} onOkResult={mockModalUrlDialogOk} />);
const allRadios = component.find('input[type="radio"]');
expect(allRadios.length).equals(0);
allRadios.forEach((radio) => {
Expand All @@ -243,7 +243,7 @@ describe("MapUrlDialog", () => {
save: undefined,
delete: undefined,
}));
const component = enzyme.mount(<MapUrlDialog activeViewport={viewportMock.object} isOverlay={false} onOkResult={mockModalUrlDialogOk} />);
const component = enzyme.mount(<MapUrlDialog activeViewport={viewportMock.object} onOkResult={mockModalUrlDialogOk} />);
const allRadios = component.find('input[type="radio"]');
expect(allRadios.length).equals(0);
allRadios.forEach((radio) => {
Expand All @@ -261,7 +261,6 @@ describe("MapUrlDialog", () => {
<MapUrlDialog
mapLayerOptions={{ showUserPreferencesStorageOptions: true }}
activeViewport={viewportMock.object}
isOverlay={false}
onOkResult={mockModalUrlDialogOk}
/>,
);
Expand All @@ -285,7 +284,7 @@ describe("MapUrlDialog", () => {
return Promise.resolve({ status: MapLayerSourceStatus.Valid, subLayers: sampleLayerSettings.subLayers });
});

const component = enzyme.mount(<MapUrlDialog isOverlay={false} activeViewport={viewportMock.object} onOkResult={mockModalUrlDialogOk} />);
const component = enzyme.mount(<MapUrlDialog activeViewport={viewportMock.object} onOkResult={mockModalUrlDialogOk} />);
const layerTypeSelect = component.find(Select).at(0);
await (layerTypeSelect.props() as any).onChange("WMS");

Expand Down
68 changes: 18 additions & 50 deletions packages/itwin/map-layers/src/ui/widget/AttachLayerPopupButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,10 @@
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
import * as React from "react";
import { RelativePosition } from "@itwin/appui-abstract";
import { UiFramework } from "@itwin/appui-react";
import { IModelApp, MapLayerSource, MapLayerSourceStatus, NotifyMessageDetails, OutputMessagePriority } from "@itwin/core-frontend";
import * as UiCore from "@itwin/core-react";
import { SvgAdd, SvgDelete, SvgEdit } from "@itwin/itwinui-icons-react";
import { Button, IconButton, Input, List, ListItem, ProgressRadial, Text } from "@itwin/itwinui-react";
import { Button, IconButton, Input, List, ListItem, Popover, ProgressRadial, Text } from "@itwin/itwinui-react";
import { MapLayerPreferences } from "../../MapLayerPreferences";
import { MapLayersUI } from "../../mapLayers";
import { ConfirmMessageDialog } from "./ConfirmMessageDialog";
Expand Down Expand Up @@ -268,7 +266,6 @@ function AttachLayerPanel({ isOverlay, onLayerAttached, onHandleOutsideClick }:
UiFramework.dialogs.modal.open(
<MapUrlDialog
activeViewport={activeViewport}
isOverlay={isOverlay}
signInModeArgs={{ layer, validation: sourceValidation, source: foundSource }}
onOkResult={(sourceState?: SourceState) => handleModalUrlDialogOk(LayerAction.New, sourceState)}
onCancelResult={handleModalUrlDialogCancel}
Expand Down Expand Up @@ -334,11 +331,11 @@ function AttachLayerPanel({ isOverlay, onLayerAttached, onHandleOutsideClick }:
}
}, [options, sourceFilterString]);

const handleAddNewMapSource = React.useCallback(() => {
const handleAddNewMapSource = React.useCallback((event: React.MouseEvent) => {
event.stopPropagation(); // We don't want the owning ListBox to react on mouse click.
UiFramework.dialogs.modal.open(
<MapUrlDialog
activeViewport={activeViewport}
isOverlay={isOverlay}
onOkResult={(result?: SourceState) => handleModalUrlDialogOk(LayerAction.New, result)}
onCancelResult={handleModalUrlDialogCancel}
mapLayerOptions={mapLayerOptions}
Expand All @@ -347,8 +344,7 @@ function AttachLayerPanel({ isOverlay, onLayerAttached, onHandleOutsideClick }:
if (onHandleOutsideClick) {
onHandleOutsideClick(false);
}
return;
}, [activeViewport, handleModalUrlDialogCancel, handleModalUrlDialogOk, isOverlay, mapLayerOptions, onHandleOutsideClick]);
}, [activeViewport, handleModalUrlDialogCancel, handleModalUrlDialogOk, mapLayerOptions, onHandleOutsideClick]);

const handleAttach = React.useCallback((mapName: string) => {
setLayerNameToAdd(mapName);
Expand Down Expand Up @@ -426,7 +422,6 @@ function AttachLayerPanel({ isOverlay, onLayerAttached, onHandleOutsideClick }:
UiFramework.dialogs.modal.open(
<MapUrlDialog
activeViewport={activeViewport}
isOverlay={isOverlay}
mapLayerSourceToEdit={matchingSource}
onOkResult={(result?: SourceState) => handleModalUrlDialogOk(LayerAction.Edit, result)}
onCancelResult={handleModalUrlDialogCancel}
Expand All @@ -438,7 +433,7 @@ function AttachLayerPanel({ isOverlay, onLayerAttached, onHandleOutsideClick }:
onHandleOutsideClick(false);
}
},
[activeViewport, handleModalUrlDialogCancel, handleModalUrlDialogOk, isOverlay, mapLayerOptions, onHandleOutsideClick, sources],
[activeViewport, handleModalUrlDialogCancel, handleModalUrlDialogOk, mapLayerOptions, onHandleOutsideClick, sources],
);

return (
Expand Down Expand Up @@ -555,30 +550,6 @@ export function AttachLayerPopupButton(props: AttachLayerPopupButtonProps) {
setPopupOpen(!popupOpen);
}, [popupOpen]);

const handleClosePopup = React.useCallback(() => {
setPopupOpen(false);
}, []);

const onHandleOutsideClick = React.useCallback(
(event: MouseEvent) => {
if (!handleOutsideClick) {
return;
}
// If clicking on button that open panel - don't trigger outside click processing
if (buttonRef?.current && buttonRef?.current.contains(event.target as Node)) {
return;
}

// If clicking the panel, this is not an outside clicked
if (panelRef.current && panelRef?.current.contains(event.target as Node)) {
return;
}

// If we reach this point, we got an outside clicked, no close the popup
setPopupOpen(false);
},
[handleOutsideClick],
);

const { refreshFromStyle } = useSourceMapContext();

Expand Down Expand Up @@ -636,23 +607,20 @@ export function AttachLayerPopupButton(props: AttachLayerPopupButtonProps) {

return (
<>
{renderButton()}
{/*eslint-disable-next-line @typescript-eslint/no-deprecated */}
<UiCore.Popup // TODO: Replace all deprecated UiCore components with iTwinUI components
isOpen={popupOpen}
position={RelativePosition.BottomRight}
onClose={handleClosePopup}
onOutsideClick={onHandleOutsideClick}
closeOnWheel={false}
target={buttonRef.current}
closeOnEnter={false}
closeOnContextMenu={false}
<Popover
content={
<div ref={panelRef} className="map-sources-popup-panel">
<AttachLayerPanel isOverlay={props.isOverlay} onLayerAttached={handleLayerAttached} onHandleOutsideClick={setHandleOutsideClick} />
</div>
}
applyBackground
visible={popupOpen}
onVisibleChange={setPopupOpen}
closeOnOutsideClick={handleOutsideClick}
placement={"bottom-end"}
>
<div ref={panelRef} className="map-sources-popup-panel">
<AttachLayerPanel isOverlay={props.isOverlay} onLayerAttached={handleLayerAttached} onHandleOutsideClick={setHandleOutsideClick} />
</div>
{/*eslint-disable-next-line @typescript-eslint/no-deprecated */}
</UiCore.Popup>
{renderButton()}
</Popover>
</>
);
}
2 changes: 0 additions & 2 deletions packages/itwin/map-layers/src/ui/widget/MapLayerDroppable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -167,7 +167,6 @@ export function MapLayerDroppable(props: MapLayerDroppableProps) {
UiFramework.dialogs.modal.open(
<MapUrlDialog
activeViewport={props.activeViewport}
isOverlay={props.isOverlay}
signInModeArgs={{ layer }}
onOkResult={(sourceState?: SourceState) => handleOk(index, sourceState)}
onCancelResult={() => {
Expand Down Expand Up @@ -219,7 +218,6 @@ export function MapLayerDroppable(props: MapLayerDroppableProps) {
UiFramework.dialogs.modal.open(
<MapUrlDialog
activeViewport={props.activeViewport}
isOverlay={props.isOverlay}
signInModeArgs={{ layer }}
onOkResult={(sourceState?: SourceState) => handleOk(index, sourceState)}
onCancelResult={() => {
Expand Down
1 change: 0 additions & 1 deletion packages/itwin/map-layers/src/ui/widget/MapUrlDialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,6 @@ const URL_SCHEMES = {
export type LayerCreationMode = "single" | "multiple";
interface MapUrlDialogProps {
activeViewport?: ScreenViewport;
isOverlay: boolean;
onOkResult: (result?: SourceState) => void;
onCancelResult?: () => void;
mapLayerOptions?: MapLayerOptions;
Expand Down

0 comments on commit 0311082

Please sign in to comment.