Remove obsolete UI elements (#178)

* remove sidebar

* remove top row

* remove search component

* remove use-search hook

* remove project overview module

* add current project configuration page

* update side navigation layout

* remove sidebar styles

* reorganize dialog components

frontend/src/App.tsx

@@ -11,7 +11,6 @@ import { Toaster } from "react-hot-toast";
 import { RouteWithLayout } from "./components/layout/Layout";
 import { routes } from "./constants/routes";
 import { UiStateContextProvider } from "./contexts/ui-state.context";
-import { useSearch } from "./hooks/use-search";
 import "./App.scss";
 import { toastOptions } from "./config/toast";
 
@@ -25,28 +24,27 @@ import Events from "./pages/events/Events";
 import { ProjectProvider } from "./contexts/project.context";
 import { ConfirmDialogProvider } from "./contexts/confirm-dialog.context";
 import { QueryClientProvider } from "react-query";
-import { Project } from "./pages/project/Project";
 import { ProjectRequirements } from "./components/requirements/ProjectRequirements";
 import { TimeoutPollingProvider } from "./contexts/timeout-polling.context";
 import {
   PlatformAdapterProvider,
   PlatformAdapterState,
 } from "./contexts/platform-adapter.context";
 import { queryClient } from "./config/react-query";
-import { ConsentDialog } from "./components/consent-dialog/ConsentDialog";
+import { ConsentDialog } from "./components/dialogs/consent/ConsentDialog";
 import { useAnalyticsConsent } from "./hooks/use-analytics-consent";
 import { ServiceRegistry } from "./services/service-registry";
 import { AnalyticEvent } from "./services/analytics.service";
 import { InteractionsPage } from "./pages/interactions/InteractionsPage";
 import { InteractionRegistryProvider } from "pages/interactions/contexts/interaction-registry.context";
+import { Configuration } from "./pages/start/configuration/Configuration";
 
 const BrowserRouterEvents = withRouter(
   ({
     children,
     history,
     location,
   }: RouteComponentProps & { children: ReactElement[] }) => {
-    const { setSearchTerm } = useSearch();
     const { analyticsService } = ServiceRegistry.getInstance();
 
     useEffect(() => {
@@ -55,9 +53,6 @@ const BrowserRouterEvents = withRouter(
           location,
           action,
         });
-        if (action === "PUSH") {
-          setSearchTerm("");
-        }
       });
     }, []);
 
