diff --git a/ui/craco.config.js b/ui/craco.config.js index 3cf41d3a..838b6ca5 100644 --- a/ui/craco.config.js +++ b/ui/craco.config.js @@ -43,6 +43,10 @@ module.exports = ({ }) => ({ filename: "remoteEntry.js", shared: { ...deps, + "@emotion/react": { + singleton: true, + requiredVersion: deps["@emotion/react"] + }, react: { shareScope: "default", singleton: true, @@ -52,6 +56,10 @@ module.exports = ({ }) => ({ singleton: true, requiredVersion: deps["react-dom"], }, + "react-router-dom": { + singleton: true, + requiredVersion: deps["react-router-dom"] + }, /* Without singleton declaration, 2 different versions of @gojek/mlp-ui dependency were loaded which caused the parent app to crash due to different "global states" being used. diff --git a/ui/package.json b/ui/package.json index 831a313a..958c43e8 100644 --- a/ui/package.json +++ b/ui/package.json @@ -7,15 +7,16 @@ "@elastic/datemath": "5.0.3", "@elastic/eui": "66.0.0", "@emotion/react": "^11.9.0", - "@gojek/mlp-ui": "1.6.2", - "@reach/router": "1.3.4", + "@gojek/mlp-ui": "1.7.3", "@sentry/browser": "5.15.5", "json-bigint": "1.0.0", "lint-staged": "^11.1.2", "moment": "^2.29.4", "object-assign-deep": "^0.4.0", + "proper-url-join": "2.1.1", "react": "17.0.2", "react-dom": "17.0.2", + "react-router-dom": "^6.3.0", "react-scripts": "^5.0.1", "resize-observer-polyfill": "^1.5.1", "yup": "^0.29.1" @@ -72,4 +73,4 @@ "last 1 safari version" ] } -} +} \ No newline at end of file diff --git a/ui/src/App.js b/ui/src/App.js index e22bace9..c0c4cb21 100644 --- a/ui/src/App.js +++ b/ui/src/App.js @@ -6,19 +6,17 @@ import { ErrorBoundary, Login, MlpApiContextProvider, - PrivateRoute, Toast, } from "@gojek/mlp-ui"; -import { Redirect, Router } from "@reach/router"; +import { Route, Routes } from "react-router-dom"; import { useConfig } from "config"; -import ExperimentsLandingPage from "experiments/ExperimentsLandingPage"; -import Home from "Home"; import { PrivateLayout } from "PrivateLayout"; import { EuiProvider } from "@elastic/eui"; +import AppRoutes from "AppRoutes"; const App = () => { - const { apiConfig, appConfig, authConfig } = useConfig(); + const { apiConfig, authConfig } = useConfig(); return ( @@ -26,32 +24,13 @@ const App = () => { mlpApiUrl={apiConfig.mlpApiUrl} timeout={apiConfig.apiTimeout}> - - - - - - - - {/* HOME */} - - - {/* EXPERIMENTS */} - - - {/* DEFAULT */} - - + + } /> + }> + } /> + + } /> + diff --git a/ui/src/AppRoutes.js b/ui/src/AppRoutes.js new file mode 100644 index 00000000..53f04430 --- /dev/null +++ b/ui/src/AppRoutes.js @@ -0,0 +1,24 @@ +import React from "react"; +import { Navigate, Route, Routes } from "react-router-dom"; + +import { useConfig } from "config"; +import ExperimentsLandingPage from "experiments/ExperimentsLandingPage"; +import Home from "Home"; + +const App = () => { + const { appConfig } = useConfig(); + return ( + + + } /> + + } /> + } /> + + {/* DEFAULT */} + } /> + + ); +}; + +export default App; diff --git a/ui/src/PrivateLayout.js b/ui/src/PrivateLayout.js index 3fa40928..467aac61 100644 --- a/ui/src/PrivateLayout.js +++ b/ui/src/PrivateLayout.js @@ -3,34 +3,37 @@ import "PrivateLayout.scss"; import React from "react"; import { + ApplicationsContext, ApplicationsContextProvider, - CurrentProjectContextProvider, Header, + PrivateRoute, ProjectsContextProvider, } from "@gojek/mlp-ui"; -import { navigate } from "@reach/router"; +import urlJoin from "proper-url-join"; +import { Outlet, useNavigate } from "react-router-dom"; import { useConfig } from "config"; -export const PrivateLayout = (Component) => { +export const PrivateLayout = () => { + const navigate = useNavigate(); const { appConfig } = useConfig(); - return (props) => ( - - - -
- navigate( - `${appConfig.homepage}/projects/${projectId}/experiments` - ) - } - docLinks={appConfig.docsUrl} - /> - - - - + return ( + + + + + {({ currentApp }) => ( +
+ navigate(urlJoin(currentApp?.href, "projects", pId, "experiments")) + } + docLinks={appConfig.docsUrl} + />)} + + + + + ); }; diff --git a/ui/src/bootstrap.js b/ui/src/bootstrap.js index 4ff86fa8..833b156a 100644 --- a/ui/src/bootstrap.js +++ b/ui/src/bootstrap.js @@ -2,6 +2,7 @@ import "assets/style.scss"; import React from "react"; import ReactDOM from "react-dom"; +import { BrowserRouter } from "react-router-dom"; import * as Sentry from "@sentry/browser"; @@ -22,11 +23,15 @@ const SentryApp = ({ children }) => { }; const XPUI = () => ( - - - - - + + + + + + + + + ); ReactDOM.render(XPUI(), document.getElementById("root")); diff --git a/ui/src/components/page/LandingView.js b/ui/src/components/page/LandingView.js index 290b3f9c..babe7ffe 100644 --- a/ui/src/components/page/LandingView.js +++ b/ui/src/components/page/LandingView.js @@ -10,8 +10,11 @@ import { } from "@elastic/eui"; import ProjectContext from "providers/project/context"; +import { useNavigate, useParams } from "react-router-dom"; -const LandingView = ({ Component, name, projectId, ...props }) => { +const LandingView = ({ Component, name }) => { + const { projectId } = useParams(); + const { navigate } = useNavigate(); const { isProjectOnboarded, isLoaded } = useContext(ProjectContext); return ( @@ -32,18 +35,18 @@ const LandingView = ({ Component, name, projectId, ...props }) => { - This project has not been set up. Get started{" "} - props.navigate("./settings/create")}> - here - - . + This project has not been set up. Get started{" "} + navigate("./settings/create")}> + here + + . } /> ) : ( - + )} ); diff --git a/ui/src/components/page/NavigationMenu.js b/ui/src/components/page/NavigationMenu.js index 6aa58e5d..59671ff7 100644 --- a/ui/src/components/page/NavigationMenu.js +++ b/ui/src/components/page/NavigationMenu.js @@ -1,8 +1,10 @@ import React, { useState } from "react"; import { EuiButtonIcon, EuiContextMenu, EuiPopover } from "@elastic/eui"; +import { useNavigate } from "react-router-dom"; -export const NavigationMenu = ({ curPage, props }) => { +export const NavigationMenu = ({ curPage }) => { + const navigate = useNavigate(); const [isPopoverOpen, setPopover] = useState(false); const onButtonClick = () => { @@ -17,22 +19,22 @@ export const NavigationMenu = ({ curPage, props }) => { { name: "Settings", icon: "gear", - onClick: () => props.navigate("../experiments/settings"), + onClick: () => navigate("../experiments/settings"), }, { name: "Experiments", icon: "apmTrace", - onClick: () => props.navigate("../experiments"), + onClick: () => navigate("../experiments"), }, { name: "Treatments", icon: "beaker", - onClick: () => props.navigate("../experiments/treatments"), + onClick: () => navigate("../experiments/treatments"), }, { name: "Segments", icon: "package", - onClick: () => props.navigate("../experiments/segments"), + onClick: () => navigate("../experiments/segments"), }, ]; const contextRows = allRows.filter((e) => e.name.toLowerCase() !== curPage); diff --git a/ui/src/experiments/ExperimentsLandingPage.js b/ui/src/experiments/ExperimentsLandingPage.js index c06c6f7a..f2dd3d90 100644 --- a/ui/src/experiments/ExperimentsLandingPage.js +++ b/ui/src/experiments/ExperimentsLandingPage.js @@ -1,6 +1,6 @@ import React from "react"; -import { Redirect, Router, useLocation } from "@reach/router"; +import { Navigate, Route, Routes, useLocation } from "react-router-dom"; import LandingView from "components/page/LandingView"; import { ConfigProvider } from "config"; @@ -21,62 +21,57 @@ import TreatmentDetailsView from "treatments/details/TreatmentDetailsView"; import TreatmentHistoryDetailsView from "treatments/history/details/TreatmentHistoryDetailsView"; import ListTreatmentsView from "treatments/list/ListTreatmentsView"; -const ExperimentsLandingPage = ({ projectId }) => { +const ExperimentsLandingPage = () => { + const location = useLocation(); /* Application Routes should be defined here, as ExperimentsLandingPage component is being exposed for use via MFE architecture. */ return ( - - - + + {/* SETTINGS */} + + } /> + } /> + - - - - + {/* TREATMENTS */} + + } /> + } /> + + } /> + } /> + + - - - - + {/* SEGMENTS */} + + } /> + } /> + + } /> + } /> + + - - - - - - + {/* EXPERIMENTS */} + } /> + } /> + + } /> + } /> + {/* /experiments is the list view as well as a prefix to the other views which are registered without it; This redirect ensures that navigation from other views with /experiments prefix will not cause concatenation which results in incorrect /experiments/experiments prefix. */} - - - + } /> + ); diff --git a/ui/src/experiments/create/CreateExperimentView.js b/ui/src/experiments/create/CreateExperimentView.js index 706eae06..5707637f 100644 --- a/ui/src/experiments/create/CreateExperimentView.js +++ b/ui/src/experiments/create/CreateExperimentView.js @@ -5,6 +5,7 @@ import { EuiSpacer, } from "@elastic/eui"; import { FormContextProvider, replaceBreadcrumbs } from "@gojek/mlp-ui"; +import { useNavigate, useParams } from "react-router-dom"; import { PageTitle } from "components/page/PageTitle"; import { CreateExperimentForm } from "experiments/components/form/CreateExperimentForm"; @@ -15,7 +16,9 @@ import { TreatmentContextProvider } from "providers/treatment/context"; import { Experiment } from "services/experiment/Experiment"; import { useConfig } from "config"; -const CreateExperimentView = ({ projectId, ...props }) => { +const CreateExperimentView = () => { + const { projectId } = useParams(); + const navigate = useNavigate(); const { appConfig: { pageTemplate: { restrictWidth, paddingSize }, @@ -48,7 +51,7 @@ const CreateExperimentView = ({ projectId, ...props }) => { projectId={projectId} onCancel={() => window.history.back()} onSuccess={(experimentId) => - props.navigate(`../${experimentId}`) + navigate(`../${experimentId}`) } /> diff --git a/ui/src/experiments/details/ExperimentDetailsView.js b/ui/src/experiments/details/ExperimentDetailsView.js index b2c5697e..9c4358e0 100644 --- a/ui/src/experiments/details/ExperimentDetailsView.js +++ b/ui/src/experiments/details/ExperimentDetailsView.js @@ -10,7 +10,7 @@ import { EuiPageTemplate, } from "@elastic/eui"; import { PageNavigation } from "@gojek/mlp-ui"; -import { Redirect, Router } from "@reach/router"; +import { Navigate, Routes, Route, useLocation, useNavigate, useParams } from "react-router-dom"; import { VersionBadge } from "components/version_badge/VersionBadge"; import { StatusBadge } from "components/status_badge/StatusBadge"; @@ -35,7 +35,10 @@ const ExperimentBadges = ({ version, status }) => ( ); -const ExperimentDetailsView = ({ projectId, experimentId, ...props }) => { +const ExperimentDetailsView = () => { + const { projectId, experimentId, "*": section } = useParams(); + const location = useLocation(); + const navigate = useNavigate(); const { appConfig: { pageTemplate: { restrictWidth, paddingSize }, @@ -58,10 +61,10 @@ const ExperimentDetailsView = ({ projectId, experimentId, ...props }) => { }, [fetchExperimentDetails, fetchExperimentHistory]); useEffect(() => { - if ((props.location.state || {}).refresh) { + if ((location.state || {}).refresh) { onExperimentChange(); } - }, [onExperimentChange, props.location.state]); + }, [onExperimentChange, location.state]); const tabs = [ { @@ -91,7 +94,7 @@ const ExperimentDetailsView = ({ projectId, experimentId, ...props }) => { ) : ( - {!(props["*"] === "edit") && ( + {!(section === "edit") && ( { } > props.navigate("./edit")} + onEdit={() => navigate("./edit")} onActivateSuccess={onExperimentChange} onDeactivateSuccess={onExperimentChange}> {(getActions) => ( )} )} - - - - - - + + } /> + } /> + } /> + } /> + )} diff --git a/ui/src/experiments/edit/EditExperimentView.js b/ui/src/experiments/edit/EditExperimentView.js index 3f89a992..0e7d4d04 100644 --- a/ui/src/experiments/edit/EditExperimentView.js +++ b/ui/src/experiments/edit/EditExperimentView.js @@ -2,6 +2,7 @@ import React, { Fragment, useEffect } from "react"; import { EuiPageTemplate, EuiSpacer } from "@elastic/eui"; import { FormContextProvider, replaceBreadcrumbs } from "@gojek/mlp-ui"; +import { useNavigate } from "react-router-dom"; import { EditExperimentForm } from "experiments/components/form/EditExperimentForm"; import { SegmentContextProvider } from "providers/segment/context"; @@ -11,7 +12,8 @@ import { TreatmentContextProvider } from "providers/treatment/context"; import { Experiment } from "services/experiment/Experiment"; import { PageTitle } from "components/page/PageTitle"; -const EditExperimentView = ({ projectId, experimentSpec, ...props }) => { +const EditExperimentView = ({ projectId, experimentSpec }) => { + const navigate = useNavigate(); useEffect(() => { replaceBreadcrumbs([ { text: "Experiments", href: ".." }, @@ -37,7 +39,7 @@ const EditExperimentView = ({ projectId, experimentSpec, ...props }) => { projectId={projectId} onCancel={() => window.history.back()} onSuccess={() => - props.navigate("../", { state: { refresh: true } }) + navigate("../", { state: { refresh: true } }) } /> diff --git a/ui/src/experiments/history/ListExperimentHistoryView.js b/ui/src/experiments/history/ListExperimentHistoryView.js index 5504d45b..43cc72e6 100644 --- a/ui/src/experiments/history/ListExperimentHistoryView.js +++ b/ui/src/experiments/history/ListExperimentHistoryView.js @@ -2,6 +2,7 @@ import React, { Fragment, useEffect, useState } from "react"; import { EuiPanel, EuiSpacer, EuiPageTemplate } from "@elastic/eui"; import { replaceBreadcrumbs } from "@gojek/mlp-ui"; +import { useNavigate } from "react-router-dom"; import { ConfigSection } from "components/config_section/ConfigSection"; import { useConfig } from "config"; @@ -9,7 +10,8 @@ import { useXpApi } from "hooks/useXpApi"; import ListExperimentHistoryTable from "./ListExperimentHistoryTable"; -const ListExperimentHistoryView = ({ experiment, ...props }) => { +const ListExperimentHistoryView = ({ experiment }) => { + const navigate = useNavigate(); const { appConfig } = useConfig(); const [page, setPage] = useState({ index: 0, @@ -27,7 +29,7 @@ const ListExperimentHistoryView = ({ experiment, ...props }) => { { data: [], paging: { total: 0 } } ); - const onRowClick = (item) => props.navigate(`./${item.version}`); + const onRowClick = (item) => navigate(`./${item.version}`); useEffect(() => { replaceBreadcrumbs([ diff --git a/ui/src/experiments/history/details/ExperimentHistoryDetailsView.js b/ui/src/experiments/history/details/ExperimentHistoryDetailsView.js index f7b1d047..23eea262 100644 --- a/ui/src/experiments/history/details/ExperimentHistoryDetailsView.js +++ b/ui/src/experiments/history/details/ExperimentHistoryDetailsView.js @@ -10,6 +10,7 @@ import { EuiPageTemplate, } from "@elastic/eui"; import { replaceBreadcrumbs } from "@gojek/mlp-ui"; +import { useParams } from "react-router-dom"; import { ActivityConfigSection } from "components/config_section/ActivityConfigSection"; import { ConfigSection } from "components/config_section/ConfigSection"; @@ -22,7 +23,8 @@ import { SegmenterContextProvider } from "providers/segmenter/context"; import { useConfig } from "config"; import { VersionBadge } from "components/version_badge/VersionBadge"; -const ExperimentHistoryDetailsView = ({ projectId, experimentId, version }) => { +const ExperimentHistoryDetailsView = () => { + const { projectId, experimentId, version } = useParams(); const { appConfig: { pageTemplate: { restrictWidth, paddingSize }, diff --git a/ui/src/experiments/list/ListExperimentsTable.js b/ui/src/experiments/list/ListExperimentsTable.js index 77f8f3dd..ee47d02d 100644 --- a/ui/src/experiments/list/ListExperimentsTable.js +++ b/ui/src/experiments/list/ListExperimentsTable.js @@ -15,7 +15,6 @@ const ListExperimentsTable = ({ totalItemCount, onPaginationChange, onRowClick, - props, }) => { const { appConfig } = useConfig(); const tableColumns = [ @@ -93,7 +92,7 @@ const ListExperimentsTable = ({ onClick={(e) => { e.stopPropagation(); }} - href={`${props.uri}/${item.id}`} + href={item.id} target="_blank" /> ); diff --git a/ui/src/experiments/list/ListExperimentsView.js b/ui/src/experiments/list/ListExperimentsView.js index 94ce1baa..512222ce 100644 --- a/ui/src/experiments/list/ListExperimentsView.js +++ b/ui/src/experiments/list/ListExperimentsView.js @@ -11,6 +11,7 @@ import { EuiPageTemplate } from "@elastic/eui"; import { replaceBreadcrumbs } from "@gojek/mlp-ui"; +import { useNavigate } from "react-router-dom"; import { NavigationMenu } from "components/page/NavigationMenu"; import { PageTitle } from "components/page/PageTitle"; @@ -23,7 +24,8 @@ import ExperimentSearchContext, { } from "./search/context"; import SearchExperimentsPanel from "./search/SearchExperimentsPanel"; -const ListExperimentsComponent = ({ projectId, props }) => { +const ListExperimentsComponent = ({ projectId }) => { + const navigate = useNavigate(); const { appConfig: { pagination: { defaultPageSize }, @@ -67,7 +69,7 @@ const ListExperimentsComponent = ({ projectId, props }) => { replaceBreadcrumbs([{ text: "Experiments" }]); }, []); - const onRowClick = (item) => props.navigate(`./${item.id}/details`); + const onRowClick = (item) => navigate(`./${item.id}/details`); return ( @@ -91,10 +93,10 @@ const ListExperimentsComponent = ({ projectId, props }) => { /> } rightSideItems={[ - props.navigate("./create")} fill> + navigate("./create")} fill> Create Experiment , - , + , ]} alignItems={"center"} /> @@ -131,7 +133,6 @@ const ListExperimentsComponent = ({ projectId, props }) => { onPaginationChange={setPage} onRowClick={onRowClick} totalItemCount={results.totalItemCount} - props={props} /> @@ -140,9 +141,9 @@ const ListExperimentsComponent = ({ projectId, props }) => { ); }; -const ListExperimentsView = ({ projectId, ...props }) => ( +const ListExperimentsView = ({ projectId }) => ( - + ); diff --git a/ui/src/segments/create/CreateSegmentView.js b/ui/src/segments/create/CreateSegmentView.js index 763f431c..1981a5ea 100644 --- a/ui/src/segments/create/CreateSegmentView.js +++ b/ui/src/segments/create/CreateSegmentView.js @@ -5,6 +5,7 @@ import { EuiSpacer, } from "@elastic/eui"; import { FormContextProvider, replaceBreadcrumbs } from "@gojek/mlp-ui"; +import { useNavigate, useParams } from "react-router-dom"; import { PageTitle } from "components/page/PageTitle"; import { SegmentContextProvider } from "providers/segment/context"; @@ -13,7 +14,10 @@ import { CreateSegmentForm } from "segments/components/form/CreateSegmentForm"; import { CustomSegment } from "services/segment/CustomSegment"; import { useConfig } from "config"; -const CreateSegmentView = ({ projectId, ...props }) => { +const CreateSegmentView = () => { + const { projectId } = useParams(); + const navigate = useNavigate(); + const { appConfig: { pageTemplate: { restrictWidth, paddingSize }, @@ -43,7 +47,7 @@ const CreateSegmentView = ({ projectId, ...props }) => { window.history.back()} - onSuccess={(segmentId) => props.navigate(`../${segmentId}`)} + onSuccess={(segmentId) => navigate(`../${segmentId}`)} /> diff --git a/ui/src/segments/details/SegmentDetailsView.js b/ui/src/segments/details/SegmentDetailsView.js index 46fbf415..7586ba13 100644 --- a/ui/src/segments/details/SegmentDetailsView.js +++ b/ui/src/segments/details/SegmentDetailsView.js @@ -8,7 +8,7 @@ import { EuiTextAlign, } from "@elastic/eui"; import { PageNavigation } from "@gojek/mlp-ui"; -import { Redirect, Router } from "@reach/router"; +import { Navigate, Route, Routes, useLocation, useNavigate, useParams } from "react-router-dom"; import { PageTitle } from "components/page/PageTitle"; import { useXpApi } from "hooks/useXpApi"; @@ -19,7 +19,10 @@ import ListSegmentHistoryView from "segments/history/ListSegmentHistoryView"; import { SegmentActions } from "./SegmentActions"; import { useConfig } from "config"; -const SegmentDetailsView = ({ projectId, segmentId, ...props }) => { +const SegmentDetailsView = () => { + const { projectId, segmentId, "*": section } = useParams(); + const location = useLocation(); + const navigate = useNavigate(); const { appConfig: { pageTemplate: { restrictWidth, paddingSize }, @@ -42,10 +45,10 @@ const SegmentDetailsView = ({ projectId, segmentId, ...props }) => { }, [fetchSegmentDetails, fetchSegmentHistory]); useEffect(() => { - if ((props.location.state || {}).refresh) { + if ((location.state || {}).refresh) { onSegmentChange(); } - }, [onSegmentChange, props.location.state]); + }, [onSegmentChange, location.state]); const tabs = [ { @@ -62,49 +65,48 @@ const SegmentDetailsView = ({ projectId, segmentId, ...props }) => { return ( - {!isLoaded ? ( - - - - ) : error ? ( - -

{error.message}

- - ) : ( - - {!(props["*"] === "edit") && ( - - } - > - props.navigate("./edit")} - onDeleteSuccess={() => props.navigate("../")}> - {(getActions) => ( - - )} - - - - )} + {!isLoaded ? ( + + + + ) : error ? ( + +

{error.message}

+ + ) : ( + + {!(section === "edit") && ( + + } + > + navigate("./edit")} + onDeleteSuccess={() => navigate("../")}> + {(getActions) => ( + + )} + + + + )} - - - - - - - - )} + + } /> + } /> + } /> + } /> + + + )} ); }; diff --git a/ui/src/segments/edit/EditSegmentView.js b/ui/src/segments/edit/EditSegmentView.js index 64680f2c..8e0c9dba 100644 --- a/ui/src/segments/edit/EditSegmentView.js +++ b/ui/src/segments/edit/EditSegmentView.js @@ -5,6 +5,7 @@ import { EuiSpacer, } from "@elastic/eui"; import { FormContextProvider, replaceBreadcrumbs } from "@gojek/mlp-ui"; +import { useNavigate, useParams } from "react-router-dom"; import { PageTitle } from "components/page/PageTitle"; import { SegmentContextProvider } from "providers/segment/context"; @@ -12,7 +13,10 @@ import { SegmenterContextProvider } from "providers/segmenter/context"; import { EditSegmentForm } from "segments/components/form/EditSegmentForm"; import { CustomSegment } from "services/segment/CustomSegment"; -const EditSegmentView = ({ projectId, segmentSpec, ...props }) => { +const EditSegmentView = ({ segmentSpec }) => { + const { projectId } = useParams(); + const navigate = useNavigate(); + useEffect(() => { replaceBreadcrumbs([ { text: "Experiments", href: "../.." }, @@ -37,7 +41,7 @@ const EditSegmentView = ({ projectId, segmentSpec, ...props }) => { projectId={projectId} onCancel={() => window.history.back()} onSuccess={() => { - props.navigate("../", { state: { refresh: true } }); + navigate("../", { state: { refresh: true } }); }} /> diff --git a/ui/src/segments/history/ListSegmentHistoryView.js b/ui/src/segments/history/ListSegmentHistoryView.js index dcd68fef..44a8e04b 100644 --- a/ui/src/segments/history/ListSegmentHistoryView.js +++ b/ui/src/segments/history/ListSegmentHistoryView.js @@ -2,6 +2,7 @@ import React, { Fragment, useEffect, useState } from "react"; import { EuiPanel, EuiSpacer, EuiPageTemplate } from "@elastic/eui"; import { replaceBreadcrumbs } from "@gojek/mlp-ui"; +import { useNavigate } from "react-router-dom"; import { ConfigSection } from "components/config_section/ConfigSection"; import { useConfig } from "config"; @@ -9,7 +10,8 @@ import { useXpApi } from "hooks/useXpApi"; import ListSegmentHistoryTable from "./ListSegmentHistoryTable"; -const ListSegmentHistoryView = ({ segment, ...props }) => { +const ListSegmentHistoryView = ({ segment }) => { + const navigate = useNavigate(); const { appConfig } = useConfig(); const [page, setPage] = useState({ index: 0, @@ -27,7 +29,7 @@ const ListSegmentHistoryView = ({ segment, ...props }) => { { data: [], paging: { total: 0 } } ); - const onRowClick = (item) => props.navigate(`./${item.version}`); + const onRowClick = (item) => navigate(`./${item.version}`); useEffect(() => { replaceBreadcrumbs([ diff --git a/ui/src/segments/history/details/SegmentHistoryDetailsView.js b/ui/src/segments/history/details/SegmentHistoryDetailsView.js index 867ec9f6..5bceab20 100644 --- a/ui/src/segments/history/details/SegmentHistoryDetailsView.js +++ b/ui/src/segments/history/details/SegmentHistoryDetailsView.js @@ -10,6 +10,7 @@ import { EuiPageTemplate, } from "@elastic/eui"; import { replaceBreadcrumbs } from "@gojek/mlp-ui"; +import { useParams } from "react-router-dom"; import { ActivityConfigSection } from "components/config_section/ActivityConfigSection"; import { ConfigSection } from "components/config_section/ConfigSection"; @@ -19,7 +20,8 @@ import { useXpApi } from "hooks/useXpApi"; import { SegmenterContextProvider } from "providers/segmenter/context"; import { useConfig } from "config"; -const SegmentHistoryDetailsView = ({ projectId, segmentId, version }) => { +const SegmentHistoryDetailsView = () => { + const { projectId, segmentId, version } = useParams(); const { appConfig: { pageTemplate: { restrictWidth, paddingSize }, diff --git a/ui/src/segments/list/ListSegmentsView.js b/ui/src/segments/list/ListSegmentsView.js index b0e47142..b4e19411 100644 --- a/ui/src/segments/list/ListSegmentsView.js +++ b/ui/src/segments/list/ListSegmentsView.js @@ -11,6 +11,7 @@ import { EuiPageTemplate, } from "@elastic/eui"; import { replaceBreadcrumbs } from "@gojek/mlp-ui"; +import { useNavigate } from "react-router-dom"; import { NavigationMenu } from "components/page/NavigationMenu"; import { PageTitle } from "components/page/PageTitle"; @@ -22,7 +23,8 @@ import NameSearchContext, { import ListSegmentsTable from "./ListSegmentsTable"; -const ListSegmentsComponent = ({ projectId, props }) => { +const ListSegmentsComponent = ({ projectId }) => { + const navigate = useNavigate(); const { appConfig: { pagination: { defaultPageSize }, @@ -67,7 +69,7 @@ const ListSegmentsComponent = ({ projectId, props }) => { ]); }, []); - const onRowClick = (item) => props.navigate(`./${item.id}/details`); + const onRowClick = (item) => navigate(`./${item.id}/details`); return ( @@ -83,10 +85,10 @@ const ListSegmentsComponent = ({ projectId, props }) => { /> } rightSideItems={[ - props.navigate("./create")} fill> + navigate("./create")} fill> Create Segment , - , + , ]} alignItems={"center"} /> @@ -124,9 +126,9 @@ const ListSegmentsComponent = ({ projectId, props }) => { ); }; -const ListSegmentsView = ({ projectId, ...props }) => ( +const ListSegmentsView = ({ projectId }) => ( - + ); diff --git a/ui/src/services/segmenter/SegmenterStatus.js b/ui/src/services/segmenter/SegmenterStatus.js index 9da89d9d..04479829 100644 --- a/ui/src/services/segmenter/SegmenterStatus.js +++ b/ui/src/services/segmenter/SegmenterStatus.js @@ -2,7 +2,7 @@ export const getSegmenterStatus = (segmenter) => { const statusMapping = { inactive: { label: "Inactive", - color: "subdued", + color: "default", iconType: "cross", }, active: { diff --git a/ui/src/settings/create/CreateSettingsView.js b/ui/src/settings/create/CreateSettingsView.js index 592b2a9b..c3db2ca6 100644 --- a/ui/src/settings/create/CreateSettingsView.js +++ b/ui/src/settings/create/CreateSettingsView.js @@ -4,6 +4,7 @@ import { EuiPageTemplate, EuiSpacer, } from "@elastic/eui"; +import { useNavigate, useParams } from "react-router-dom"; import { FormContextProvider, replaceBreadcrumbs } from "@gojek/mlp-ui"; import { PageTitle } from "components/page/PageTitle"; @@ -12,7 +13,10 @@ import { Settings } from "services/settings/Settings"; import { CreateSettingsForm } from "settings/components/form/CreateSettingsForm"; import { useConfig } from "config"; -const CreateSettingsView = ({ projectId, ...props }) => { +const CreateSettingsView = () => { + const { projectId } = useParams(); + const navigate = useNavigate(); + const { appConfig: { pageTemplate: { restrictWidth, paddingSize }, @@ -41,7 +45,7 @@ const CreateSettingsView = ({ projectId, ...props }) => { window.history.back()} - onSuccess={() => props.navigate(`..`)} + onSuccess={() => navigate(`..`)} /> diff --git a/ui/src/settings/details/SettingsDetailsView.js b/ui/src/settings/details/SettingsDetailsView.js index 6e37ec56..42b27b76 100644 --- a/ui/src/settings/details/SettingsDetailsView.js +++ b/ui/src/settings/details/SettingsDetailsView.js @@ -8,7 +8,7 @@ import { EuiTextAlign, } from "@elastic/eui"; import { PageNavigation, useToggle } from "@gojek/mlp-ui"; -import { Redirect, Router } from "@reach/router"; +import { Navigate, Routes, Route, useLocation, useNavigate, useParams } from "react-router-dom"; import { PageTitle } from "components/page/PageTitle"; import { useXpApi } from "hooks/useXpApi"; @@ -24,7 +24,10 @@ import ValidationView from "settings/validation/ValidationView"; import { useConfig } from "config"; -const SettingsDetailsView = ({ projectId, ...props }) => { +const SettingsDetailsView = () => { + const { projectId, "*": section } = useParams(); + const location = useLocation(); + const navigate = useNavigate(); const { appConfig: { pageTemplate: { restrictWidth, paddingSize }, @@ -52,10 +55,10 @@ const SettingsDetailsView = ({ projectId, ...props }) => { ]; useEffect(() => { - if ((props.location.state || {}).refresh) { + if ((location.state || {}).refresh) { fetchXPSettings(); } - }, [fetchXPSettings, props.location.state]); + }, [fetchXPSettings, location.state]); return ( { ) : ( <> - {!props["*"].includes("edit") && - !props["*"].includes("segmenters/") && ( - <> - } - > - props.navigate("./edit")} - onValidationEdit={() => props.navigate("./validation/edit")} - onCreateSegmenter={() => - props.navigate("./segmenters/create") - } - selectedTab={props["*"]}> - {(getActions) => ( - - )} - - - - )} + {!section.includes("edit") && + !section.includes("segmenters/") && ( + <> + } + > + navigate("./edit")} + onValidationEdit={() => navigate("./validation/edit")} + onCreateSegmenter={() => + navigate("./segmenters/create") + } + selectedTab={section}> + {(getActions) => ( + + )} + + + + )} - - - - - - - - - - - + + {/* DETAILS */} + } /> + } /> + {/* CREATE */} + } /> + {/* EDIT */} + } /> + {/* VALIDATION */} + + } /> + } /> + + {/* SEGMENTER */} + + } /> + } /> + } /> + + )} diff --git a/ui/src/settings/edit/EditSettingsView.js b/ui/src/settings/edit/EditSettingsView.js index f26d0372..8415726d 100644 --- a/ui/src/settings/edit/EditSettingsView.js +++ b/ui/src/settings/edit/EditSettingsView.js @@ -2,13 +2,17 @@ import React, { Fragment, useEffect } from "react"; import { EuiPageTemplate, EuiSpacer } from "@elastic/eui"; import { FormContextProvider, replaceBreadcrumbs } from "@gojek/mlp-ui"; +import { useNavigate, useParams } from "react-router-dom"; import { SegmenterContextProvider } from "providers/segmenter/context"; import { Settings } from "services/settings/Settings"; import { EditSettingsForm } from "settings/components/form/EditSettingsForm"; import { PageTitle } from "components/page/PageTitle"; -const EditSettingsView = ({ projectId, settings, ...props }) => { +const EditSettingsView = ({ settings }) => { + const { projectId } = useParams(); + const navigate = useNavigate(); + useEffect(() => { replaceBreadcrumbs([ { text: "Experiments", href: ".." }, @@ -31,7 +35,7 @@ const EditSettingsView = ({ projectId, settings, ...props }) => { projectId={projectId} onCancel={() => window.history.back()} onSuccess={() => { - props.navigate("../", { state: { refresh: true } }); + navigate("../", { state: { refresh: true } }); }} /> diff --git a/ui/src/settings/edit/EditValidationView.js b/ui/src/settings/edit/EditValidationView.js index c91117b2..c7b37192 100644 --- a/ui/src/settings/edit/EditValidationView.js +++ b/ui/src/settings/edit/EditValidationView.js @@ -6,6 +6,7 @@ import { EuiSpacer, } from "@elastic/eui"; import { FormContextProvider, replaceBreadcrumbs } from "@gojek/mlp-ui"; +import { useNavigate, useParams } from "react-router-dom"; import { PageTitle } from "components/page/PageTitle"; import { Settings } from "services/settings/Settings"; @@ -13,12 +14,13 @@ import { EditValidationForm } from "settings/components/form/EditValidationForm" import PlaygroundFlyout from "settings/components/playground_flyout/PlaygroundFlyout"; const EditValidationView = ({ - projectId, settings, isFlyoutVisible, toggleFlyout, - ...props }) => { + const { projectId } = useParams(); + const navigate = useNavigate(); + useEffect(() => { replaceBreadcrumbs([ { text: "Experiments", href: "../.." }, @@ -47,7 +49,7 @@ const EditValidationView = ({ projectId={projectId} onCancel={() => window.history.back()} onSuccess={() => { - props.navigate("../", { state: { refresh: true } }); + navigate("../", { state: { refresh: true } }); }} /> diff --git a/ui/src/settings/segmenters/create/CreateSegmenterView.js b/ui/src/settings/segmenters/create/CreateSegmenterView.js index 2c4a06dd..90aab3e4 100644 --- a/ui/src/settings/segmenters/create/CreateSegmenterView.js +++ b/ui/src/settings/segmenters/create/CreateSegmenterView.js @@ -5,12 +5,16 @@ import { EuiSpacer, } from "@elastic/eui"; import { FormContextProvider, replaceBreadcrumbs } from "@gojek/mlp-ui"; +import { useNavigate, useParams } from "react-router-dom"; import { PageTitle } from "components/page/PageTitle"; import { Segmenter } from "services/segmenter/Segmenter"; import { CreateSegmenterForm } from "settings/segmenters/components/form/CreateSegmenterForm"; -const CreateSegmenterView = ({ projectId, ...props }) => { +const CreateSegmenterView = () => { + const { projectId } = useParams(); + const navigate = useNavigate(); + useEffect(() => { replaceBreadcrumbs([ { text: "Segmenters", href: "../segmenters" }, @@ -22,7 +26,7 @@ const CreateSegmenterView = ({ projectId, ...props }) => { } + pageTitle={} /> @@ -30,7 +34,7 @@ const CreateSegmenterView = ({ projectId, ...props }) => { window.history.back()} - onSuccess={() => props.navigate(`../`)} + onSuccess={() => navigate(`../`)} /> diff --git a/ui/src/settings/segmenters/details/SegmenterDetailsView.js b/ui/src/settings/segmenters/details/SegmenterDetailsView.js index 06655d8c..f92cf87e 100644 --- a/ui/src/settings/segmenters/details/SegmenterDetailsView.js +++ b/ui/src/settings/segmenters/details/SegmenterDetailsView.js @@ -7,7 +7,7 @@ import { EuiPageTemplate, } from "@elastic/eui"; import { PageNavigation, replaceBreadcrumbs } from "@gojek/mlp-ui"; -import { Redirect, Router } from "@reach/router"; +import { Navigate, Route, Routes, useNavigate, useParams } from "react-router-dom"; import { PageTitle } from "components/page/PageTitle"; import { StatusBadge } from "components/status_badge/StatusBadge"; @@ -17,7 +17,10 @@ import { SegmentersConfigView } from "settings/segmenters/details/config/Segment import { SegmenterActions } from "settings/segmenters/details/SegmenterActions"; import EditSegmenterView from "settings/segmenters/edit/EditSegmenterView"; -const SegmenterDetailsView = ({ projectId, segmenterName, ...props }) => { +const SegmenterDetailsView = () => { + const { projectId, segmenterName, "*": section } = useParams(); + const navigate = useNavigate(); + const tabs = [ { id: "details", @@ -58,7 +61,7 @@ const SegmenterDetailsView = ({ projectId, segmenterName, ...props }) => { ) : ( - {!(props["*"] === "edit") && ( + {!(section === "edit") && ( { /> } > - {props["*"] === "details" && ( - props.navigate("./edit")} - onDeleteSuccess={() => props.navigate("../")} - segmenter={segmenter}> - {(getActions) => ( - - )} - - )} + {section === "details" && ( + navigate("./edit")} + onDeleteSuccess={() => navigate("../")} + segmenter={segmenter}> + {(getActions) => ( + + )} + + )} )} - - - - - + + } /> + } /> + } /> + )} diff --git a/ui/src/settings/segmenters/edit/EditSegmenterView.js b/ui/src/settings/segmenters/edit/EditSegmenterView.js index b40fb7d8..b8942893 100644 --- a/ui/src/settings/segmenters/edit/EditSegmenterView.js +++ b/ui/src/settings/segmenters/edit/EditSegmenterView.js @@ -5,12 +5,16 @@ import { EuiSpacer, } from "@elastic/eui"; import { FormContextProvider, replaceBreadcrumbs } from "@gojek/mlp-ui"; +import { useNavigate, useParams } from "react-router-dom"; import { PageTitle } from "components/page/PageTitle"; import { Segmenter } from "services/segmenter/Segmenter"; import { EditSegmenterForm } from "settings/segmenters/components/form/EditSegmenterForm"; -const EditSegmenterView = ({ projectId, segmenter, ...props }) => { +const EditSegmenterView = ({ segmenter }) => { + const { projectId } = useParams(); + const navigate = useNavigate(); + useEffect(() => { replaceBreadcrumbs([ { text: "Segmenters", href: "../../segmenters" }, @@ -32,7 +36,7 @@ const EditSegmenterView = ({ projectId, segmenter, ...props }) => { projectId={projectId} onCancel={() => window.history.back()} onSuccess={() => - props.navigate("../", { state: { refresh: true } }) + navigate("../", { state: { refresh: true } }) } /> diff --git a/ui/src/settings/segmenters/list/ListSegmentersView.js b/ui/src/settings/segmenters/list/ListSegmentersView.js index 08e9928f..228f35b6 100644 --- a/ui/src/settings/segmenters/list/ListSegmentersView.js +++ b/ui/src/settings/segmenters/list/ListSegmentersView.js @@ -2,6 +2,7 @@ import { Fragment, useContext, useEffect } from "react"; import { EuiSearchBar, EuiSpacer, EuiPanel, EuiPageTemplate } from "@elastic/eui"; import { replaceBreadcrumbs } from "@gojek/mlp-ui"; +import { useNavigate, useParams } from "react-router-dom"; import { ConfigSection } from "components/config_section/ConfigSection"; import { useXpApi } from "hooks/useXpApi"; @@ -10,7 +11,8 @@ import NameSearchContext, { } from "providers/search/NameSearchContextProvider"; import { ListSegmentersTable } from "settings/segmenters/list/ListSegmentersTable"; -const ListSegmentersComponent = ({ projectId, props }) => { +const ListSegmentersComponent = ({ projectId }) => { + const navigate = useNavigate(); const { getFilter, getProcessedFilters, setFilter } = useContext(NameSearchContext); @@ -38,7 +40,7 @@ const ListSegmentersComponent = ({ projectId, props }) => { ]); }); - const onRowClick = (item) => props.navigate(`./${item.name}/details`); + const onRowClick = (item) => navigate(`./${item.name}/details`); return ( @@ -68,8 +70,11 @@ const ListSegmentersComponent = ({ projectId, props }) => { ); }; -export const ListSegmentersView = ({ projectId, ...props }) => ( - - - -); +export const ListSegmentersView = () => { + const { projectId } = useParams(); + return ( + + + + ) +}; diff --git a/ui/src/treatments/create/CreateTreatmentView.js b/ui/src/treatments/create/CreateTreatmentView.js index 765fb64d..033fa0f6 100644 --- a/ui/src/treatments/create/CreateTreatmentView.js +++ b/ui/src/treatments/create/CreateTreatmentView.js @@ -5,6 +5,7 @@ import { EuiSpacer, } from "@elastic/eui"; import { FormContextProvider, replaceBreadcrumbs } from "@gojek/mlp-ui"; +import { useNavigate, useParams } from "react-router-dom"; import { PageTitle } from "components/page/PageTitle"; import { TreatmentContextProvider } from "providers/treatment/context"; @@ -12,7 +13,9 @@ import { Treatment } from "services/treatment/Treatment"; import { CreateTreatmentForm } from "treatments/components/form/CreateTreatmentForm"; import { useConfig } from "config"; -const CreateTreatmentView = ({ projectId, ...props }) => { +const CreateTreatmentView = () => { + const { projectId } = useParams(); + const navigate = useNavigate(); const { appConfig: { pageTemplate: { restrictWidth, paddingSize }, @@ -41,7 +44,7 @@ const CreateTreatmentView = ({ projectId, ...props }) => { window.history.back()} - onSuccess={(treatmentId) => props.navigate(`../${treatmentId}`)} + onSuccess={(treatmentId) => navigate(`../${treatmentId}`)} /> diff --git a/ui/src/treatments/details/TreatmentDetailsView.js b/ui/src/treatments/details/TreatmentDetailsView.js index d0b9bf23..0e76c90a 100644 --- a/ui/src/treatments/details/TreatmentDetailsView.js +++ b/ui/src/treatments/details/TreatmentDetailsView.js @@ -8,7 +8,7 @@ import { EuiTextAlign, } from "@elastic/eui"; import { PageNavigation } from "@gojek/mlp-ui"; -import { Redirect, Router } from "@reach/router"; +import { Navigate, Route, Routes, useLocation, useNavigate, useParams } from "react-router-dom"; import { PageTitle } from "components/page/PageTitle"; import { useXpApi } from "hooks/useXpApi"; @@ -19,7 +19,10 @@ import ListTreatmentHistoryView from "treatments/history/ListTreatmentHistoryVie import { TreatmentActions } from "./TreatmentActions"; import { useConfig } from "config"; -const TreatmentDetailsView = ({ projectId, treatmentId, ...props }) => { +const TreatmentDetailsView = () => { + const { projectId, treatmentId, "*": section } = useParams(); + const navigate = useNavigate(); + const location = useLocation(); const { appConfig: { pageTemplate: { restrictWidth, paddingSize }, @@ -42,10 +45,10 @@ const TreatmentDetailsView = ({ projectId, treatmentId, ...props }) => { }, [fetchTreatmentDetails, fetchTreatmentHistory]); useEffect(() => { - if ((props.location.state || {}).refresh) { + if ((location.state || {}).refresh) { onTreatmentChange(); } - }, [onTreatmentChange, props.location.state]); + }, [onTreatmentChange, location.state]); const tabs = [ { @@ -62,50 +65,48 @@ const TreatmentDetailsView = ({ projectId, treatmentId, ...props }) => { return ( - {!isLoaded ? ( - - - - ) : error ? ( - -

{error.message}

- - ) : ( - - {!(props["*"] === "edit") && ( - - } - > - props.navigate("./edit")} - onDeleteSuccess={() => props.navigate("../")}> - {(getActions) => ( - - )} - - - - )} + {!isLoaded ? ( + + + + ) : error ? ( + +

{error.message}

+ + ) : ( + + {!(section === "edit") && ( + + } + > + navigate("./edit")} + onDeleteSuccess={() => navigate("../")}> + {(getActions) => ( + + )} + + + + )} - - - - - - - - - )} + + } /> + } /> + } /> + } /> + + + )} ); diff --git a/ui/src/treatments/edit/EditTreatmentView.js b/ui/src/treatments/edit/EditTreatmentView.js index 5146d0ea..f4450e41 100644 --- a/ui/src/treatments/edit/EditTreatmentView.js +++ b/ui/src/treatments/edit/EditTreatmentView.js @@ -5,13 +5,17 @@ import { EuiSpacer, } from "@elastic/eui"; import { FormContextProvider, replaceBreadcrumbs } from "@gojek/mlp-ui"; +import { useNavigate, useParams } from "react-router-dom"; import { PageTitle } from "components/page/PageTitle"; import { TreatmentContextProvider } from "providers/treatment/context"; import { Treatment } from "services/treatment/Treatment"; import { EditTreatmentForm } from "treatments/components/form/EditTreatmentForm"; -const EditTreatmentView = ({ projectId, treatmentSpec, ...props }) => { +const EditTreatmentView = ({ treatmentSpec }) => { + const { projectId } = useParams(); + const navigate = useNavigate(); + useEffect(() => { replaceBreadcrumbs([ { text: "Experiments", href: "../.." }, @@ -35,7 +39,7 @@ const EditTreatmentView = ({ projectId, treatmentSpec, ...props }) => { projectId={projectId} onCancel={() => window.history.back()} onSuccess={() => { - props.navigate("../", { state: { refresh: true } }); + navigate("../", { state: { refresh: true } }); }} /> diff --git a/ui/src/treatments/history/ListTreatmentHistoryView.js b/ui/src/treatments/history/ListTreatmentHistoryView.js index 2123b352..954d930e 100644 --- a/ui/src/treatments/history/ListTreatmentHistoryView.js +++ b/ui/src/treatments/history/ListTreatmentHistoryView.js @@ -2,6 +2,7 @@ import React, { Fragment, useEffect, useState } from "react"; import { EuiPanel, EuiSpacer, EuiPageTemplate } from "@elastic/eui"; import { replaceBreadcrumbs } from "@gojek/mlp-ui"; +import { useNavigate } from "react-router-dom"; import { ConfigSection } from "components/config_section/ConfigSection"; import { useConfig } from "config"; @@ -9,7 +10,8 @@ import { useXpApi } from "hooks/useXpApi"; import ListTreatmentHistoryTable from "./ListTreatmentHistoryTable"; -const ListTreatmentHistoryView = ({ treatment, ...props }) => { +const ListTreatmentHistoryView = ({ treatment }) => { + const navigate = useNavigate(); const { appConfig } = useConfig(); const [page, setPage] = useState({ index: 0, @@ -27,7 +29,7 @@ const ListTreatmentHistoryView = ({ treatment, ...props }) => { { data: [], paging: { total: 0 } } ); - const onRowClick = (item) => props.navigate(`./${item.version}`); + const onRowClick = (item) => navigate(`./${item.version}`); useEffect(() => { replaceBreadcrumbs([ diff --git a/ui/src/treatments/history/details/TreatmentHistoryDetailsView.js b/ui/src/treatments/history/details/TreatmentHistoryDetailsView.js index e538cf4f..18b693e8 100644 --- a/ui/src/treatments/history/details/TreatmentHistoryDetailsView.js +++ b/ui/src/treatments/history/details/TreatmentHistoryDetailsView.js @@ -10,6 +10,7 @@ import { EuiPageTemplate, } from "@elastic/eui"; import { replaceBreadcrumbs } from "@gojek/mlp-ui"; +import { useParams } from "react-router-dom"; import { ActivityConfigSection } from "components/config_section/ActivityConfigSection"; import { ConfigSection } from "components/config_section/ConfigSection"; @@ -18,7 +19,8 @@ import { useXpApi } from "hooks/useXpApi"; import { GeneralInfoConfigSection } from "treatments/components/configuration/GeneralInfoConfigSection"; import { useConfig } from "config"; -const TreatmentHistoryDetailsView = ({ projectId, treatmentId, version }) => { +const TreatmentHistoryDetailsView = () => { + const { projectId, treatmentId, version } = useParams(); const { appConfig: { pageTemplate: { restrictWidth, paddingSize }, @@ -61,44 +63,44 @@ const TreatmentHistoryDetailsView = ({ projectId, treatmentId, version }) => { return ( - {!isLoaded ? ( - - - - ) : ( - - - } - /> - - - - - - {activity.children} - - - - - - - - {generalInfo.children} - - - - - - )} + {!isLoaded ? ( + + + + ) : ( + + + } + /> + + + + + + {activity.children} + + + + + + + + {generalInfo.children} + + + + + + )} ); }; diff --git a/ui/src/treatments/list/ListTreatmentsView.js b/ui/src/treatments/list/ListTreatmentsView.js index 3a3a411a..2daf58f1 100644 --- a/ui/src/treatments/list/ListTreatmentsView.js +++ b/ui/src/treatments/list/ListTreatmentsView.js @@ -11,6 +11,7 @@ import { EuiPageTemplate } from "@elastic/eui"; import { replaceBreadcrumbs } from "@gojek/mlp-ui"; +import { useNavigate } from "react-router-dom"; import { NavigationMenu } from "components/page/NavigationMenu"; import { PageTitle } from "components/page/PageTitle"; @@ -22,7 +23,8 @@ import NameSearchContext, { import ListTreatmentsTable from "./ListTreatmentsTable"; -const ListTreatmentsComponent = ({ projectId, props }) => { +const ListTreatmentsComponent = ({ projectId }) => { + const navigate = useNavigate(); const { appConfig: { pagination: { defaultPageSize }, @@ -67,7 +69,7 @@ const ListTreatmentsComponent = ({ projectId, props }) => { ]); }, []); - const onRowClick = (item) => props.navigate(`./${item.id}/details`); + const onRowClick = (item) => navigate(`./${item.id}/details`); return ( @@ -83,10 +85,10 @@ const ListTreatmentsComponent = ({ projectId, props }) => { /> } rightSideItems={[ - props.navigate("./create")} fill> + navigate("./create")} fill> Create Treatment , - , + , ]} alignItems={"center"} /> @@ -124,9 +126,9 @@ const ListTreatmentsComponent = ({ projectId, props }) => { ); }; -const ListTreatmentsView = ({ projectId, ...props }) => ( +const ListTreatmentsView = ({ projectId }) => ( - + ); diff --git a/ui/yarn.lock b/ui/yarn.lock index c96d710a..1e2d28e6 100644 --- a/ui/yarn.lock +++ b/ui/yarn.lock @@ -2172,10 +2172,10 @@ minimatch "^3.1.2" strip-json-comments "^3.1.1" -"@gojek/mlp-ui@1.6.2": - version "1.6.2" - resolved "https://registry.yarnpkg.com/@gojek/mlp-ui/-/mlp-ui-1.6.2.tgz#19fdb36f5615235f7d50e764402f85f37c7f6126" - integrity sha512-K+dpI7VAsWSMZ20ts101ovQkQJsJNfyNnNVV/9LWt8LMjvR4iEBMOTpxs1eoHvde8/WEYjkIS1Gf+5azKres0g== +"@gojek/mlp-ui@1.7.3": + version "1.7.3" + resolved "https://registry.yarnpkg.com/@gojek/mlp-ui/-/mlp-ui-1.7.3.tgz#9186631038acf6cf7e3864babef7ce4083817074" + integrity sha512-rOQL9piBMNrqZU78SslhQoQ7j4Gw6oDpr0p9EIb8nV2IzXL4LcLWbkES6nSP0NSTtvLVaevoVtAMc07SRuittA== dependencies: "@react-oauth/google" "0.2.6" classnames "^2.2.6" @@ -2556,21 +2556,16 @@ schema-utils "^3.0.0" source-map "^0.7.3" -"@reach/router@1.3.4": - version "1.3.4" - resolved "https://registry.yarnpkg.com/@reach/router/-/router-1.3.4.tgz#d2574b19370a70c80480ed91f3da840136d10f8c" - integrity sha512-+mtn9wjlB9NN2CNnnC/BRYtwdKBfSyyasPYraNAyvaV1occr/5NnB4CVzjEZipNHwYebQwcndGUmpFzxAUoqSA== - dependencies: - create-react-context "0.3.0" - invariant "^2.2.3" - prop-types "^15.6.1" - react-lifecycles-compat "^3.0.4" - "@react-oauth/google@0.2.6": version "0.2.6" resolved "https://registry.yarnpkg.com/@react-oauth/google/-/google-0.2.6.tgz#42f7a18c62d677c77ee8e1fc2eec2ccbe50be997" integrity sha512-Az6w/EL3QHSvWVbfX2WbUB15PGqM0hm86bpAoyvjw2nhDdPp9IOjpFg5HfSGJQJBydjbCFnZjI8PJskTzLOhew== +"@remix-run/router@1.0.2": + version "1.0.2" + resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.0.2.tgz#1c17eadb2fa77f80a796ad5ea9bf108e6993ef06" + integrity sha512-GRSOFhJzjGN+d4sKHTMSvNeUPoZiDHWmRnXfzaxrqe7dE/Nzlc8BiMSJdLDESZlndM7jIUrZ/F4yWqVYlI0rwQ== + "@rollup/plugin-babel@^5.2.0": version "5.3.0" resolved "https://registry.yarnpkg.com/@rollup/plugin-babel/-/plugin-babel-5.3.0.tgz#9cb1c5146ddd6a4968ad96f209c50c62f92f9879" @@ -4820,14 +4815,6 @@ cosmiconfig@^7.0.0: path-type "^4.0.0" yaml "^1.10.0" -create-react-context@0.3.0: - version "0.3.0" - resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.3.0.tgz#546dede9dc422def0d3fc2fe03afe0bc0f4f7d8c" - integrity sha512-dNldIoSuNSvlTJ7slIKC/ZFGKexBMBrrcc+TTe1NdmROnaASuLPvqpwj9v4XS4uXZ8+YPu0sNmShX2rXI5LNsw== - dependencies: - gud "^1.0.0" - warning "^4.0.3" - cross-env@^6.0.3: version "6.0.3" resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-6.0.3.tgz#4256b71e49b3a40637a0ce70768a6ef5c72ae941" @@ -6450,11 +6437,6 @@ grapheme-splitter@^1.0.4: resolved "https://registry.yarnpkg.com/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz#9cf3a665c6247479896834af35cf1dbb4400767e" integrity sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ== -gud@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/gud/-/gud-1.0.0.tgz#a489581b17e6a70beca9abe3ae57de7a499852c0" - integrity sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw== - gzip-size@^6.0.0: version "6.0.0" resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-6.0.0.tgz#065367fd50c239c0671cbcbad5be3e2eeb10e462" @@ -6996,7 +6978,7 @@ internal-slot@^1.0.3: has "^1.0.3" side-channel "^1.0.4" -invariant@^2.2.3, invariant@^2.2.4: +invariant@^2.2.4: version "2.2.4" resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6" integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA== @@ -9862,7 +9844,7 @@ prompts@^2.4.2: kleur "^3.0.3" sisteransi "^1.0.5" -prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2: +prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2: version "15.7.2" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5" integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ== @@ -10181,11 +10163,6 @@ react-is@^18.0.0: resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b" integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w== -react-lifecycles-compat@^3.0.4: - version "3.0.4" - resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" - integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA== - react-redux@^7.2.0: version "7.2.5" resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.5.tgz#213c1b05aa1187d9c940ddfc0b29450957f6a3b8" @@ -10222,6 +10199,21 @@ react-remove-scroll@^2.5.2: use-callback-ref "^1.3.0" use-sidecar "^1.1.2" +react-router-dom@^6.3.0: + version "6.4.2" + resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.4.2.tgz#115b37d501d6d8ac870683694978c51c43e6c0d2" + integrity sha512-yM1kjoTkpfjgczPrcyWrp+OuQMyB1WleICiiGfstnQYo/S8hPEEnVjr/RdmlH6yKK4Tnj1UGXFSa7uwAtmDoLQ== + dependencies: + "@remix-run/router" "1.0.2" + react-router "6.4.2" + +react-router@6.4.2: + version "6.4.2" + resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.4.2.tgz#300628ee9ed81b8ef1597b5cb98b474efe9779b8" + integrity sha512-Rb0BAX9KHhVzT1OKhMvCDMw776aTYM0DtkxqUBP8dNBom3mPXlfNs76JNGK8wKJ1IZEY1+WGj+cvZxHVk/GiKw== + dependencies: + "@remix-run/router" "1.0.2" + react-scripts@^5.0.1: version "5.0.1" resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-5.0.1.tgz#6285dbd65a8ba6e49ca8d651ce30645a6d980003" @@ -12332,13 +12324,6 @@ walker@^1.0.7: dependencies: makeerror "1.0.x" -warning@^4.0.3: - version "4.0.3" - resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3" - integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w== - dependencies: - loose-envify "^1.0.0" - watchpack@^2.4.0: version "2.4.0" resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.4.0.tgz#fa33032374962c78113f93c7f2fb4c54c9862a5d"