Merge pull request #68 from AnglesHQ/default_landing_page

Adding introduction page
AnglesHQ · Dec 26, 2023 · 022c520 · 022c520
2 parents 4d3bed3 + cbcd084
commit 022c520
Show file tree

Hide file tree

Showing 13 changed files with 166 additions and 16 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/pages/dashboard/DashboardPage.js b/src/components/pages/dashboard/DashboardPage.js
@@ -164,7 +164,7 @@ const DashboardPage = function (props) {
         metrics,
       }) => {
         setBuilds(addIndexToBuilds(retrievedBuilds, skip));
-        setTestRunMetrics(metrics);
+        setTestRunMetrics(metrics || {});
         setCurrentSkip(skip);
       });
   };
@@ -375,7 +375,7 @@ const DashboardPage = function (props) {
                       id="page.dashboard.panel.total-test-runs"
                     />
                   </div>
-                  <div className="value">{totalTestRuns}</div>
+                  <div className="value">{totalTestRuns || 0}</div>
                 </Panel>
               </Col>
               <Col xs={8}>

diff --git a/src/components/pages/introduction/IntroductionPage.js b/src/components/pages/introduction/IntroductionPage.js
@@ -0,0 +1,54 @@
+import React from 'react';
+import {
+  Panel,
+} from 'rsuite';
+import { FormattedMessage } from 'react-intl';
+
+const IntroductionPage = function () {
+  const getSwaggerUrl = function () {
+    return `${process.env.REACT_APP_ANGLES_API_URL}/api-docs`;
+  };
+
+  return (
+    <div>
+      <Panel
+        bordered
+        className="introduction-page-panel"
+        header={(
+          <span className="introduction-page-header">
+            <FormattedMessage id="page.introduction.header" />
+          </span>
+        )}
+      >
+        <div className="introduction-main-div">
+          <div>
+            <FormattedMessage
+              id="page.introduction.description"
+              values={{
+                apiLink: (
+                  <a href={getSwaggerUrl()} target="_blank" rel="noopener noreferrer">
+                    <FormattedMessage id="page.introduction.api-link-text" />
+                  </a>
+                ),
+              }}
+            />
+          </div>
+          <div className="introduction-alternative-description">
+            <FormattedMessage
+              id="page.introduction.description-alternative"
+              values={{
+                githubLink: (
+                  <a href="https://angleshq.github.io/" target="_blank" rel="noopener noreferrer">
+                    <FormattedMessage id="page.introduction.github-link-text" />
+                  </a>
+                ),
+              }}
+            />
+          </div>
+        </div>
+      </Panel>
+    </div>
+  );
+};
+
+export default IntroductionPage;
diff --git a/src/components/pages/introduction/index.js b/src/components/pages/introduction/index.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { Breadcrumb, Panel } from 'rsuite';
+import IntroductionPage from './IntroductionPage';
+
+const Page = function () {
+  return (
+    <Panel>
+      <Breadcrumb>
+        <Breadcrumb.Item href="/">
+          <FormattedMessage id="page.home.bread-crumb" />
+        </Breadcrumb.Item>
+        <Breadcrumb.Item>
+          <FormattedMessage id="page.introduction.bread-crumb" />
+        </Breadcrumb.Item>
+      </Breadcrumb>
+      <IntroductionPage />
+    </Panel>
+  );
+};
+
+export default Page;
diff --git a/src/components/pages/introduction/styles.less b/src/components/pages/introduction/styles.less
@@ -0,0 +1,28 @@
+
+.introduction-page-panel {
+  background-color: var(--main-panel-background);
+  color: var(--main-panel-font-color);
+  border: none;
+
+  .introduction-page-header {
+    color: var(--main-panel-font-color);
+    font-weight: bold;
+  }
+
+  .introduction-page-section {
+    padding-bottom: 10px;
+  }
+
+  .introduction-page-section-table {
+    padding-top: 10px;
+  }
+
+  .introduction-main-div {
+    white-space: pre-line;
+  }
+
+  .introduction-alternative-description {
+    padding-top: 20px;
+  }
+}
+
diff --git a/src/components/pages/metrics/MetricsPage.js b/src/components/pages/metrics/MetricsPage.js
@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import axios from 'axios';
 import moment from 'moment';
+import { connect } from 'react-redux';
 import { FormattedMessage, useIntl } from 'react-intl';
 import queryString from 'query-string';
 import { useLocation, useNavigate } from 'react-router-dom';
@@ -41,7 +42,7 @@ const MetricsPage = function (props) {
   const [startDate, setStartDate] = useState(queryStartDate ? moment(queryStartDate) : moment().subtract(30, 'days'));
   const [endDate, setEndDate] = useState(queryEndDate ? moment(queryEndDate) : moment());
   const [groupingPeriod, setGroupingPeriod] = useState(grouping || 'week');
-  const [selectedTeam, setSelectedTeam] = useState(currentTeam._id);
+  const [selectedTeam, setSelectedTeam] = useState(currentTeam._id || undefined);
   const [selectedComponent, setSelectedComponent] = useState(component || 'any');
   const [key, setKey] = useState('execution');
   const [metrics, setMetrics] = useState({});
@@ -312,4 +313,9 @@ const MetricsPage = function (props) {
   );
 };
 
-export default MetricsPage;
+const mapStateToProps = (state) => ({
+  currentTeam: state.teamsReducer.currentTeam,
+  teams: state.teamsReducer.teams,
+});
+
+export default connect(mapStateToProps, null)(MetricsPage);
diff --git a/src/components/pages/metrics/index.js b/src/components/pages/metrics/index.js
@@ -4,7 +4,7 @@ import { Breadcrumb, Panel } from 'rsuite';
 import MetricsPage from './MetricsPage';
 
 const Page = function (props) {
-  const { teams, currentTeam, changeCurrentTeam } = props;
+  const { changeCurrentTeam } = props;
   return (
     <Panel>
       <Breadcrumb>
@@ -16,8 +16,6 @@ const Page = function (props) {
         </Breadcrumb.Item>
       </Breadcrumb>
       <MetricsPage
-        currentTeam={currentTeam}
-        teams={teams}
         changeCurrentTeam={changeCurrentTeam}
       />
     </Panel>

diff --git a/src/containers/App.js b/src/containers/App.js
@@ -37,6 +37,7 @@ import ScreenshotLibraryPage from '../components/pages/screenshot-library';
 import ExecutionHistoryPage from '../components/pages/test-execution-history';
 import AboutPage from '../components/pages/about';
 import NotFoundPage from '../components/pages/not-found';
+import IntroductionPage from '../components/pages/introduction';
 
 import MetricsPage from '../components/pages/metrics';
 import { storeCurrentTeam, storeTeams, storeTeamsError } from '../redux/teamActions';
@@ -336,6 +337,7 @@ const App = function (props) {
                       </span>
                     </div>
                   ) : (
+                    // eslint-disable-next-line no-nested-ternary
                     (!teamsError && teams === undefined) ? (
                       <div key="retrieving-teams" className="alert alert-primary" role="alert">
                         <span>
@@ -348,7 +350,11 @@ const App = function (props) {
                         </span>
                       </div>
                     ) : (
-                      <SummaryPage changeCurrentTeam={changeCurrentTeam} />
+                      (teams.length === 0) ? (
+                        <IntroductionPage />
+                      ) : (
+                        <SummaryPage changeCurrentTeam={changeCurrentTeam} />
+                      )
                     )
                   )
                 }
@@ -396,14 +402,17 @@ const App = function (props) {
                 exact
                 path="/metrics/"
                 element={
-                  (currentTeam === undefined || !currentTeam._id) ? (
-                    <div>Please select a team</div>
+                  // eslint-disable-next-line no-nested-ternary
+                  (Object.keys(teams).length === 0 || teams.length === 0) ? (
+                    <IntroductionPage />
                   ) : (
-                    <MetricsPage
-                      currentTeam={currentTeam}
-                      teams={teams}
-                      changeCurrentTeam={changeCurrentTeam}
-                    />
+                    (!currentTeam || !currentTeam._id) ? (
+                      null
+                    ) : (
+                      <MetricsPage
+                        changeCurrentTeam={changeCurrentTeam}
+                      />
+                    )
                   )
                 }
               />

diff --git a/src/styles/index.less b/src/styles/index.less
@@ -7,6 +7,7 @@
 @import '../components/pages/not-found/styles.less';
 @import '../components/pages/test-execution-history/styles.less';
 @import '../components/pages/screenshot-library/styles.less';
+@import '../components/pages/introduction/styles.less';
 @import '../components/common/execution-timeline/styles.less';
 @import '../components/common/screenshot-view/styles.less';
 @import '../components/common/test-suite/styles.less';
@@ -167,6 +168,10 @@ body {
         left: 19px;
         top: 14px;
     }
+    .rs-sidenav-body {
+        margin-left: -3px;
+        padding-right: 3px;
+    }
 
     .rs-sidenav-item {
         color: var(--nav-font-color);

diff --git a/src/translations/cn.json b/src/translations/cn.json
@@ -143,6 +143,13 @@
   "page.about.about-api": "透過提供明確定義的 {apiLink}，任何框架都可以適應將其測試結果存儲在Angles中，使用提供的客戶端之一（或直接使用API）。",
   "page.about.about-github": "有關 Angles 的更多信息，請訪問頁面：{githubLink}",
 
+  "page.introduction.bread-crumb": "簡介",
+  "page.introduction.header": "歡迎來到角度",
+  "page.introduction.description": "您似乎尚未設定任何團隊或環境。\n\n這可以透過使用 {apiLink} 來完成。",
+  "page.introduction.api-link-text": "Swagger API",
+  "page.introduction.description-alternative": "或您也可以使用 {githubLink} 開始。",
+  "page.introduction.github-link-text": "Github 頁面",
+
   "page.not-found.bread-crumb": "找不到",
   "page.not-found.description": "哎呀，糟糕，我們無法找到您要找的東西。點選 {homeLink} 返回主頁。",
   "page.not-found.home-link-text": "此處",

diff --git a/src/translations/en.json b/src/translations/en.json
@@ -143,6 +143,13 @@
   "page.about.about-api": "By providing a clearly defined {apiLink} any framework can be adapted to store its test result in Angles, using one of the clients provided (or by using the API directly)",
   "page.about.about-github": "For more information about Angles go to page: {githubLink}",
 
+  "page.introduction.bread-crumb": "Introduction",
+  "page.introduction.header": "Welcome to Angles",
+  "page.introduction.description": "It looks like you haven't setup any teams or environments.\n\nThis can be done by using {apiLink}.",
+  "page.introduction.api-link-text": "the Swagger API",
+  "page.introduction.description-alternative": "Or alternatively you can use {githubLink} to get started.",
+  "page.introduction.github-link-text": "the Github page",
+
   "page.not-found.bread-crumb" : "Not found",
   "page.not-found.description": "Oops, we were unable to find the \"Angle\" you were looking for. Click {homeLink} to go back to home page.",
   "page.not-found.home-link-text": "here",

diff --git a/src/translations/nl.json b/src/translations/nl.json
@@ -143,6 +143,13 @@
   "page.about.about-api": "Via het duidelijk omschreven {apiLink} van Angles kan elke geautomatiseerde test framework aangepast worden om zijn resultaten in Angles op te slaan",
   "page.about.about-github": "Voor meer information over Angles kun je terecht op onze pagine: {githubLink}",
 
+  "page.introduction.bread-crumb": "Inleiding",
+  "page.introduction.header": "Welkom bij Angles",
+  "page.introduction.description": "Het lijkt erop dat u geen teams of omgevingen heeft ingesteld.\n\nDit kunt u doen door {apiLink} te gebruiken.",
+  "page.introduction.api-link-text": "de Swagger-API",
+  "page.introduction.description-alternative": "Of u kunt ook {githubLink} gebruiken om aan de slag te gaan.",
+  "page.introduction.github-link-text": "de Github-pagina",
+
   "page.not-found.bread-crumb" : "Pagina niet gevonden",
   "page.not-found.description": "Oeps, we hebben de pagina die je aan het zoeken was niet kunnen vinden. Klik {homeLink} om terug te gaan naar de home pagina.",
   "page.not-found.home-link-text": "hier",

diff --git a/src/translations/th.json b/src/translations/th.json
@@ -143,6 +143,13 @@
   "page.about.about-api": "ด้วยการจัดเตรียม {apiLink} ที่กำหนดไว้อย่างชัดเจน คุณสามารถปรับใช้เฟรมเวิร์กใดๆ เพื่อจัดเก็บผลการทดสอบใน Angles ได้โดยใช้หนึ่งในไคลเอนต์ที่ให้มา (หรือโดยใช้ API โดยตรง)",
   "page.about.about-github": "สำหรับข้อมูลเพิ่มเติมเกี่ยวกับ Angles ให้ไปที่หน้า: {githubLink}",
 
+  "page.introduction.bread-crumb": "บทนำ",
+  "page.introduction.header": "ยินดีต้อนรับสู่ Angles",
+  "page.introduction.description": "ดูเหมือนว่าคุณยังไม่ได้ตั้งค่าทีมหรือสภาพแวดล้อมใดๆ\n\nซึ่งสามารถทำได้โดยใช้ {apiLink}",
+  "page.introduction.api-link-text": "Swagger API",
+  "page.introduction.description-alternative": "หรืออีกทางหนึ่ง คุณสามารถใช้ {githubLink} เพื่อเริ่มต้นได้",
+  "page.introduction.github-link-text": "หน้า Github",
+
   "page.not-found.bread-crumb" : "ไม่เจอ",
   "page.not-found.description": "อ๊ะ เราไม่พบที่คุณกำลังหา คลิก {homeLink} เพื่อกลับไปที่หน้าแรก",
   "page.not-found.home-link-text": "ที่นี่",