05f190c102
# New Feature: Entity Explorer - Entities are actions (apis and queries), datasources, pages, and widgets - With this new feature, all entities in the application will be available to view in the new entity explorer sidebar - All existing application features from the api sidebar, query sidebar, datasource sidebar and pages sidebar now are avialable on the entity explorer sidebar - Users are now able to quickly switch to any entity in the application from the entity explorer sidebar. - Users can also search all entities in the application from the new sidebar. Use cmd + f or ctrl + f to focus on the search input - Users can rename entities from the new sidebar - Users can also perform contextual actions on these entities like set a page as home page, copy/move actions, delete entity, etc from the context menu available alongside the entities in the sidebar - Users can view the properties of the entities in the sidebar, as well as copy bindings to use in the application.
108 lines
3.0 KiB
TypeScript
108 lines
3.0 KiB
TypeScript
import React, { ReactNode } from "react";
|
|
import styled from "styled-components";
|
|
import { ItemRenderer, Select } from "@blueprintjs/select";
|
|
import {
|
|
Button,
|
|
MenuItem,
|
|
Intent as BlueprintIntent,
|
|
PopoverPosition,
|
|
PopoverInteractionKind,
|
|
} from "@blueprintjs/core";
|
|
import { DropdownOption } from "widgets/DropdownWidget";
|
|
import { ControlIconName, ControlIcons } from "icons/ControlIcons";
|
|
import { noop } from "utils/AppsmithUtils";
|
|
import { Intent } from "constants/DefaultTheme";
|
|
import { IconProps } from "constants/IconConstants";
|
|
import { Colors } from "constants/Colors";
|
|
|
|
export type ContextDropdownOption = DropdownOption & {
|
|
onSelect: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
|
|
intent?: Intent;
|
|
children?: ContextDropdownOption[];
|
|
};
|
|
const Dropdown = Select.ofType<ContextDropdownOption>();
|
|
|
|
const StyledMenuItem = styled(MenuItem)`
|
|
&&&&.bp3-menu-item:hover {
|
|
background: ${props => props.theme.colors.primaryOld};
|
|
color: ${props => props.theme.colors.textOnDarkBG};
|
|
}
|
|
&&&.bp3-menu-item.bp3-intent-danger:hover {
|
|
background: ${props => props.theme.colors.error};
|
|
}
|
|
`;
|
|
|
|
type ContextDropdownProps = {
|
|
options: ContextDropdownOption[];
|
|
className: string;
|
|
toggle: {
|
|
type: "icon" | "button";
|
|
icon?: ControlIconName;
|
|
iconSize?: number;
|
|
text?: string;
|
|
placeholder?: string;
|
|
color?: string;
|
|
};
|
|
};
|
|
|
|
const DropdownItem = (option: ContextDropdownOption) => (
|
|
<StyledMenuItem
|
|
key={option.value}
|
|
onClick={option.onSelect}
|
|
shouldDismissPopover={true}
|
|
text={option.label || option.value}
|
|
intent={option.intent as BlueprintIntent}
|
|
popoverProps={{
|
|
minimal: true,
|
|
hoverCloseDelay: 0,
|
|
hoverOpenDelay: 300,
|
|
interactionKind: PopoverInteractionKind.CLICK,
|
|
position: PopoverPosition.RIGHT,
|
|
modifiers: {
|
|
arrow: {
|
|
enabled: false,
|
|
},
|
|
offset: {
|
|
enabled: true,
|
|
offset: "-16px, 0",
|
|
},
|
|
},
|
|
}}
|
|
>
|
|
{option.children && option.children.map(DropdownItem)}
|
|
</StyledMenuItem>
|
|
);
|
|
|
|
export const ContextDropdown = (props: ContextDropdownProps) => {
|
|
let trigger: ReactNode;
|
|
if (props.toggle.type === "icon" && props.toggle.icon) {
|
|
const TriggerElement = ControlIcons[props.toggle.icon];
|
|
const TriggerElementProps: IconProps = {
|
|
width: props.toggle.iconSize,
|
|
height: props.toggle.iconSize,
|
|
color: props.toggle.color || Colors.SLATE_GRAY,
|
|
};
|
|
trigger = <TriggerElement {...TriggerElementProps} />;
|
|
}
|
|
if (props.toggle.type === "button" && props.toggle.text)
|
|
trigger = <Button text={props.toggle.text} />;
|
|
|
|
const renderer: ItemRenderer<ContextDropdownOption> = (
|
|
option: ContextDropdownOption,
|
|
) => <DropdownItem key={option.value} {...option} />;
|
|
|
|
return (
|
|
<Dropdown
|
|
items={props.options}
|
|
itemRenderer={renderer}
|
|
onItemSelect={noop}
|
|
filterable={false}
|
|
className={props.className}
|
|
>
|
|
{trigger}
|
|
</Dropdown>
|
|
);
|
|
};
|
|
|
|
export default ContextDropdown;
|