PromucFlow_constructor/app/client/src/index.tsx
Pawan Kumar 8395f5e18f
feat: property pane docking (#7361)
* add tailwindcss

* docked property pane

* uncomment a line

* make entity explorer as drawer on unpin

* remove unused imports

* add pin state in  reducer

* add menu icon in header

* fix widget sidebar

* fix widgets sidebar

* style property pane

* update property pane css

* update icons in property pane

* update property pane header styles

* update spacing

* fix few ui issues

* wip: preview mode

* wip:preview mode

* remove unused import

* comments sidebar in app and edit mode

* fix order of import

* use selected state for property pane

* update scrollbar style

* add classes to sidebar and property pane

* make widgets editor fluid

* make widgets editor fluid and refactor logic

* resize the widgets editor if explorer is pinned

* add shortcut for preview mode

* fix link for tabs in edit mode

* zoom in/zoom out for 0.75

* fix chart widget + table widget crashing

* allow zooming of canvas

* fix weird canvas draw issue + update container for handling zoom

* add actions for is panning

* allow panning with grab cursor

* reset panning + zooming when entering preview mode

* add grabbing cursor when grabbing

* only prevent default when space key is pressed

* dont allow zoom in preview mode

* remove unused imports

* fix dont allow zoom in preview mode

* fix ux of panning on space hit

* make fluid as the default app layout

* chart spec

* fix dropdown_on change spec

* fix add widget table and bind spec

* remove draggable property pane spec

* fix container spec

* fix form widget spec

* fix jest test

* fix the function typo

* remove clicking of close button for property pane in cypress tests

* remove property pane actions test

* fix drag and drop test failing

* add cypress selector id to back button in property pane

* fix toggle js spec

* fix merge conflicts from new design system

* editor header

* fix product updates styles + widget card

* remove all unused imports

* fix dynamic layout spec

* fix entity explorer tab rename test failing

* fix table spec

* fix bind tabletextpagination spec

* fix js object spec

* fix entity explorer rename issue

* fix cypress test

* fix cypress command wrong commit

* fix tab spec

* fix property pane copy tests

* add zoom header

* zoom levels

* make property pane sidebar resizable

* add multi select property pane

* fix widget search bug

* update property pane width in state on drag end

* fix viewer header

* fix editor header

* update editor header + remove zooming

* update small style

* dont allow closing of explorer when resizing

* fix jest test

* fix dropdown widget jest test

* preview test case wip

* add entity explorer pinning tests + preview mode tests

* add tooltip in layout control + add padding bottom in property pane view

* incorporate aakash feedbacks

* fix preview mode margin issue

* remove panning code

* fix cypress failing test

* uncomment jest test

* remove redundant code

* fix maincontainer test

* incorporate review feedbacks

* incorporate aakash feedbacks

* review feedbacks

* incorporate review feedbacks

* incorporate qa feedbacks

* fix dynamic layout spec

* updated test based on latest change

* dsl updated

* Updated dsl

* Updated dsl

* resize deselects widget issue.

* fix canvas height issue

* fix typo

* incorporate qa feedbacks

* incorporate qa feedbacks

* incorporate qa feedbacks

* update color for setting control for widget name

* fix onboarding styles conflicts

* Updated tests

* fix application overflow issue

* updated test method

Co-authored-by: root <root@DESKTOP-9GENCK0.localdomain>
Co-authored-by: Pawan Kumar <pawankumar@Pawans-MacBook-Pro.local>
Co-authored-by: Ashok Kumar M <35134347+marks0351@users.noreply.github.com>
Co-authored-by: Apple <nandan@thinkify.io>
2021-11-23 13:31:46 +05:30

90 lines
2.5 KiB
TypeScript
Executable File

import React from "react";
import "./wdyr";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import "./index.css";
import { ThemeProvider } from "constants/DefaultTheme";
import { appInitializer } from "utils/AppsmithUtils";
import { Slide } from "react-toastify";
import store from "./store";
import { LayersContext, Layers } from "constants/Layers";
import AppRouter from "./AppRouter";
import * as Sentry from "@sentry/react";
import { getCurrentThemeDetails, ThemeMode } from "selectors/themeSelectors";
import { connect } from "react-redux";
import { AppState } from "reducers";
import { setThemeMode } from "actions/themeActions";
import { StyledToastContainer } from "components/ads/Toast";
import localStorage from "utils/localStorage";
import "./assets/styles/index.css";
import "./polyfills/corejs-add-on";
// enable autofreeze only in development
import { setAutoFreeze } from "immer";
const shouldAutoFreeze = process.env.NODE_ENV === "development";
setAutoFreeze(shouldAutoFreeze);
import AppErrorBoundary from "./AppErrorBoundry";
import GlobalStyles from "globalStyles";
appInitializer();
function App() {
return (
<Sentry.ErrorBoundary fallback={"An error has occured"}>
<Provider store={store}>
<LayersContext.Provider value={Layers}>
<ThemedAppWithProps />
</LayersContext.Provider>
</Provider>
</Sentry.ErrorBoundary>
);
}
class ThemedApp extends React.Component<{
currentTheme: any;
setTheme: (themeMode: ThemeMode) => void;
}> {
componentDidMount() {
if (localStorage.getItem("THEME") === "LIGHT") {
this.props.setTheme(ThemeMode.LIGHT);
}
}
render() {
return (
<ThemeProvider theme={this.props.currentTheme}>
<StyledToastContainer
autoClose={5000}
closeButton={false}
draggable={false}
hideProgressBar
pauseOnHover={false}
transition={Slide}
/>
<GlobalStyles />
<AppErrorBoundary>
<AppRouter />
</AppErrorBoundary>
</ThemeProvider>
);
}
}
const mapStateToProps = (state: AppState) => ({
currentTheme: getCurrentThemeDetails(state),
});
const mapDispatchToProps = (dispatch: any) => ({
setTheme: (mode: ThemeMode) => {
dispatch(setThemeMode(mode));
},
});
const ThemedAppWithProps = connect(
mapStateToProps,
mapDispatchToProps,
)(ThemedApp);
ReactDOM.render(<App />, document.getElementById("root"));
// expose store when run in Cypress
if ((window as any).Cypress) {
(window as any).store = store;
}