From 81cb1170d8a8011a059abe6c87d4ea057818c616 Mon Sep 17 00:00:00 2001 From: Bart Date: Mon, 14 Aug 2023 11:21:25 +0200 Subject: [PATCH 1/9] remove sidebar --- frontend/src/assets/icons/create-snapshot.svg | 9 - frontend/src/assets/icons/send-tx.svg | 12 -- frontend/src/assets/icons/settings-circle.svg | 8 - frontend/src/assets/icons/settings.svg | 2 +- frontend/src/assets/icons/share-feedback.svg | 6 - .../side-menu-closed-emulator-not-working.svg | 9 - .../src/assets/icons/side-menu-closed.svg | 3 - .../side-menu-open-emulator-not-working.svg | 16 -- frontend/src/assets/icons/side-menu-open.svg | 10 - frontend/src/assets/icons/switch.svg | 11 +- frontend/src/components/icons/Icons.tsx | 6 + frontend/src/components/layout/Layout.tsx | 10 +- .../process/ManagedProcess.module.scss | 55 ++++++ .../src/components/process/ManagedProcess.tsx | 82 ++++++++ .../side-navigation/SideNavigation.tsx | 19 ++ frontend/src/components/sidebar/SideBar.tsx | 178 ------------------ frontend/src/components/top-row/TopRow.tsx | 32 +--- 17 files changed, 168 insertions(+), 300 deletions(-) delete mode 100644 frontend/src/assets/icons/create-snapshot.svg delete mode 100644 frontend/src/assets/icons/send-tx.svg delete mode 100644 frontend/src/assets/icons/settings-circle.svg delete mode 100644 frontend/src/assets/icons/share-feedback.svg delete mode 100644 frontend/src/assets/icons/side-menu-closed-emulator-not-working.svg delete mode 100644 frontend/src/assets/icons/side-menu-closed.svg delete mode 100644 frontend/src/assets/icons/side-menu-open-emulator-not-working.svg delete mode 100644 frontend/src/assets/icons/side-menu-open.svg create mode 100644 frontend/src/components/process/ManagedProcess.module.scss create mode 100644 frontend/src/components/process/ManagedProcess.tsx delete mode 100644 frontend/src/components/sidebar/SideBar.tsx diff --git a/frontend/src/assets/icons/create-snapshot.svg b/frontend/src/assets/icons/create-snapshot.svg deleted file mode 100644 index 5b8dc8d1..00000000 --- a/frontend/src/assets/icons/create-snapshot.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/frontend/src/assets/icons/send-tx.svg b/frontend/src/assets/icons/send-tx.svg deleted file mode 100644 index 9fcec86f..00000000 --- a/frontend/src/assets/icons/send-tx.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - - - diff --git a/frontend/src/assets/icons/settings-circle.svg b/frontend/src/assets/icons/settings-circle.svg deleted file mode 100644 index a37dfb7f..00000000 --- a/frontend/src/assets/icons/settings-circle.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/frontend/src/assets/icons/settings.svg b/frontend/src/assets/icons/settings.svg index 81b28027..69953b5a 100644 --- a/frontend/src/assets/icons/settings.svg +++ b/frontend/src/assets/icons/settings.svg @@ -1,4 +1,4 @@ - + diff --git a/frontend/src/assets/icons/share-feedback.svg b/frontend/src/assets/icons/share-feedback.svg deleted file mode 100644 index 5737ff4f..00000000 --- a/frontend/src/assets/icons/share-feedback.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/frontend/src/assets/icons/side-menu-closed-emulator-not-working.svg b/frontend/src/assets/icons/side-menu-closed-emulator-not-working.svg deleted file mode 100644 index 01e17d67..00000000 --- a/frontend/src/assets/icons/side-menu-closed-emulator-not-working.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/frontend/src/assets/icons/side-menu-closed.svg b/frontend/src/assets/icons/side-menu-closed.svg deleted file mode 100644 index 70004129..00000000 --- a/frontend/src/assets/icons/side-menu-closed.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/frontend/src/assets/icons/side-menu-open-emulator-not-working.svg b/frontend/src/assets/icons/side-menu-open-emulator-not-working.svg deleted file mode 100644 index 8e43be67..00000000 --- a/frontend/src/assets/icons/side-menu-open-emulator-not-working.svg +++ /dev/null @@ -1,16 +0,0 @@ - - - - - - - - - - - - - - - - diff --git a/frontend/src/assets/icons/side-menu-open.svg b/frontend/src/assets/icons/side-menu-open.svg deleted file mode 100644 index 4db1e9c8..00000000 --- a/frontend/src/assets/icons/side-menu-open.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - diff --git a/frontend/src/assets/icons/switch.svg b/frontend/src/assets/icons/switch.svg index 2e707dee..71585563 100644 --- a/frontend/src/assets/icons/switch.svg +++ b/frontend/src/assets/icons/switch.svg @@ -1,10 +1,3 @@ - - - - - - - - - + + diff --git a/frontend/src/components/icons/Icons.tsx b/frontend/src/components/icons/Icons.tsx index d457c51f..b3b75c0b 100644 --- a/frontend/src/components/icons/Icons.tsx +++ b/frontend/src/components/icons/Icons.tsx @@ -6,6 +6,7 @@ import { ReactComponent as LogoRound } from "../../assets/icons/logo_round.svg"; import { ReactComponent as Star } from "../../assets/icons/star.svg"; import { ReactComponent as Transaction } from "../../assets/icons/transaction.svg"; import { ReactComponent as ArtistPalette } from "../../assets/icons/artist_palette.svg"; +import { ReactComponent as Settings } from "../../assets/icons/settings.svg"; import { ReactComponent as CircleArrowLeft } from "../../assets/icons/circle_arrow_left.svg"; import { ReactComponent as Plus } from "../../assets/icons/plus.svg"; import { ReactComponent as Close } from "../../assets/icons/close.svg"; @@ -15,6 +16,8 @@ import { ReactComponent as Cancel } from "../../assets/icons/cancel.svg"; import { ReactComponent as Link } from "../../assets/icons/link.svg"; import { ReactComponent as Script } from "../../assets/icons/script.svg"; import { ReactComponent as QuestionMark } from "../../assets/icons/question-mark.svg"; +import { ReactComponent as Switch } from "../../assets/icons/switch.svg"; +import { ReactComponent as Restart } from "../../assets/icons/restart.svg"; export const FlowserIcon = { Account, @@ -27,6 +30,9 @@ export const FlowserIcon = { Script, QuestionMark, ArtistPalette, + Settings, + Switch, + Restart, CircleArrowLeft, Plus, Close, diff --git a/frontend/src/components/layout/Layout.tsx b/frontend/src/components/layout/Layout.tsx index 0275b2fb..8eb110e8 100644 --- a/frontend/src/components/layout/Layout.tsx +++ b/frontend/src/components/layout/Layout.tsx @@ -1,8 +1,7 @@ -import React, { FC, FunctionComponent, useState } from "react"; +import React, { FC, FunctionComponent } from "react"; import classes from "./Layout.module.scss"; import { TopRow } from "../top-row/TopRow"; import Logs from "../../pages/logs/Logs"; -import { SideBar } from "components/sidebar/SideBar"; import { Route, RouteProps, useHistory, useLocation } from "react-router-dom"; import { ReactComponent as IconBackButton } from "../../assets/icons/back-button.svg"; import classNames from "classnames"; @@ -36,18 +35,13 @@ export const RouteWithLayout: FC = (props) => ( const Layout: FunctionComponent = ({ children }) => { const location = useLocation(); const showMargin = !location.pathname.startsWith(routes.interactions); - const [isSidebarOpen, setIsSidebarOpen] = useState(false); - const toggleSidebar = () => { - setIsSidebarOpen((prevState) => !prevState); - }; return (
- + -
setRestarting(false), fakeRestartDelay); + } + } + + return ( +
+ {process.name} +
+ + + + +
+
+ ); +} + +function ManagedProcessStatus({ + state, + isRestarting, +}: { + isRestarting: boolean; + state: ManagedProcessState; +}) { + const isNotRunning = + state === ManagedProcessState.MANAGED_PROCESS_STATE_NOT_RUNNING; + const isRunning = state === ManagedProcessState.MANAGED_PROCESS_STATE_RUNNING; + const isError = state === ManagedProcessState.MANAGED_PROCESS_STATE_ERROR; + if (isRestarting) { + return ; + } + return ( +
+ ); +} diff --git a/frontend/src/components/side-navigation/SideNavigation.tsx b/frontend/src/components/side-navigation/SideNavigation.tsx index f4b9ca4c..d507e660 100644 --- a/frontend/src/components/side-navigation/SideNavigation.tsx +++ b/frontend/src/components/side-navigation/SideNavigation.tsx @@ -5,12 +5,18 @@ import { NavLink } from "react-router-dom"; import { FlowserIcon } from "components/icons/Icons"; import { SizedBox } from "../sized-box/SizedBox"; import classNames from "classnames"; +import { useGetCurrentProject } from "../../hooks/use-api"; +import { useProjectActions } from "../../contexts/project.context"; type SideNavigationProps = { className?: string; }; export function SideNavigation(props: SideNavigationProps): ReactElement { + const { switchProject } = useProjectActions(); + const { data: currentProjectData } = useGetCurrentProject(); + const { project: currentProject } = currentProjectData ?? {}; + return (
@@ -22,6 +28,17 @@ export function SideNavigation(props: SideNavigationProps): ReactElement { + {currentProject && ( + + )} +
); } @@ -34,6 +51,7 @@ function FlowserLogo() { function ProjectLink(props: { to: string; icon: React.FunctionComponent>; + onClick?: () => void; }) { const Icon = props.icon; const iconSize = 20; @@ -42,6 +60,7 @@ function ProjectLink(props: { to={props.to} className={classes.inactiveLink} activeClassName={classes.activeLink} + onClick={props.onClick} > diff --git a/frontend/src/components/sidebar/SideBar.tsx b/frontend/src/components/sidebar/SideBar.tsx deleted file mode 100644 index 5a48597a..00000000 --- a/frontend/src/components/sidebar/SideBar.tsx +++ /dev/null @@ -1,178 +0,0 @@ -import React, { ReactElement, useCallback, useState } from "react"; -import Drawer from "react-modern-drawer"; -import "react-modern-drawer/dist/index.css"; -import classes from "./SideBar.module.scss"; -import { ReactComponent as SettingsIcon } from "../../assets/icons/settings-circle.svg"; -import { ReactComponent as ShareFeedbackIcon } from "../../assets/icons/share-feedback.svg"; -import { ReactComponent as SwitchIcon } from "../../assets/icons/switch.svg"; -import { ReactComponent as PlusIcon } from "../../assets/icons/plus-round.svg"; -import { ReactComponent as CreateSnapshotIcon } from "../../assets/icons/create-snapshot.svg"; -import { ReactComponent as RestartIcon } from "../../assets/icons/restart.svg"; -import { SimpleButton } from "../buttons/simple-button/SimpleButton"; -import { - useGetCurrentProject, - useGetPollingProcesses, -} from "../../hooks/use-api"; -import { useHistory } from "react-router-dom"; -import { useProjectActions } from "../../contexts/project.context"; -import { routes } from "../../constants/routes"; -import classNames from "classnames"; -import { ManagedProcess, ManagedProcessState } from "@flowser/shared"; -import { ServiceRegistry } from "../../services/service-registry"; -import { useErrorHandler } from "../../hooks/use-error-handler"; -import { Spinner } from "../spinner/Spinner"; -import { ActionButton } from "../buttons/action-button/ActionButton"; -import { useAnalytics } from "../../hooks/use-analytics"; -import { AnalyticEvent } from "../../services/analytics.service"; - -export type Sidebar = { - toggled: boolean; - toggleSidebar: () => void; -}; - -export function SideBar({ toggled, toggleSidebar }: Sidebar): ReactElement { - const history = useHistory(); - const { track } = useAnalytics(); - const { data: currentProjectData } = useGetCurrentProject(); - const { switchProject, createSnapshot } = useProjectActions(); - const { data: processes } = useGetPollingProcesses(); - const { project: currentProject } = currentProjectData ?? {}; - const createProject = useCallback(() => { - history.push(routes.configure); - }, []); - - const openSettings = () => { - track(AnalyticEvent.CLICK_PROJECT_SETTINGS); - - history.push(`/start/configure/${currentProject?.id}`); - }; - - return ( - -
-
- FLOWSER - } - /> - } - /> - } - /> - { - window.open("mailto:info.flowser@gmail.com"); - }} - title="Share Feedback" - icon={} - /> -
- EMULATOR - { - track(AnalyticEvent.CLICK_CREATE_SNAPSHOT); - toggleSidebar(); - createSnapshot(); - }} - title="Create snapshot" - icon={} - /> -
- PROCESSES -
- {processes.length > 0 ? ( - processes.map((process) => ( - - )) - ) : ( - - No processes are running within Flowser - - )} -
-
-
- - ); -} - -function ManagedProcessItem({ process }: { process: ManagedProcess }) { - const { track } = useAnalytics(); - const { processesService } = ServiceRegistry.getInstance(); - const [isRestarting, setRestarting] = useState(false); - const { handleError } = useErrorHandler(ManagedProcessItem.name); - - async function onRestart() { - track(AnalyticEvent.RESTART_PROCESS, { - processId: process.id, - processName: process.name, - }); - - setRestarting(true); - try { - await processesService.restart({ processId: process.id }); - } catch (e) { - handleError(e); - } finally { - // The restart in most cases happens so quickly that it isn't even visible in the UI - // This could fool the user that nothing happened, so let's fake a larger delay. - const fakeRestartDelay = 500; - setTimeout(() => setRestarting(false), fakeRestartDelay); - } - } - - return ( -
- {process.name} -
- - - - -
-
- ); -} - -function ManagedProcessStatus({ - state, - isRestarting, -}: { - isRestarting: boolean; - state: ManagedProcessState; -}) { - const isNotRunning = - state === ManagedProcessState.MANAGED_PROCESS_STATE_NOT_RUNNING; - const isRunning = state === ManagedProcessState.MANAGED_PROCESS_STATE_RUNNING; - const isError = state === ManagedProcessState.MANAGED_PROCESS_STATE_ERROR; - if (isRestarting) { - return ; - } - return ( -
- ); -} diff --git a/frontend/src/components/top-row/TopRow.tsx b/frontend/src/components/top-row/TopRow.tsx index 1aa4f3ae..ccf12b0d 100644 --- a/frontend/src/components/top-row/TopRow.tsx +++ b/frontend/src/components/top-row/TopRow.tsx @@ -1,42 +1,12 @@ import React, { FunctionComponent } from "react"; import classes from "./TopRow.module.scss"; -import Button from "../buttons/button/Button"; import Search from "../search/Search"; -import sideMenuOpen from "../../assets/icons/side-menu-open.svg"; -import sideMenuClosed from "../../assets/icons/side-menu-closed.svg"; -import sideMenuClosedEmuNoWork from "../../assets/icons/side-menu-closed-emulator-not-working.svg"; -import sideMenuOpenEmuNoWork from "../../assets/icons/side-menu-open-emulator-not-working.svg"; -import classNames from "classnames"; - -export const TopRow: FunctionComponent<{ - isSidebarOpen: boolean; - toggleSidebar: () => void; -}> = (props) => { - const isEmulatorWorking = true; - const isSidebarOpen = props.isSidebarOpen; +export const TopRow: FunctionComponent = () => { return (
-
); From 2c06eba96f67277c8c6b1bb5e8894a1c69b6de0d Mon Sep 17 00:00:00 2001 From: Bart Date: Mon, 14 Aug 2023 11:22:14 +0200 Subject: [PATCH 2/9] remove top row --- frontend/src/components/layout/Layout.tsx | 2 - .../src/components/top-row/TopRow.module.scss | 97 ------------------- frontend/src/components/top-row/TopRow.tsx | 13 --- 3 files changed, 112 deletions(-) delete mode 100644 frontend/src/components/top-row/TopRow.module.scss delete mode 100644 frontend/src/components/top-row/TopRow.tsx diff --git a/frontend/src/components/layout/Layout.tsx b/frontend/src/components/layout/Layout.tsx index 8eb110e8..3e290cc8 100644 --- a/frontend/src/components/layout/Layout.tsx +++ b/frontend/src/components/layout/Layout.tsx @@ -1,6 +1,5 @@ import React, { FC, FunctionComponent } from "react"; import classes from "./Layout.module.scss"; -import { TopRow } from "../top-row/TopRow"; import Logs from "../../pages/logs/Logs"; import { Route, RouteProps, useHistory, useLocation } from "react-router-dom"; import { ReactComponent as IconBackButton } from "../../assets/icons/back-button.svg"; @@ -40,7 +39,6 @@ const Layout: FunctionComponent = ({ children }) => {
-
* { - box-sizing: border-box; - height: calc(100% - 25px); - } - - .searchBox { - width: min-content; - height: 40px; - } - - .userButton { - width: 35px; - height: 35px; - & > * { - width: 100%; - height: 100%; - } - } - - .sidebarButton { - background: none; - border: none; - padding: 0 0 0 15px; - - .emulatorWorking { - padding-right: 4px; - } - - .sidebarOpen { - padding-left: 6px; - } - } - } -} - -.settingsIcon { - fill: $background; - width: 18px; - height: 18px; -} - -.txButton { - background: $blue !important; - border-color: $blue !important; -} - -.flowIcon { - height: 26px; - width: 26px; - margin-right: $spacing-s * 0.5 !important; - [class="flowPrimary"], - .flowPrimary { - fill: transparent; - } -} - -.searchBar { - align-self: center; - margin-left: auto; - width: 531px; -} diff --git a/frontend/src/components/top-row/TopRow.tsx b/frontend/src/components/top-row/TopRow.tsx deleted file mode 100644 index ccf12b0d..00000000 --- a/frontend/src/components/top-row/TopRow.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React, { FunctionComponent } from "react"; -import classes from "./TopRow.module.scss"; -import Search from "../search/Search"; - -export const TopRow: FunctionComponent = () => { - return ( -
-
- -
-
- ); -}; From 9014b23f939b0413046ade19e240604c5278a47e Mon Sep 17 00:00:00 2001 From: Bart Date: Mon, 14 Aug 2023 11:30:22 +0200 Subject: [PATCH 3/9] remove search component --- frontend/src/components/search/Search.tsx | 30 ------------------- frontend/src/pages/logs/Logs.tsx | 17 ++++------- .../src/pages/start/main/Main.module.scss | 17 +---------- frontend/src/pages/start/main/Main.tsx | 4 --- 4 files changed, 7 insertions(+), 61 deletions(-) delete mode 100644 frontend/src/components/search/Search.tsx diff --git a/frontend/src/components/search/Search.tsx b/frontend/src/components/search/Search.tsx deleted file mode 100644 index 023016a0..00000000 --- a/frontend/src/components/search/Search.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import React, { FunctionComponent } from "react"; -import { useSearch } from "../../hooks/use-search"; -import { SearchInput } from "../search-input/SearchInput"; - -export type SearchProps = { - className?: string; - context?: string; -}; - -/** - * @deprecated Will be removed in the future. - * Use `SearchInput` component instead. - */ -const Search: FunctionComponent = ({ - className, - context = "default", -}) => { - const { searchTerm, setSearchTerm, placeholder } = useSearch(context); - - return ( - - ); -}; - -export default Search; diff --git a/frontend/src/pages/logs/Logs.tsx b/frontend/src/pages/logs/Logs.tsx index 282a17f1..4c6d26a9 100644 --- a/frontend/src/pages/logs/Logs.tsx +++ b/frontend/src/pages/logs/Logs.tsx @@ -7,13 +7,11 @@ import React, { useState, } from "react"; import classes from "./Logs.module.scss"; -import Search from "../../components/search/Search"; import { ReactComponent as ExpandIcon } from "../../assets/icons/expand.svg"; import { ReactComponent as ShrinkIcon } from "../../assets/icons/shrink.svg"; import { ReactComponent as LogsIcon } from "../../assets/icons/logs.svg"; import { LogDrawerSize, useLogDrawer } from "../../hooks/use-log-drawer"; import CaretIcon from "../../components/caret-icon/CaretIcon"; -import { useSearch } from "../../hooks/use-search"; import { useFilterData } from "../../hooks/use-filter-data"; import { useMouseMove } from "../../hooks/use-mouse-move"; import { useGetPollingOutputs } from "../../hooks/use-api"; @@ -24,8 +22,7 @@ import { SimpleButton } from "../../components/buttons/simple-button/SimpleButto import { TextUtils } from "../../utils/text-utils"; import { Callout } from "../../components/callout/Callout"; import { CommonUtils } from "../../utils/common-utils"; - -const SEARCH_CONTEXT_NAME = "logs"; +import { SearchInput } from "../../components/search-input/SearchInput"; const Logs: FunctionComponent = () => { const [trackMousePosition, setTrackMousePosition] = useState(false); @@ -40,7 +37,7 @@ const Logs: FunctionComponent = () => { const scrollHeight = logWrapperElement?.scrollHeight ?? 0; const scrollDistanceToBottom = Math.abs(scrollBottom - scrollHeight); const shouldScrollToBottom = scrollDistanceToBottom < 10; - const { searchTerm, setPlaceholder } = useSearch(SEARCH_CONTEXT_NAME); + const [searchTerm, setSearchTerm] = useState(""); const { logs, tailLogs } = useRelevantLogs({ searchTerm, tailSize: 5, @@ -68,10 +65,6 @@ const Logs: FunctionComponent = () => { } }; - useEffect(() => { - setPlaceholder("Search logs"); - }, []); - useEffect(() => { scrollToBottom(); }, [logDrawerSize, shouldScrollToBottom]); @@ -164,9 +157,11 @@ const Logs: FunctionComponent = () => {
{logDrawerSize !== "tiny" && ( - )}
diff --git a/frontend/src/pages/start/main/Main.module.scss b/frontend/src/pages/start/main/Main.module.scss index 38d1acfd..82ee925c 100644 --- a/frontend/src/pages/start/main/Main.module.scss +++ b/frontend/src/pages/start/main/Main.module.scss @@ -125,25 +125,10 @@ .projectList { flex: 1; - .projectListHeader { - box-sizing: border-box; - height: 162px; - width: 100%; - padding: 23px 20px; - - display: flex; - flex-direction: row; - justify-content: flex-start; - align-items: flex-end; - - .projectSearch { - width: 400px; - } - } .projectListBody { list-style-type: none; - padding-left: 23px; + padding: $spacing-l; display: flex; flex-direction: column; diff --git a/frontend/src/pages/start/main/Main.tsx b/frontend/src/pages/start/main/Main.tsx index d81adbf2..fec859d9 100644 --- a/frontend/src/pages/start/main/Main.tsx +++ b/frontend/src/pages/start/main/Main.tsx @@ -21,7 +21,6 @@ import { } from "../../../hooks/use-api"; import { Project } from "@flowser/shared"; import classNames from "classnames"; -import Search from "../../../components/search/Search"; import { useSearch } from "../../../hooks/use-search"; import moment from "moment"; import { useConfirmDialog } from "../../../contexts/confirm-dialog.context"; @@ -184,9 +183,6 @@ function ProjectsListContent() { return (
-
- -
    {filteredProjects.map((project) => (
  • From 6d04682c96a89d3208e0728fe0302fae2e97a8ae Mon Sep 17 00:00:00 2001 From: Bart Date: Mon, 14 Aug 2023 11:34:50 +0200 Subject: [PATCH 4/9] remove use-search hook --- frontend/src/App.tsx | 5 --- frontend/src/hooks/use-search.ts | 38 ------------------ .../src/pages/accounts/details/Details.tsx | 39 ++++--------------- frontend/src/pages/accounts/main/Main.tsx | 8 +--- frontend/src/pages/blocks/details/Details.tsx | 23 ++++------- frontend/src/pages/blocks/main/Main.tsx | 7 +--- frontend/src/pages/contracts/main/Main.tsx | 7 +--- frontend/src/pages/events/Events.tsx | 7 +--- frontend/src/pages/start/main/Main.tsx | 12 +----- frontend/src/pages/transactions/main/Main.tsx | 7 +--- 10 files changed, 21 insertions(+), 132 deletions(-) delete mode 100644 frontend/src/hooks/use-search.ts diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index f5b33291..aa4eea66 100644 --- a/frontend/src/App.tsx +++ b/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"; @@ -46,7 +45,6 @@ const BrowserRouterEvents = withRouter( 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(""); - } }); }, []); diff --git a/frontend/src/hooks/use-search.ts b/frontend/src/hooks/use-search.ts deleted file mode 100644 index 97857a7a..00000000 --- a/frontend/src/hooks/use-search.ts +++ /dev/null @@ -1,38 +0,0 @@ -import { useCallback } from "react"; -import { UiState, useUiStateContext } from "../contexts/ui-state.context"; - -export interface UseSearchHook { - setSearchTerm: (term: string) => void; - setPlaceholder: (placeholder: string) => void; - updateSearchBar: (placeholder: string, disabled: boolean) => void; - searchTerm: string; - placeholder: string; -} - -export const useSearch = (context = "default"): UseSearchHook => { - const [state, setState] = useUiStateContext(); - - const setSearchTerm = (term: string) => - setState((state: UiState) => ({ - ...state, - searchTerm: { ...state.searchTerm, [context]: term }, - })); - - const setPlaceholder = (placeholder: string) => - setState((state: UiState) => ({ - ...state, - placeholder: { ...state.placeholder, [context]: placeholder }, - })); - - const updateSearchBar = useCallback((placeholder: string) => { - setPlaceholder(placeholder); - }, []); - - return { - setSearchTerm, - setPlaceholder, - updateSearchBar, - searchTerm: state.searchTerm[context] || "", - placeholder: state.placeholder[context] || "", - }; -}; diff --git a/frontend/src/pages/accounts/details/Details.tsx b/frontend/src/pages/accounts/details/Details.tsx index d9547411..9e66897b 100644 --- a/frontend/src/pages/accounts/details/Details.tsx +++ b/frontend/src/pages/accounts/details/Details.tsx @@ -1,6 +1,5 @@ import React, { FunctionComponent, useEffect, useState } from "react"; import { Breadcrumb, useNavigation } from "../../../hooks/use-navigation"; -import { useSearch } from "../../../hooks/use-search"; import classes from "./Details.module.scss"; import Value from "../../../components/value/Value"; import Label from "../../../components/label/Label"; @@ -12,7 +11,6 @@ import { } from "../../../components/details-tabs/DetailsTabs"; import { NavLink, useParams } from "react-router-dom"; import FullScreenLoading from "../../../components/fullscreen-loading/FullScreenLoading"; -import Fragment from "../../../components/fragment/Fragment"; import { useGetAccount, useGetPollingContractsByAccount, @@ -116,7 +114,6 @@ const Details: FunctionComponent = () => { const { accountId } = useParams(); const urlQueryParams = useUrlQuery(); const focusedStorageId = urlQueryParams.get("focusedStorageId"); - const { updateSearchBar } = useSearch(); const { setBreadcrumbs } = useNavigation(); const { showNavigationDrawer } = useNavigation(); const { data, isLoading } = useGetAccount(accountId); @@ -249,26 +246,14 @@ const Details: FunctionComponent = () => { ))}
- - updateSearchBar("search for transactions", !transactions.length) - } - > + > enableIntroAnimations={enableDetailsIntroAnimation} columns={transactionTableColumns} data={transactions} /> - - updateSearchBar("search for contracts", !contracts.length) - } - > + > enableIntroAnimations={enableDetailsIntroAnimation} columns={columnsContract} @@ -276,23 +261,15 @@ const Details: FunctionComponent = () => { /> - updateSearchBar("search for keys", !keys.length)} - > - > - enableIntroAnimations={enableDetailsIntroAnimation} - columns={columnsKeys} - data={keys} - /> - + > + enableIntroAnimations={enableDetailsIntroAnimation} + columns={columnsKeys} + data={keys} + /> {!!account.code && ( - updateSearchBar("search for scripts", true)} - > - - + )} diff --git a/frontend/src/pages/accounts/main/Main.tsx b/frontend/src/pages/accounts/main/Main.tsx index 37c4323d..a991a796 100644 --- a/frontend/src/pages/accounts/main/Main.tsx +++ b/frontend/src/pages/accounts/main/Main.tsx @@ -2,8 +2,6 @@ import React, { FunctionComponent, useEffect } from "react"; import Label from "../../../components/label/Label"; import Value from "../../../components/value/Value"; import { useNavigation } from "../../../hooks/use-navigation"; -import { useSearch } from "../../../hooks/use-search"; -import { useFilterData } from "../../../hooks/use-filter-data"; import { useGetPollingAccounts } from "../../../hooks/use-api"; import Table from "../../../components/table/Table"; import { createColumnHelper } from "@tanstack/react-table"; @@ -50,23 +48,19 @@ const columns = [ ]; const Main: FunctionComponent = () => { - const { searchTerm, setPlaceholder } = useSearch(); const { showNavigationDrawer } = useNavigation(); const { data: accounts, firstFetch, error } = useGetPollingAccounts(); useEffect(() => { - setPlaceholder("Search accounts"); showNavigationDrawer(false); }, []); - const { filteredData } = useFilterData(accounts, searchTerm); - return ( > isInitialLoading={firstFetch} error={error} columns={columns} - data={filteredData} + data={accounts} /> ); }; diff --git a/frontend/src/pages/blocks/details/Details.tsx b/frontend/src/pages/blocks/details/Details.tsx index ebfccb94..30b7f8d0 100644 --- a/frontend/src/pages/blocks/details/Details.tsx +++ b/frontend/src/pages/blocks/details/Details.tsx @@ -1,6 +1,5 @@ import React, { FunctionComponent, useEffect } from "react"; import { NavLink, useParams } from "react-router-dom"; -import { useSearch } from "../../../hooks/use-search"; import { Breadcrumb, useNavigation } from "../../../hooks/use-navigation"; import Label from "../../../components/label/Label"; import Value from "../../../components/value/Value"; @@ -10,7 +9,6 @@ import { DetailsTabs, } from "../../../components/details-tabs/DetailsTabs"; import FullScreenLoading from "../../../components/fullscreen-loading/FullScreenLoading"; -import Fragment from "../../../components/fragment/Fragment"; import { useGetBlock, useGetTransactionsByBlock } from "../../../hooks/use-api"; import { FlowUtils } from "../../../utils/flow-utils"; import { createColumnHelper } from "@tanstack/table-core"; @@ -89,7 +87,6 @@ const txTableColumns = [ const Details: FunctionComponent = () => { const { blockId } = useParams(); - const { updateSearchBar } = useSearch(); const { setBreadcrumbs } = useNavigation(); const { showNavigationDrawer } = useNavigation(); const breadcrumbs: Breadcrumb[] = [ @@ -139,19 +136,13 @@ const Details: FunctionComponent = () => { - - updateSearchBar("search for transactions", !transactions.length) - } - > - {transactions && ( - > - data={transactions} - columns={txTableColumns} - enableIntroAnimations={enableDetailsIntroAnimation} - /> - )} - + {transactions && ( + > + data={transactions} + columns={txTableColumns} + enableIntroAnimations={enableDetailsIntroAnimation} + /> + )} >(); const Main: FunctionComponent = () => { - const { searchTerm, setPlaceholder } = useSearch(); const { showNavigationDrawer } = useNavigation(); const { checkoutBlock } = useProjectActions(); const { data: blocks, firstFetch, error } = useGetPollingBlocks(); - const { filteredData } = useFilterData(blocks, searchTerm); const { data: emulatorSnapshots } = useGetPollingEmulatorSnapshots(); const snapshotLookupByBlockId = useMemo( () => @@ -43,7 +39,6 @@ const Main: FunctionComponent = () => { ); useEffect(() => { - setPlaceholder("Search blocks"); showNavigationDrawer(false); }, []); @@ -130,7 +125,7 @@ const Main: FunctionComponent = () => { > isInitialLoading={firstFetch} error={error} - data={filteredData} + data={blocks} columns={columns} renderCustomHeader={(headerGroup) => ( { - const { searchTerm, setPlaceholder } = useSearch(); const { showNavigationDrawer } = useNavigation(); const { data, firstFetch, error } = useGetPollingContracts(); - const { filteredData } = useFilterData(data, searchTerm); useEffect(() => { - setPlaceholder("Search contracts"); showNavigationDrawer(false); }, []); @@ -70,7 +65,7 @@ const Main: FunctionComponent = () => { isInitialLoading={firstFetch} error={error} columns={columns} - data={filteredData} + data={data} /> ); }; diff --git a/frontend/src/pages/events/Events.tsx b/frontend/src/pages/events/Events.tsx index 140f84f7..28826ac3 100644 --- a/frontend/src/pages/events/Events.tsx +++ b/frontend/src/pages/events/Events.tsx @@ -6,8 +6,6 @@ import Label from "../../components/label/Label"; import Value from "../../components/value/Value"; import { NavLink } from "react-router-dom"; import MiddleEllipsis from "../../components/ellipsis/MiddleEllipsis"; -import { useFilterData } from "../../hooks/use-filter-data"; -import { useSearch } from "../../hooks/use-search"; import CaretIcon from "../../components/caret-icon/CaretIcon"; import { useGetPollingEvents } from "../../hooks/use-api"; import { createColumnHelper } from "@tanstack/table-core"; @@ -60,9 +58,7 @@ const subTableColumns = [ const Events: FunctionComponent = () => { const [openedLog, setOpenedLog] = useState(""); const { showNavigationDrawer } = useNavigation(); - const { searchTerm, setPlaceholder } = useSearch(); const { data, firstFetch, error } = useGetPollingEvents(); - const { filteredData } = useFilterData(data, searchTerm); const columnHelper = createColumnHelper>(); const columns = useMemo( @@ -129,7 +125,6 @@ const Events: FunctionComponent = () => { ); useEffect(() => { - setPlaceholder("Search events"); showNavigationDrawer(false); }, []); @@ -140,7 +135,7 @@ const Events: FunctionComponent = () => { return ( > isInitialLoading={firstFetch} - data={filteredData} + data={data} error={error} columns={columns} renderCustomHeader={(headerGroup) => ( diff --git a/frontend/src/pages/start/main/Main.tsx b/frontend/src/pages/start/main/Main.tsx index fec859d9..dfadbfd3 100644 --- a/frontend/src/pages/start/main/Main.tsx +++ b/frontend/src/pages/start/main/Main.tsx @@ -21,7 +21,6 @@ import { } from "../../../hooks/use-api"; import { Project } from "@flowser/shared"; import classNames from "classnames"; -import { useSearch } from "../../../hooks/use-search"; import moment from "moment"; import { useConfirmDialog } from "../../../contexts/confirm-dialog.context"; import { useProjectActions } from "../../../contexts/project.context"; @@ -146,7 +145,6 @@ const Main: FunctionComponent = (props) => { function ProjectsListContent() { const { data: projects } = useGetAllProjects(); - const { searchTerm, setPlaceholder } = useSearch("projectSearch"); const { removeProject } = useProjectActions(); const { handleError } = useErrorHandler(ProjectsListContent.name); const history = useHistory(); @@ -154,10 +152,6 @@ function ProjectsListContent() { const projectService = ServiceRegistry.getInstance().projectsService; const showProjectList = projects && projects.length > 0; - useEffect(() => { - setPlaceholder("Search projects"); - }, []); - const runProject = async (project: Project) => { try { await projectService.useProject(project.id); @@ -177,14 +171,10 @@ function ProjectsListContent() { ); } - const filteredProjects = projects?.filter( - (p) => !searchTerm || p.name.includes(searchTerm) - ); - return (
    - {filteredProjects.map((project) => ( + {projects.map((project) => (
  • { - const { searchTerm, setPlaceholder } = useSearch(); const { showNavigationDrawer } = useNavigation(); const { data, firstFetch, error } = useGetPollingTransactions(); - const { filteredData } = useFilterData(data, searchTerm); useEffect(() => { - setPlaceholder("Search transactions"); showNavigationDrawer(false); }, []); @@ -94,7 +89,7 @@ const Main: FunctionComponent = () => { > isInitialLoading={firstFetch} error={error} - data={filteredData} + data={data} columns={transactionTableColumns} /> ); From b0a6e10e92991e5581363e657fb1d6c2de8e3740 Mon Sep 17 00:00:00 2001 From: Bart Date: Mon, 14 Aug 2023 11:39:47 +0200 Subject: [PATCH 5/9] remove project overview module --- frontend/src/App.tsx | 2 - frontend/src/components/fragment/Fragment.tsx | 12 -- .../side-navigation/SideNavigation.tsx | 1 - .../components/timeline/Timeline.module.scss | 26 --- frontend/src/components/timeline/Timeline.tsx | 24 --- frontend/src/hooks/use-limited-array.ts | 37 ----- frontend/src/pages/project/Project.tsx | 11 -- .../src/pages/project/main/Main.module.scss | 65 -------- frontend/src/pages/project/main/Main.tsx | 152 ------------------ .../project/main/ProjectItem.module.scss | 27 ---- .../src/pages/project/main/ProjectItem.tsx | 24 --- .../project/main/ProjectItemBadge.module.scss | 21 --- .../pages/project/main/ProjectItemBadge.tsx | 21 --- 13 files changed, 423 deletions(-) delete mode 100644 frontend/src/components/fragment/Fragment.tsx delete mode 100644 frontend/src/components/timeline/Timeline.module.scss delete mode 100644 frontend/src/components/timeline/Timeline.tsx delete mode 100644 frontend/src/hooks/use-limited-array.ts delete mode 100644 frontend/src/pages/project/Project.tsx delete mode 100644 frontend/src/pages/project/main/Main.module.scss delete mode 100644 frontend/src/pages/project/main/Main.tsx delete mode 100644 frontend/src/pages/project/main/ProjectItem.module.scss delete mode 100644 frontend/src/pages/project/main/ProjectItem.tsx delete mode 100644 frontend/src/pages/project/main/ProjectItemBadge.module.scss delete mode 100644 frontend/src/pages/project/main/ProjectItemBadge.tsx diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index aa4eea66..8b2871ee 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -24,7 +24,6 @@ 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 { @@ -111,7 +110,6 @@ export const FlowserRoutes = (): ReactElement => { path={routes.interactions} component={InteractionsPage} /> - void; -}; - -const Fragment: FunctionComponent = ({ onMount, children }) => { - useEffect(() => onMount(), []); - return {children}; -}; - -export default Fragment; diff --git a/frontend/src/components/side-navigation/SideNavigation.tsx b/frontend/src/components/side-navigation/SideNavigation.tsx index d507e660..17d9bfcd 100644 --- a/frontend/src/components/side-navigation/SideNavigation.tsx +++ b/frontend/src/components/side-navigation/SideNavigation.tsx @@ -27,7 +27,6 @@ export function SideNavigation(props: SideNavigationProps): ReactElement { - {currentProject && ( -
    -
      - {props.items.map((item) => ( -
    • {item.label}
      • - ))} -
    -
    - ); -} diff --git a/frontend/src/hooks/use-limited-array.ts b/frontend/src/hooks/use-limited-array.ts deleted file mode 100644 index ca5c1dea..00000000 --- a/frontend/src/hooks/use-limited-array.ts +++ /dev/null @@ -1,37 +0,0 @@ -import { useMemo, useState } from "react"; - -export type LimitedArrayState = { - isExpanded: boolean; - showMore: () => void; - showLess: () => void; - hiddenCount: number; - data: DataItem[]; -}; - -export function useLimitedArray( - data: DataItem[], - limit = 5 -): LimitedArrayState { - const [isExpanded, setExpanded] = useState(false); - - function showMore() { - setExpanded(true); - } - - function showLess() { - setExpanded(false); - } - - const limitedData = useMemo( - () => (isExpanded ? data : data.slice(0, limit)), - [data, isExpanded] - ); - - return { - isExpanded, - showMore, - showLess, - hiddenCount: data.length - limitedData.length, - data: limitedData, - }; -} diff --git a/frontend/src/pages/project/Project.tsx b/frontend/src/pages/project/Project.tsx deleted file mode 100644 index 83bf8642..00000000 --- a/frontend/src/pages/project/Project.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import React from "react"; -import { Route, Switch } from "react-router-dom"; -import { Main } from "./main/Main"; - -export const Project = () => { - return ( - - - - ); -}; diff --git a/frontend/src/pages/project/main/Main.module.scss b/frontend/src/pages/project/main/Main.module.scss deleted file mode 100644 index 72c9d686..00000000 --- a/frontend/src/pages/project/main/Main.module.scss +++ /dev/null @@ -1,65 +0,0 @@ -@import "styles/spacings"; -@import "styles/colors"; -@import "styles/typography"; - -.root { - display: grid; - height: 70vh; - column-gap: 15px; - row-gap: 20px; - grid-template-columns: repeat(2, 1fr); - - .card { - height: 100%; - border: 0.5px solid #70707048; - border-radius: 0px; - - .content { - display: flex; - flex-direction: column; - margin: $spacing-xl; - margin-top: $spacing-xl * 1.5; - - .title { - display: flex; - font-size: $font-size-h2; - font-weight: 600; - - .counter { - margin-left: $spacing-l; - margin-top: 2px; - background-color: #5c6474; - border-radius: 9px; - font-size: $font-size-xsmall; - padding: 0px 12px 0px 12px; - } - } - - .itemsWrapper { - margin-top: $spacing-xl; - - .projectItem { - display: flex; - color:white; - margin-top: 30px; - - svg { - fill: white; - margin-right: $spacing-base; - margin-top: 4px; - } - } - } - - .footer { - margin-top: $spacing-xl * 1.5; - font-weight: bold; - color: $blue; - width: min-content; - span { - white-space: nowrap; - } - } - } - } -} diff --git a/frontend/src/pages/project/main/Main.tsx b/frontend/src/pages/project/main/Main.tsx deleted file mode 100644 index e94696bf..00000000 --- a/frontend/src/pages/project/main/Main.tsx +++ /dev/null @@ -1,152 +0,0 @@ -import Card from "components/card/Card"; -import React, { FunctionComponent, useMemo } from "react"; -import classes from "./Main.module.scss"; -import { ProjectItem } from "./ProjectItem"; -import { ReactComponent as IconContracts } from "../../../assets/icons/contracts.svg"; -import { - useGetPollingEmulatorSnapshots, - useGetProjectObjects, -} from "../../../hooks/use-api"; -import { - useLimitedArray, - LimitedArrayState, -} from "../../../hooks/use-limited-array"; -import { SimpleButton } from "../../../components/buttons/simple-button/SimpleButton"; -import { ProjectItemBadge } from "./ProjectItemBadge"; -import { useProjectActions } from "../../../contexts/project.context"; -import ReactTimeago from "react-timeago"; -import { ExternalLink } from "../../../components/link/ExternalLink"; -import { SizedBox } from "../../../components/sized-box/SizedBox"; -import { spacings } from "../../../styles/spacings"; -import { Timeline, TimelineItem } from "../../../components/timeline/Timeline"; - -export const Main: FunctionComponent = () => { - const { checkoutBlock } = useProjectActions(); - const { data: projectObjects } = useGetProjectObjects(); - const { data: snapshots } = useGetPollingEmulatorSnapshots(); - const { contracts } = projectObjects ?? { contracts: [] }; - const limitedContracts = useLimitedArray(contracts); - const limitedSnapshots = useLimitedArray(snapshots); - - const snapshotsTimeline = useMemo( - () => - limitedSnapshots.data.map((snapshot) => ({ - id: snapshot.id, - label: ( - } - rightSection={ - checkoutBlock(snapshot.blockId)}> - Jump to - - } - /> - ), - })), - [limitedSnapshots] - ); - - return ( -
    - -
    -
    -
    Snapshots
    -
    {snapshots.length}
    -
    -
    - {snapshots.length === 0 && } - -
    - -
    -     - -
    -
    -
    Contracts
    -
    {contracts.length}
    -
    -
    - {contracts.length === 0 && } - {limitedContracts.data.map((contract) => ( -
    - - -
    - ))} -
    - -
    -     -
    - ); -}; - -function NoSnapshotsCallToAction() { - return ( -
    -

    You haven{`'`}t created any snapshots yet

    - -

    - Snapshots provide a way to store your local blockchain at different - points in time (aka. blocks). -

    -
    - ); -} - -function NoContractsCallToAction() { - return ( -
    -

    No contracts defined in flow.json

    - -

    - Get started with Cadence smart contract development on{" "} - - flow developer portal - - . -

    -

    - ... or see how to define your Cadence files in flow configuration{" "} - -

    -
    - ); -} - -function ToggleLimitedButton({ - title, - limitedState, -}: { - limitedState: LimitedArrayState; - title: string; -}) { - const showButton = limitedState.hiddenCount > 0; - if (!showButton) { - return null; - } - if (limitedState.isExpanded) { - return ( - - Show less - - ); - } else { - return ( - - - + {limitedState.hiddenCount} {title} - - - ); - } -} diff --git a/frontend/src/pages/project/main/ProjectItem.module.scss b/frontend/src/pages/project/main/ProjectItem.module.scss deleted file mode 100644 index 4bc62400..00000000 --- a/frontend/src/pages/project/main/ProjectItem.module.scss +++ /dev/null @@ -1,27 +0,0 @@ -@import "styles/spacings"; -@import "styles/colors"; -@import "styles/typography"; - -.item { - display: flex; - flex-direction: column; - - .main { - display: flex; - color: white; - font-size: $font-size-normal; - font-weight: bold; - margin-bottom: $spacing-base; - - .header { - display: inline-block; - overflow: hidden; - max-height: fit-content; - } - } - - .footer { - opacity: 0.39; - color: white; - } -} diff --git a/frontend/src/pages/project/main/ProjectItem.tsx b/frontend/src/pages/project/main/ProjectItem.tsx deleted file mode 100644 index d9cfb89a..00000000 --- a/frontend/src/pages/project/main/ProjectItem.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import React, { FunctionComponent, ReactElement } from "react"; -import classes from "./ProjectItem.module.scss"; - -type ProjectItemProps = { - title: ReactElement | string; - footer: ReactElement | string; - rightSection?: ReactElement | string; -}; - -export const ProjectItem: FunctionComponent = ({ - title, - footer, - rightSection, -}) => { - return ( -
    -
    -
    {title}
    -
    {rightSection}
    -
    -
    {footer}
    -
    - ); -}; diff --git a/frontend/src/pages/project/main/ProjectItemBadge.module.scss b/frontend/src/pages/project/main/ProjectItemBadge.module.scss deleted file mode 100644 index 411e8c6f..00000000 --- a/frontend/src/pages/project/main/ProjectItemBadge.module.scss +++ /dev/null @@ -1,21 +0,0 @@ -@import "styles/spacings"; -@import "styles/colors"; -@import "styles/typography"; - -.root { - border: .5px solid $grey; - color: $grey; - opacity: 0.39; - border-radius: 14px; - padding: ($spacing-l * 0.25) $spacing-l; - margin: auto; - font-weight: 100; - margin-left: $spacing-base; - transition: 0.3s; -} - -.root:hover { - background-color: $light-grey; - color: $background; - cursor: pointer; -} \ No newline at end of file diff --git a/frontend/src/pages/project/main/ProjectItemBadge.tsx b/frontend/src/pages/project/main/ProjectItemBadge.tsx deleted file mode 100644 index 8fdf9fd4..00000000 --- a/frontend/src/pages/project/main/ProjectItemBadge.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import React, { FunctionComponent, HTMLAttributes } from "react"; -import classes from "./ProjectItemBadge.module.scss"; -import { SimpleButton } from "../../../components/buttons/simple-button/SimpleButton"; -import classNames from "classnames"; - -export type BadgeProps = HTMLAttributes; - -export const ProjectItemBadge: FunctionComponent = ({ - className, - children, - ...restProps -}) => { - return ( - - {children} - - ); -}; From 722ae1b1ee974ecd2072040399fcbccad715b4dc Mon Sep 17 00:00:00 2001 From: Bart Date: Mon, 14 Aug 2023 11:51:46 +0200 Subject: [PATCH 6/9] add current project configuration page --- frontend/src/App.tsx | 5 +++++ frontend/src/components/side-navigation/SideNavigation.tsx | 2 +- frontend/src/constants/routes.ts | 1 + frontend/src/pages/start/Start.tsx | 2 +- 4 files changed, 8 insertions(+), 2 deletions(-) diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 8b2871ee..7e2f5a6b 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -37,6 +37,7 @@ 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( ({ @@ -110,6 +111,10 @@ export const FlowserRoutes = (): ReactElement => { path={routes.interactions} component={InteractionsPage} /> + {currentProject && ( )} diff --git a/frontend/src/constants/routes.ts b/frontend/src/constants/routes.ts index 8465e8da..0a98034c 100644 --- a/frontend/src/constants/routes.ts +++ b/frontend/src/constants/routes.ts @@ -2,6 +2,7 @@ export const routes = { start: "/start", configure: "/start/configure", configureExisting: "/start/configure/:id", + configureCurrent: "/configure/:id", accounts: "/accounts", blocks: "/blocks", transactions: "/transactions", diff --git a/frontend/src/pages/start/Start.tsx b/frontend/src/pages/start/Start.tsx index f0407775..5205bc41 100644 --- a/frontend/src/pages/start/Start.tsx +++ b/frontend/src/pages/start/Start.tsx @@ -2,7 +2,7 @@ import React, { FunctionComponent } from "react"; import { Redirect, Route, Switch } from "react-router-dom"; import Main from "./main/Main"; import { Configuration } from "./configuration/Configuration"; -import { RouteWithBackButton } from "components/layout/Layout"; +import { RouteWithBackButton, RouteWithLayout } from "components/layout/Layout"; import { routes } from "../../constants/routes"; const Start: FunctionComponent = () => { From 89858d354678223cf0d38aa2e6ffec3ea2dd9197 Mon Sep 17 00:00:00 2001 From: Bart Date: Mon, 14 Aug 2023 11:54:25 +0200 Subject: [PATCH 7/9] update side navigation layout --- .../SideNavigation.module.scss | 3 +- .../side-navigation/SideNavigation.tsx | 30 ++++++++++--------- frontend/src/pages/start/Start.tsx | 2 +- 3 files changed, 19 insertions(+), 16 deletions(-) diff --git a/frontend/src/components/side-navigation/SideNavigation.module.scss b/frontend/src/components/side-navigation/SideNavigation.module.scss index 22f1563f..f15c123c 100644 --- a/frontend/src/components/side-navigation/SideNavigation.module.scss +++ b/frontend/src/components/side-navigation/SideNavigation.module.scss @@ -4,9 +4,10 @@ .root { display: flex; flex-direction: column; - align-items: center; + justify-content: space-between; background: $new-color-1; padding: $spacing-base 0; + align-items: center; .inactiveLink { background: $new-color-2; diff --git a/frontend/src/components/side-navigation/SideNavigation.tsx b/frontend/src/components/side-navigation/SideNavigation.tsx index bfa30fe0..96b23b40 100644 --- a/frontend/src/components/side-navigation/SideNavigation.tsx +++ b/frontend/src/components/side-navigation/SideNavigation.tsx @@ -19,20 +19,22 @@ export function SideNavigation(props: SideNavigationProps): ReactElement { return (
    - - - - - - - - - {currentProject && ( - - )} +
    + + + + + + + + + {currentProject && ( + + )} +
    { From 09081357e2343dbbd943f5baff6a4133e433e342 Mon Sep 17 00:00:00 2001 From: Bart Date: Mon, 14 Aug 2023 12:03:12 +0200 Subject: [PATCH 8/9] remove sidebar styles --- .../components/sidebar/SideBar.module.scss | 123 ------------------ 1 file changed, 123 deletions(-) delete mode 100644 frontend/src/components/sidebar/SideBar.module.scss diff --git a/frontend/src/components/sidebar/SideBar.module.scss b/frontend/src/components/sidebar/SideBar.module.scss deleted file mode 100644 index 03e40fdf..00000000 --- a/frontend/src/components/sidebar/SideBar.module.scss +++ /dev/null @@ -1,123 +0,0 @@ -@import 'styles/spacings'; -@import 'styles/colors'; -@import 'styles/typography'; - -.sidebar { - background-color: $background !important; - color: $grey; - display: flex; - justify-content: flex-start; - font-size: $font-size-large; - z-index: 1001 !important; - - .menu { - display: flex; - width: 100%; - flex-direction: column; - margin: $spacing-l * 2; - justify-content: space-between; - - - .menuDivider { - width: 100%; - height: 1px; - opacity: 0.4; - background: $light-grey; - margin-top: $spacing-l * 1.5; - margin-bottom: $spacing-l * 1.5; - } - - .menuSectionTitle { - display: block; - color: $light-grey; - font-size: $font-size-normal; - margin-bottom: $spacing-base; - font-weight: 600; - background: $gradient-1; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - } - - .description { - color: $color-grey; - font-size: $font-size-small; - } - - .menuItem { - display: flex; - padding: $spacing-base * 0.6 0; - align-items: center; - } - - .processItem { - justify-content: space-between; - - .label { - font-size: $font-size-normal; - } - - .processItemActions { - display: flex; - align-items: center; - - .restartButton { - width: 15px; - height: 15px; - margin-right: $spacing-base; - - &:hover { - svg { - transform: scale(1.1) rotate(40deg); - } - } - - svg { - transition: 0.3s ease-in-out; - width: 100%; - height: 100%; - - path { - fill: $grey; - } - } - } - } - } - - .processStatus { - border-radius: 50%; - width: 12px; - height: 12px; - } - - .processStatusError { - background: $color-red-light; - } - - .processStatusRunning { - background: $strong-green; - } - - .processStatusNotRunning { - background: $grey; - } - - .footer { - display: flex; - flex-direction: column; - padding: $spacing-base; - align-items: center; - - .button { - width: 120%; - transform: translateX(10%); - font-size: 16px; - color: $background; - - path { - fill: $background; - } - } - } - } -} From b00fe89679253376fc6d688e15abfd7ead6daf96 Mon Sep 17 00:00:00 2001 From: Bart Date: Mon, 14 Aug 2023 12:11:28 +0200 Subject: [PATCH 9/9] reorganize dialog components --- frontend/src/App.tsx | 2 +- .../action}/ActionDialog.module.scss | 0 .../action}/ActionDialog.tsx | 6 +++--- .../base/BaseDialog.module.scss} | 0 .../Dialog.tsx => dialogs/base/BaseDialog.tsx} | 8 +++----- .../confirmation/ConfirmationDialog.tsx} | 8 +++----- .../consent}/ConsentDialog.module.scss | 0 .../consent}/ConsentDialog.tsx | 12 ++++++------ .../snapshot}/SnapshotDialog.module.scss | 0 .../snapshot}/SnapshotDialog.tsx | 13 ++++++------- .../components/requirements/ProjectRequirements.tsx | 2 +- frontend/src/contexts/confirm-dialog.context.tsx | 6 +++--- frontend/src/contexts/project.context.tsx | 2 +- frontend/src/pages/start/main/Main.tsx | 2 +- 14 files changed, 28 insertions(+), 33 deletions(-) rename frontend/src/components/{action-dialog => dialogs/action}/ActionDialog.module.scss (100%) rename frontend/src/components/{action-dialog => dialogs/action}/ActionDialog.tsx (84%) rename frontend/src/components/{dialog/Dialog.module.scss => dialogs/base/BaseDialog.module.scss} (100%) rename frontend/src/components/{dialog/Dialog.tsx => dialogs/base/BaseDialog.tsx} (84%) rename frontend/src/components/{confirm-dialog/ConfirmDialog.tsx => dialogs/confirmation/ConfirmationDialog.tsx} (83%) rename frontend/src/components/{consent-dialog => dialogs/consent}/ConsentDialog.module.scss (100%) rename frontend/src/components/{consent-dialog => dialogs/consent}/ConsentDialog.tsx (87%) rename frontend/src/components/{snapshot-dialog => dialogs/snapshot}/SnapshotDialog.module.scss (100%) rename frontend/src/components/{snapshot-dialog => dialogs/snapshot}/SnapshotDialog.tsx (82%) diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 7e2f5a6b..bd50e1ed 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -31,7 +31,7 @@ import { 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"; diff --git a/frontend/src/components/action-dialog/ActionDialog.module.scss b/frontend/src/components/dialogs/action/ActionDialog.module.scss similarity index 100% rename from frontend/src/components/action-dialog/ActionDialog.module.scss rename to frontend/src/components/dialogs/action/ActionDialog.module.scss diff --git a/frontend/src/components/action-dialog/ActionDialog.tsx b/frontend/src/components/dialogs/action/ActionDialog.tsx similarity index 84% rename from frontend/src/components/action-dialog/ActionDialog.tsx rename to frontend/src/components/dialogs/action/ActionDialog.tsx index ce750cb7..2d1667e4 100644 --- a/frontend/src/components/action-dialog/ActionDialog.tsx +++ b/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 = ({ ...dialogProps }) => { return ( - +

    {title}

    {children}
    {footer &&
    {footer}
    }
    -     + ); }; diff --git a/frontend/src/components/dialog/Dialog.module.scss b/frontend/src/components/dialogs/base/BaseDialog.module.scss similarity index 100% rename from frontend/src/components/dialog/Dialog.module.scss rename to frontend/src/components/dialogs/base/BaseDialog.module.scss diff --git a/frontend/src/components/dialog/Dialog.tsx b/frontend/src/components/dialogs/base/BaseDialog.tsx similarity index 84% rename from frontend/src/components/dialog/Dialog.tsx rename to frontend/src/components/dialogs/base/BaseDialog.tsx index 1913947a..c58c3245 100644 --- a/frontend/src/components/dialog/Dialog.tsx +++ b/frontend/src/components/dialogs/base/BaseDialog.tsx @@ -3,9 +3,9 @@ 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; @@ -13,7 +13,7 @@ export type DialogProps = { className?: string; }; -const Dialog: FunctionComponent = ({ +export const BaseDialog: FunctionComponent = ({ children, onClose, className, @@ -37,5 +37,3 @@ const Dialog: FunctionComponent = ({
    ); }; - -export default Dialog; diff --git a/frontend/src/components/confirm-dialog/ConfirmDialog.tsx b/frontend/src/components/dialogs/confirmation/ConfirmationDialog.tsx similarity index 83% rename from frontend/src/components/confirm-dialog/ConfirmDialog.tsx rename to frontend/src/components/dialogs/confirmation/ConfirmationDialog.tsx index 7f280655..6351b3b0 100644 --- a/frontend/src/components/confirm-dialog/ConfirmDialog.tsx +++ b/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; @@ -11,7 +11,7 @@ export type ConfirmDialogProps = ActionDialogProps & { title: string; }; -const ConfirmDialog: FunctionComponent = ({ +export const ConfirmationDialog: FunctionComponent = ({ onConfirm, onClose, title, @@ -52,5 +52,3 @@ const ConfirmDialog: FunctionComponent = ({ ); }; - -export default ConfirmDialog; diff --git a/frontend/src/components/consent-dialog/ConsentDialog.module.scss b/frontend/src/components/dialogs/consent/ConsentDialog.module.scss similarity index 100% rename from frontend/src/components/consent-dialog/ConsentDialog.module.scss rename to frontend/src/components/dialogs/consent/ConsentDialog.module.scss diff --git a/frontend/src/components/consent-dialog/ConsentDialog.tsx b/frontend/src/components/dialogs/consent/ConsentDialog.tsx similarity index 87% rename from frontend/src/components/consent-dialog/ConsentDialog.tsx rename to frontend/src/components/dialogs/consent/ConsentDialog.tsx index 503bc859..c689b368 100644 --- a/frontend/src/components/consent-dialog/ConsentDialog.tsx +++ b/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 ( - +
    Flowser logo @@ -53,7 +53,7 @@ export function ConsentDialog({
    -     + ); } diff --git a/frontend/src/components/snapshot-dialog/SnapshotDialog.module.scss b/frontend/src/components/dialogs/snapshot/SnapshotDialog.module.scss similarity index 100% rename from frontend/src/components/snapshot-dialog/SnapshotDialog.module.scss rename to frontend/src/components/dialogs/snapshot/SnapshotDialog.module.scss diff --git a/frontend/src/components/snapshot-dialog/SnapshotDialog.tsx b/frontend/src/components/dialogs/snapshot/SnapshotDialog.tsx similarity index 82% rename from frontend/src/components/snapshot-dialog/SnapshotDialog.tsx rename to frontend/src/components/dialogs/snapshot/SnapshotDialog.tsx index 15bcf8cf..4b10e1ce 100644 --- a/frontend/src/components/snapshot-dialog/SnapshotDialog.tsx +++ b/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 = ({ show, setShow }) => { const projectId = useCurrentProjectId(); - const { data } = useGetCurrentProject(); const { handleError } = useErrorHandler(SnapshotDialog.name); const { snapshotService } = ServiceRegistry.getInstance(); const [loading, setLoading] = useState(false); diff --git a/frontend/src/components/requirements/ProjectRequirements.tsx b/frontend/src/components/requirements/ProjectRequirements.tsx index 6a279726..2aa6ec8f 100644 --- a/frontend/src/components/requirements/ProjectRequirements.tsx +++ b/frontend/src/components/requirements/ProjectRequirements.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { ActionDialog } from "../action-dialog/ActionDialog"; +import { ActionDialog } from "../dialogs/action/ActionDialog"; import { useGetProjectRequirements } from "../../hooks/use-api"; import { ReactElement } from "react"; import { ProjectRequirement, ProjectRequirementType } from "@flowser/shared"; diff --git a/frontend/src/contexts/confirm-dialog.context.tsx b/frontend/src/contexts/confirm-dialog.context.tsx index de535da9..b91847b8 100644 --- a/frontend/src/contexts/confirm-dialog.context.tsx +++ b/frontend/src/contexts/confirm-dialog.context.tsx @@ -4,7 +4,7 @@ import React, { useContext, useState, } from "react"; -import ConfirmDialog from "../components/confirm-dialog/ConfirmDialog"; +import { ConfirmationDialog } from "../components/dialogs/confirmation/ConfirmationDialog"; export type ConfirmDialogContextState = { showDialog: (props: OpenConfirmDialogProps) => void; @@ -53,7 +53,7 @@ export function ConfirmDialogProvider({ {children} {isShowingDialog && ( - {dialogProps.body} - + )} ); diff --git a/frontend/src/contexts/project.context.tsx b/frontend/src/contexts/project.context.tsx index fa3a4419..d8e593e3 100644 --- a/frontend/src/contexts/project.context.tsx +++ b/frontend/src/contexts/project.context.tsx @@ -18,7 +18,6 @@ import { useGetPollingBlocks, useGetPollingEmulatorSnapshots, } from "../hooks/use-api"; -import { SnapshotDialog } from "../components/snapshot-dialog/SnapshotDialog"; import { useErrorHandler } from "../hooks/use-error-handler"; import { useQueryClient } from "react-query"; import { useAnalytics } from "../hooks/use-analytics"; @@ -26,6 +25,7 @@ import { AnalyticEvent } from "../services/analytics.service"; import { FlowUtils } from "../utils/flow-utils"; // @ts-ignore missing fcl types import * as fcl from "@onflow/fcl"; +import { SnapshotDialog } from "components/dialogs/snapshot/SnapshotDialog"; export type ProjectActionsContextState = { switchProject: () => Promise; diff --git a/frontend/src/pages/start/main/Main.tsx b/frontend/src/pages/start/main/Main.tsx index dfadbfd3..9e3cfb2b 100644 --- a/frontend/src/pages/start/main/Main.tsx +++ b/frontend/src/pages/start/main/Main.tsx @@ -29,7 +29,7 @@ import { ServiceRegistry } from "../../../services/service-registry"; import { useErrorHandler } from "../../../hooks/use-error-handler"; import { useAnalytics } from "../../../hooks/use-analytics"; import { AnalyticEvent } from "../../../services/analytics.service"; -import { ConsentDialog } from "../../../components/consent-dialog/ConsentDialog"; +import { ConsentDialog } from "../../../components/dialogs/consent/ConsentDialog"; import { useAnalyticsConsent } from "../../../hooks/use-analytics-consent"; type ProjectTab = {