From cbcd084649b5d899ff7911a0ea0eed2604c44399 Mon Sep 17 00:00:00 2001 From: Sergio Neves Barros Date: Tue, 26 Dec 2023 15:08:09 +0000 Subject: [PATCH] Adding introduction page for when no teams or environments have yet been setup. --- package-lock.json | 2 +- .../pages/dashboard/DashboardPage.js | 4 +- .../pages/introduction/IntroductionPage.js | 54 +++++++++++++++++++ src/components/pages/introduction/index.js | 22 ++++++++ src/components/pages/introduction/styles.less | 28 ++++++++++ src/components/pages/metrics/MetricsPage.js | 10 +++- src/components/pages/metrics/index.js | 4 +- src/containers/App.js | 25 ++++++--- src/styles/index.less | 5 ++ src/translations/cn.json | 7 +++ src/translations/en.json | 7 +++ src/translations/nl.json | 7 +++ src/translations/th.json | 7 +++ 13 files changed, 166 insertions(+), 16 deletions(-) create mode 100644 src/components/pages/introduction/IntroductionPage.js create mode 100644 src/components/pages/introduction/index.js create mode 100644 src/components/pages/introduction/styles.less diff --git a/package-lock.json b/package-lock.json index f9256b3..543d702 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6,7 +6,7 @@ "packages": { "": { "name": "angles-ui", - "version": "2.0.0", + "version": "2.0.13", "license": "Apache-2.0", "dependencies": { "@rsuite/charts": "5.2.0", diff --git a/src/components/pages/dashboard/DashboardPage.js b/src/components/pages/dashboard/DashboardPage.js index 712ddb7..2dcb9df 100644 --- 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" /> -
{totalTestRuns}
+
{totalTestRuns || 0}
diff --git a/src/components/pages/introduction/IntroductionPage.js b/src/components/pages/introduction/IntroductionPage.js new file mode 100644 index 0000000..ab89ec1 --- /dev/null +++ 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 ( +
+ + + + )} + > +
+
+ + + + ), + }} + /> +
+
+ + + + ), + }} + /> +
+
+ +
+ ); +}; + +export default IntroductionPage; diff --git a/src/components/pages/introduction/index.js b/src/components/pages/introduction/index.js new file mode 100644 index 0000000..4bc93cf --- /dev/null +++ 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 ( + + + + + + + + + + + + ); +}; + +export default Page; diff --git a/src/components/pages/introduction/styles.less b/src/components/pages/introduction/styles.less new file mode 100644 index 0000000..d791bea --- /dev/null +++ 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 index 644a3d0..a204b44 100644 --- 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 index c921497..1abfb85 100644 --- 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 ( @@ -16,8 +16,6 @@ const Page = function (props) { diff --git a/src/containers/App.js b/src/containers/App.js index 3e863e6..f286b1f 100644 --- 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) { ) : ( + // eslint-disable-next-line no-nested-ternary (!teamsError && teams === undefined) ? (
@@ -348,7 +350,11 @@ const App = function (props) {
) : ( - + (teams.length === 0) ? ( + + ) : ( + + ) ) ) } @@ -396,14 +402,17 @@ const App = function (props) { exact path="/metrics/" element={ - (currentTeam === undefined || !currentTeam._id) ? ( -
Please select a team
+ // eslint-disable-next-line no-nested-ternary + (Object.keys(teams).length === 0 || teams.length === 0) ? ( + ) : ( - + (!currentTeam || !currentTeam._id) ? ( + null + ) : ( + + ) ) } /> diff --git a/src/styles/index.less b/src/styles/index.less index b8dca69..1836ed0 100644 --- 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 index ee03481..0731a39 100644 --- 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 index c27685b..f293c5f 100644 --- 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 index 6c753ec..0ab3a59 100644 --- 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 index e26fd1d..33ede58 100644 --- 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": "ที่นี่",