Update UI dependencies (#33)

* Update ui dependencies and common files * Update rest of the pages in xp to use EuiPageTemplate * Fix formatting in landing view imports * Fix package.json script * Fix flyout styling * Remove redundant styling to accommodate flyouts * Replace EuiPage with EuiPageTemplate for experiment history view * Refactor UI pages to achieve consistent spacing * Restore React imports * Update eui version * Replace arrow caret in segmenter card with gear icon * Make experiment filters and playground flyout push out into the body * Hide per page option from all tables displaying results of list API calls * Remove deprecated popperProps prop of EuiDatePicker * Make reset button in experiments filter not grow automatically * Remove autoFocus prop being set as true from EuiComponent * Hide per page option from list version tables for experiments, treatments and segments * Refactor conditional component rendering * Standardise extraction of config variables * Replace relative import paths with absolute paths * Move flyout width styling to scss files * Revert changes to segmenter scope badge colours * Remove healthColor values from experiment and segmenter status * Refactor flyout custom styles separately as a special class
caraml-dev · Sep 13, 2022 · 6bd3be9 · 6bd3be9
1 parent 2728e18
commit 6bd3be9
Show file tree

Hide file tree

Showing 72 changed files with 5,591 additions and 4,696 deletions.
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -29,7 +29,7 @@ jobs:
 
       - uses: actions/setup-node@v3
         with:
-          node-version: 14
+          node-version: 16
 
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path

diff --git a/ui/README.md b/ui/README.md
@@ -4,7 +4,7 @@ This is the UI component of XP based on React web framework.
 
 ## Prerequisites
 
-- [Node.js](https://nodejs.org/en/download/) v14
+- [Node.js](https://nodejs.org/en/download/) v16
 - yarn 1.22.x (`npm install --global yarn`)
 
 ## Install Dependencies

diff --git a/ui/package.json b/ui/package.json
@@ -4,17 +4,19 @@
   "private": true,
   "homepage": "/xp",
   "dependencies": {
+    "@emotion/react": "^11.9.0",
     "@elastic/datemath": "5.0.3",
-    "@elastic/eui": "32.3.0",
-    "@gojek/mlp-ui": "1.4.19",
+    "@elastic/eui": "66.0.0",
+    "@gojek/mlp-ui": "1.6.1",
     "@reach/router": "1.3.4",
     "@sentry/browser": "5.15.5",
     "json-bigint": "1.0.0",
     "lint-staged": "^11.1.2",
-    "moment": "^2.29.0",
+    "moment": "^2.29.4",
     "object-assign-deep": "^0.4.0",
-    "react": "16.14.0",
-    "react-dom": "16.14.0",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-scripts": "^5.0.1",
     "resize-observer-polyfill": "^1.5.1",
     "yup": "^0.29.1"
   },
@@ -28,8 +30,7 @@
     "node-sass": "^6.0.1",
     "postcss-normalize": "10.0.1",
     "prettier": "^2.3.2",
-    "prettier-plugin-import-sort": "^0.0.7",
-    "react-scripts": "5.0.0-next.37"
+    "prettier-plugin-import-sort": "^0.0.7"
   },
   "resolutions": {
     "react-scripts/**/postcss-normalize": "10.0.1",

diff --git a/ui/src/App.js b/ui/src/App.js
@@ -2,7 +2,7 @@ import React from "react";
 
 import {
   AuthProvider,
-  Empty,
+  Page404,
   ErrorBoundary,
   Login,
   MlpApiContextProvider,
@@ -15,45 +15,48 @@ import { useConfig } from "config";
 import ExperimentsLandingPage from "experiments/ExperimentsLandingPage";
 import Home from "Home";
 import { PrivateLayout } from "PrivateLayout";
+import { EuiProvider } from "@elastic/eui";
 
 const App = () => {
   const { apiConfig, appConfig, authConfig } = useConfig();
   return (
-    <ErrorBoundary>
-      <MlpApiContextProvider
-        mlpApiUrl={apiConfig.mlpApiUrl}
-        timeout={apiConfig.apiTimeout}>
-        <AuthProvider clientId={authConfig.oauthClientId}>
-          <Router role="group">
-            <Login path="/login" />
-
-            <Redirect from="/" to={appConfig.homepage} noThrow />
-
-            <Redirect
-              from={`${appConfig.homepage}/projects/:projectId`}
-              to={`${appConfig.homepage}/projects/:projectId/experiments`}
-              noThrow
-            />
-
-            {/* HOME */}
-            <PrivateRoute
-              path={appConfig.homepage}
-              render={PrivateLayout(Home)}
-            />
-
-            {/* EXPERIMENTS */}
-            <PrivateRoute
-              path={`${appConfig.homepage}/projects/:projectId/experiments/*`}
-              render={PrivateLayout(ExperimentsLandingPage)}
-            />
-
-            {/* DEFAULT */}
-            <Empty default />
-          </Router>
-          <Toast />
-        </AuthProvider>
-      </MlpApiContextProvider>
-    </ErrorBoundary>
+    <EuiProvider>
+      <ErrorBoundary>
+        <MlpApiContextProvider
+          mlpApiUrl={apiConfig.mlpApiUrl}
+          timeout={apiConfig.apiTimeout}>
+          <AuthProvider clientId={authConfig.oauthClientId}>
+            <Router role="group">
+              <Login path="/login" />
+
+              <Redirect from="/" to={appConfig.homepage} noThrow />
+
+              <Redirect
+                from={`${appConfig.homepage}/projects/:projectId`}
+                to={`${appConfig.homepage}/projects/:projectId/experiments`}
+                noThrow
+              />
+
+              {/* HOME */}
+              <PrivateRoute
+                path={appConfig.homepage}
+                render={PrivateLayout(Home)}
+              />
+
+              {/* EXPERIMENTS */}
+              <PrivateRoute
+                path={`${appConfig.homepage}/projects/:projectId/experiments/*`}
+                render={PrivateLayout(ExperimentsLandingPage)}
+              />
+
+              {/* DEFAULT */}
+              <Page404 default />
+            </Router>
+            <Toast />
+          </AuthProvider>
+        </MlpApiContextProvider>
+      </ErrorBoundary>
+    </EuiProvider>
   );
 };
 

diff --git a/ui/src/Home.js b/ui/src/Home.js
@@ -1,22 +1,24 @@
 import React, { Fragment } from "react";
 
-import { EuiEmptyPrompt } from "@elastic/eui";
+import { EuiPageTemplate } from "@elastic/eui";
 
 import { useConfig } from "config";
 
 const Home = () => {
   const { appConfig } = useConfig();
 
   return (
-    <EuiEmptyPrompt
-      iconType={appConfig.appIcon}
-      title={<h2>XP: Experimentation Platform</h2>}
-      body={
-        <Fragment>
-          <p>To start off, please select a project from the dropdown.</p>
-        </Fragment>
-      }
-    />
+    <EuiPageTemplate>
+      <EuiPageTemplate.EmptyPrompt
+        iconType={appConfig.appIcon}
+        title={<h2>XP: Experimentation Platform</h2>}
+        body={
+          <Fragment>
+            <p>To start off, please select a project from the dropdown.</p>
+          </Fragment>
+        }
+      />
+    </EuiPageTemplate>
   );
 };
 

diff --git a/ui/src/PrivateLayout.js b/ui/src/PrivateLayout.js
@@ -28,9 +28,7 @@ export const PrivateLayout = (Component) => {
             }
             docLinks={appConfig.docsUrl}
           />
-          <div className="main-component-layout">
-            <Component {...props} />
-          </div>
+          <Component {...props} />
         </CurrentProjectContextProvider>
       </ProjectsContextProvider>
     </ApplicationsContextProvider>

diff --git a/ui/src/assets/style.scss b/ui/src/assets/style.scss
@@ -1,4 +1,4 @@
-@import "~@elastic/eui/src/theme_light.scss";
+@import "~@elastic/eui/dist/eui_theme_light.css";
 @import "~@gojek/mlp-ui/dist/index.css";
 
 // don't stretch all the way

diff --git a/ui/src/components/config_section/ConfigPanel.scss b/ui/src/components/config_section/ConfigPanel.scss
@@ -1,7 +1,7 @@
 @import "node_modules/@elastic/eui/src/global_styling/mixins/typography";
 
 .euiPanel--detailedConfigSection {
-  .euiDescriptionList.euiDescriptionList--responsiveColumn {
+  .euiDescriptionList {
     > * {
       @include euiTextBreakWord;
 

diff --git a/ui/src/components/config_section/ConfigSectionTitle.js b/ui/src/components/config_section/ConfigSectionTitle.js
@@ -1,16 +1,19 @@
 import React from "react";
 
-import { EuiIcon, EuiTextColor, EuiTitle } from "@elastic/eui";
+import { EuiIcon, EuiTextColor, EuiTitle, EuiSpacer } from "@elastic/eui";
 
 export const ConfigSectionTitle = ({ title, iconType }) => (
   <EuiTitle size="s">
-    <EuiTextColor color="secondary">
-      <span>
-        {!!iconType && (
-          <EuiIcon className="eui-alignBaseline" type={iconType} size="m" />
-        )}
-        &nbsp;{title}
-      </span>
-    </EuiTextColor>
+    <span>
+      <EuiTextColor color="success">
+        <span>
+          {!!iconType && (
+            <EuiIcon className="eui-alignBaseline" type={iconType} size="m" />
+          )}
+          &nbsp;{title}
+        </span>
+        <EuiSpacer size="s" />
+      </EuiTextColor>
+    </span>
   </EuiTitle>
 );
diff --git a/ui/src/components/page/LandingView.js b/ui/src/components/page/LandingView.js
@@ -1,13 +1,12 @@
-import React, { useContext } from "react";
+import React, { Fragment, useContext } from "react";
 
 import {
   EuiLink,
   EuiLoadingChart,
-  EuiPage,
-  EuiPanel,
   EuiSpacer,
   EuiText,
   EuiTextAlign,
+  EuiPageTemplate
 } from "@elastic/eui";
 
 import ProjectContext from "providers/project/context";
@@ -22,21 +21,27 @@ const LandingView = ({ Component, name, projectId, ...props }) => {
           <EuiLoadingChart size="xl" mono />
         </EuiTextAlign>
       ) : !isProjectOnboarded(projectId) ? (
-        <EuiPage>
-          <EuiPanel>
-            <EuiText>
-              Welcome to {name}.{"\n\n"}
-            </EuiText>
-            <EuiSpacer />
-            <EuiText>
-              This project has not been set up. Get started{" "}
-              <EuiLink onClick={() => props.navigate("./settings/create")}>
+        <EuiPageTemplate panelled={false}>
+          <EuiPageTemplate.EmptyPrompt
+            title={
+              <EuiText>
+                Welcome to {name}.{"\n\n"}
+              </EuiText>
+            }
+            body={
+              <Fragment>
+                <EuiSpacer />
+                <EuiText>
+                This project has not been set up. Get started{" "}
+                <EuiLink onClick={() => props.navigate("./settings/create")}>
                 here
-              </EuiLink>
-              .
-            </EuiText>
-          </EuiPanel>
-        </EuiPage>
+                </EuiLink>
+                .
+                </EuiText>
+              </Fragment>
+            }
+          />
+        </EuiPageTemplate>
       ) : (
         <Component projectId={projectId} {...props} />
       )}

diff --git a/ui/src/components/table/BasicTable.js b/ui/src/components/table/BasicTable.js
@@ -34,7 +34,7 @@ export const BasicTable = ({
       iconType="alert">
       <p>{error.message}</p>
     </EuiCallOut>
-  ) : !!onPaginationChange && !!totalItemCount & !!page ? (
+  ) : !!onPaginationChange && !!totalItemCount && !!page ? (
     <EuiBasicTable
       items={items}
       columns={tableColumns}
@@ -43,8 +43,8 @@ export const BasicTable = ({
       pagination={{
         pageIndex: page.index,
         pageSize: page.size,
+        showPerPageOptions: false,
         totalItemCount,
-        hidePerPageOptions: true,
       }}
       onChange={({ page = {} }) => onPaginationChange(page)}
     />

diff --git a/ui/src/config.js b/ui/src/config.js
@@ -47,6 +47,14 @@ export const appConfig = {
     tzOffsetMinutes: 0,
     tz: "UTC",
   },
+  // Specifies a set of page templating configurations that will soon be controlled by the mlp-ui package
+  // TO-DO: to review if these set of specifications are still needed after the update to mlp-ui
+  pageTemplate: {
+    // Width of page template
+    restrictWidth: "90%",
+    // Padding of page template
+    paddingSize: "none",
+  },
 };
 
 const sentryConfig = {

diff --git a/ui/src/experiments/components/form/components/general_config/ScheduleConfigPanel.js b/ui/src/experiments/components/form/components/general_config/ScheduleConfigPanel.js
@@ -86,9 +86,6 @@ export const ScheduleConfigPanel = ({
                     aria-label="Start Time"
                     showTimeSelect
                     utcOffset={appConfig.datetime.tzOffsetMinutes}
-                    popperProps={{
-                      positionFixed: true,
-                    }}
                   />
                 }
                 endDateControl={
@@ -101,9 +98,6 @@ export const ScheduleConfigPanel = ({
                     aria-label="End Time"
                     showTimeSelect
                     utcOffset={appConfig.datetime.tzOffsetMinutes}
-                    popperProps={{
-                      positionFixed: true,
-                    }}
                   />
                 }
               />

diff --git a/ui/src/experiments/components/form/components/segment_config/SegmentConfigPanel.js b/ui/src/experiments/components/form/components/segment_config/SegmentConfigPanel.js
@@ -121,7 +121,6 @@ export const SegmentConfigPanel = ({
           options={segmentSelectionOptions}
           onChange={onCustomOrTemplateSelection}
           selectedOptions={!!segmentTemplate ? [segmentTemplate] : []}
-          autoFocus
         />
       </EuiFormRow>
       <EuiSpacer />

diff --git a/ui/src/experiments/components/form/components/treatments_config/TreatmentCard.js b/ui/src/experiments/components/form/components/treatments_config/TreatmentCard.js
@@ -122,7 +122,6 @@ export const TreatmentCard = ({
                 selectedOptions={
                   !!treatment.template ? [treatment.template] : []
                 }
-                autoFocus
               />
             </EuiFormRow>
             <EuiSpacer size="m" />