@@ -116,7 +111,10 @@ export const FlowserRoutes = (): ReactElement => {
           path={routes.interactions}
           component={InteractionsPage}
         />
-        <RouteWithLayout path={routes.project} component={Project} />
+        <RouteWithLayout
+          path={routes.configureCurrent}
+          component={Configuration}
+        />
         <Redirect from="*" to={routes.start} />
       </Switch>
       <Toaster

frontend/src/components/action-dialog/ActionDialog.tsx → frontend/src/components/dialogs/action/ActionDialog.tsx

@@ -1,7 +1,7 @@
 import React, { FC, ReactElement } from "react";
 import classes from "./ActionDialog.module.scss";
 import classNames from "classnames";
-import Dialog, { DialogProps } from "../dialog/Dialog";
+import { BaseDialog, DialogProps } from "../base/BaseDialog";
 
 export type ActionDialogProps = {
   title: string;
@@ -17,12 +17,12 @@ export const ActionDialog: FC<ActionDialogProps> = ({
   ...dialogProps
 }) => {
   return (
-    <Dialog {...dialogProps}>
+    <BaseDialog {...dialogProps}>
       <div className={classes.root}>
         <h3>{title}</h3>
         <div className={classNames(classes.body, bodyClass)}>{children}</div>
         {footer && <div className={classes.actions}>{footer}</div>}
       </div>
-    </Dialog>
+    </BaseDialog>
   );
 };

frontend/src/components/dialog/Dialog.tsx → frontend/src/components/dialogs/base/BaseDialog.tsx

@@ -3,17 +3,17 @@ import React, {
   MouseEventHandler,
   ReactElement,
 } from "react";
-import classes from "./Dialog.module.scss";
+import classes from "./BaseDialog.module.scss";
 import classNames from "classnames";
-import Card from "../card/Card";
+import Card from "../../card/Card";
 
 export type DialogProps = {
   children: ReactElement[] | ReactElement;
   onClose: MouseEventHandler<HTMLDivElement>;
   className?: string;
 };
 
-const Dialog: FunctionComponent<DialogProps> = ({
+export const BaseDialog: FunctionComponent<DialogProps> = ({
   children,
   onClose,
   className,
@@ -37,5 +37,3 @@ const Dialog: FunctionComponent<DialogProps> = ({
     </div>
   );
 };
-
-export default Dialog;

frontend/src/components/confirm-dialog/ConfirmDialog.tsx → frontend/src/components/dialogs/confirmation/ConfirmationDialog.tsx

@@ -1,6 +1,6 @@
 import React, { FunctionComponent, useState } from "react";
-import Button from "../buttons/button/Button";
-import { ActionDialog, ActionDialogProps } from "../action-dialog/ActionDialog";
+import Button from "../../buttons/button/Button";
+import { ActionDialog, ActionDialogProps } from "../action/ActionDialog";
 
 export type ConfirmDialogProps = ActionDialogProps & {
   onClose: () => void | Promise<void>;
@@ -11,7 +11,7 @@ export type ConfirmDialogProps = ActionDialogProps & {
   title: string;
 };
 
-const ConfirmDialog: FunctionComponent<ConfirmDialogProps> = ({
+export const ConfirmationDialog: FunctionComponent<ConfirmDialogProps> = ({
   onConfirm,
   onClose,
   title,
@@ -52,5 +52,3 @@ const ConfirmDialog: FunctionComponent<ConfirmDialogProps> = ({
     </ActionDialog>
   );
 };
-
-export default ConfirmDialog;

frontend/src/components/consent-dialog/ConsentDialog.tsx → frontend/src/components/dialogs/consent/ConsentDialog.tsx

@@ -1,11 +1,11 @@
 import React, { ReactElement, useState } from "react";
-import Dialog from "../dialog/Dialog";
+import { BaseDialog } from "../base/BaseDialog";
 import classes from "./ConsentDialog.module.scss";
-import logo from "../../assets/images/logo-foreground.svg";
+import logo from "../../../assets/images/logo-foreground.svg";
 import ToggleButton, {
   ToggleButtonProps,
-} from "../buttons/toggle-button/ToggleButton";
-import Button from "../buttons/button/Button";
+} from "../../buttons/toggle-button/ToggleButton";
+import Button from "../../buttons/button/Button";
 
 export type ConsentDialogProps = {
   consent: boolean;
@@ -21,7 +21,7 @@ export function ConsentDialog({
   const [tempConsent, setTempConsent] = useState(consent);
 
   return (
-    <Dialog onClose={onClose} className={classes.modal}>
+    <BaseDialog onClose={onClose} className={classes.modal}>
       <div className={classes.root}>
         <div className={classes.header}>
           <img alt="Flowser logo" src={logo} className={classes.logo} />
@@ -53,7 +53,7 @@ export function ConsentDialog({
           <Button onClick={() => setConsent(tempConsent)}>Continue</Button>
         </div>
       </div>
-    </Dialog>
+    </BaseDialog>
   );
 }
 

frontend/src/components/snapshot-dialog/SnapshotDialog.tsx → frontend/src/components/dialogs/snapshot/SnapshotDialog.tsx

@@ -1,12 +1,12 @@
 import React, { FC, useState } from "react";
-import Button from "../buttons/button/Button";
+import Button from "../../buttons/button/Button";
 import classes from "./SnapshotDialog.module.scss";
 import toast from "react-hot-toast";
-import { ServiceRegistry } from "../../services/service-registry";
-import Input from "../input/Input";
-import { ActionDialog } from "../action-dialog/ActionDialog";
-import { useCurrentProjectId, useGetCurrentProject } from "../../hooks/use-api";
-import { useErrorHandler } from "../../hooks/use-error-handler";
+import { ServiceRegistry } from "../../../services/service-registry";
+import Input from "../../input/Input";
+import { ActionDialog } from "../action/ActionDialog";
+import { useCurrentProjectId } from "../../../hooks/use-api";
+import { useErrorHandler } from "../../../hooks/use-error-handler";
 
 export type SnapshotDialogProps = {
   show?: boolean;
@@ -15,7 +15,6 @@ export type SnapshotDialogProps = {
 
 export const SnapshotDialog: FC<SnapshotDialogProps> = ({ show, setShow }) => {
   const projectId = useCurrentProjectId();
-  const { data } = useGetCurrentProject();
   const { handleError } = useErrorHandler(SnapshotDialog.name);
   const { snapshotService } = ServiceRegistry.getInstance();
   const [loading, setLoading] = useState(false);