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.
86 lines
2.6 KiB
TypeScript
86 lines
2.6 KiB
TypeScript
import React from "react";
|
|
import { useParams } from "react-router-dom";
|
|
import styled from "styled-components";
|
|
import SidebarComponent from "components/editorComponents/Sidebar";
|
|
import NavBarItem from "components/editorComponents/NavBarItem";
|
|
import {
|
|
BuilderRouteParams,
|
|
BUILDER_PAGE_URL,
|
|
WIDGETS_URL,
|
|
} from "constants/routes";
|
|
import { Colors } from "constants/Colors";
|
|
import { MenuIcons } from "icons/MenuIcons";
|
|
|
|
const Wrapper = styled.div`
|
|
display: grid;
|
|
grid-template-columns: 1fr 5fr;
|
|
width: ${props => props.theme.sidebarWidth};
|
|
box-shadow: 0px 1px 3px ${Colors.MINE_SHAFT};
|
|
background-color: ${Colors.MINE_SHAFT};
|
|
z-index: 3;
|
|
`;
|
|
|
|
const NavBar = styled.div`
|
|
background-color: ${Colors.MINE_SHAFT};
|
|
color: ${props => props.theme.colors.textOnDarkBG};
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-shadow: 0px 0px 4px ${Colors.CODE_GRAY};
|
|
`;
|
|
|
|
const Navbar = () => {
|
|
const params = useParams<BuilderRouteParams>();
|
|
|
|
return (
|
|
<Wrapper>
|
|
<NavBar>
|
|
<NavBarItem
|
|
icon={MenuIcons.EXPLORER_ICON}
|
|
path={BUILDER_PAGE_URL(params.applicationId, params.pageId)}
|
|
width={16}
|
|
height={16}
|
|
className="t--nav-link-entity-explorer"
|
|
title="Explorer"
|
|
isActive={(expected: string, current: string) => {
|
|
// Currently, the explorer shows on all paths except for the
|
|
// WIDGETS_URL path
|
|
|
|
// get the applicationId and pageId from the current location pathname
|
|
const found = current.match(
|
|
/^\/applications\/(?<applicationId>\w+)\/pages\/(?<pageId>\w+)\//,
|
|
);
|
|
// In this case: expected = BUILDER_PAGE_URL(applicationId, pageId)
|
|
// If current url begins with expected url AND
|
|
// If the current url isn't the WIDGETS_URL THEN
|
|
// this is an explorer sidebar path
|
|
return (
|
|
current.indexOf(expected) === 0 &&
|
|
current !==
|
|
WIDGETS_URL(found?.groups?.applicationId, found?.groups?.pageId)
|
|
);
|
|
}}
|
|
/>
|
|
<NavBarItem
|
|
icon={MenuIcons.WIDGETS_ICON}
|
|
path={WIDGETS_URL(params.applicationId, params.pageId)}
|
|
width={16}
|
|
height={16}
|
|
className="t--nav-link-widgets-editor"
|
|
title="Widgets"
|
|
exact
|
|
isActive={(expected: string, current: string) => expected === current}
|
|
/>
|
|
</NavBar>
|
|
<SidebarComponent />
|
|
</Wrapper>
|
|
);
|
|
};
|
|
Navbar.displayName = "Navbar";
|
|
|
|
Navbar.whyDidYouRender = {
|
|
logOnDifferentValues: false,
|
|
customName: "MainSidebar",
|
|
};
|
|
|
|
export default Navbar;
|