From 52975b97411455b3cc464fd40b4746418dcedc75 Mon Sep 17 00:00:00 2001
From: Mansoor Sajjad <mansoor.sajjad@entur.org>
Date: Fri, 13 Dec 2024 11:21:10 +0100
Subject: [PATCH] Remove OTP1 graph status.

---
 src/actions/SuppliersActions.js               |  12 +-
 src/sass/main.scss                            |   4 +-
 .../providers/components/GraphStatus.js       |  66 ++++-----
 .../components/ShowOTPGraphStatus.js          |   8 +-
 .../components/SupplierTabWrapper.js          |   6 +-
 .../components/SuppliersContainer.js          | 125 ++++++++----------
 src/screens/providers/providers.js            |   9 +-
 7 files changed, 96 insertions(+), 134 deletions(-)

diff --git a/src/actions/SuppliersActions.js b/src/actions/SuppliersActions.js
index 8b83e7af..4170e411 100644
--- a/src/actions/SuppliersActions.js
+++ b/src/actions/SuppliersActions.js
@@ -764,21 +764,11 @@ SuppliersActions.getGraphStatus = () => async (dispatch, getState) => {
         otherStatus: []
       };
       response.data.forEach(type => {
-        if (type.jobType === 'BUILD_GRAPH') {
-          status.graphStatus.otp1 = {
-            status: type.currentState,
-            started: type.currentStateDate
-          };
-        } else if (type.jobType === 'OTP2_BUILD_GRAPH') {
+        if (type.jobType === 'OTP2_BUILD_GRAPH') {
           status.graphStatus.otp2 = {
             status: type.currentState,
             started: type.currentStateDate
           };
-        } else if (type.jobType === 'BUILD_BASE') {
-          status.baseGraphStatus.otp1 = {
-            status: type.currentState,
-            started: type.currentStateDate
-          };
         } else if (type.jobType === 'OTP2_BUILD_BASE') {
           status.baseGraphStatus.otp2 = {
             status: type.currentState,
diff --git a/src/sass/main.scss b/src/sass/main.scss
index cbabf8ea..2443f794 100644
--- a/src/sass/main.scss
+++ b/src/sass/main.scss
@@ -40,7 +40,8 @@ body {
 
 .supplier-info {
   background: #fff;
-  margin: 10px 20px 20px;
+  margin: 0 20px 20px;
+  padding: 0 10px 10px;
   border: 1px solid #ccc;
   flex-grow: 1;
 
@@ -61,7 +62,6 @@ body {
 }
 
 .suppliers-container {
-  flex-grow: 1;
   > h1 {
     margin-bottom: 40px;
     font-weight: 500;
diff --git a/src/screens/providers/components/GraphStatus.js b/src/screens/providers/components/GraphStatus.js
index 447810c2..8d65e4f6 100644
--- a/src/screens/providers/components/GraphStatus.js
+++ b/src/screens/providers/components/GraphStatus.js
@@ -36,12 +36,15 @@ const getColorByStatus = status => {
 const containerStyle = {
   display: 'flex',
   flexDirection: 'row',
-  justifyContent: 'space-between',
-  width: '360px',
-  margin: '0 30px'
+  margin: '0 20px',
+  lineHeight: '24px'
 };
 
-const wrapperStyle = {};
+const wrapperStyle = {
+  display: 'flex',
+  flexDirection: 'column',
+  margin: '0 10px'
+};
 
 const statusStyle = {
   display: 'flex',
@@ -49,21 +52,18 @@ const statusStyle = {
   flexDirection: 'row'
 };
 
-const GraphStatusDetails = ({ title, status, started }) => (
+const GraphStatusDetails = ({ status, started }) => (
   <div style={statusStyle}>
     {status && started && (
       <>
-        <span>
-          {title}
-          <span
-            style={{
-              fontWeight: 600,
-              marginLeft: 5,
-              color: getColorByStatus(status)
-            }}
-          >
-            {status}
-          </span>
+        <span
+          style={{
+            fontWeight: 600,
+            marginLeft: 5,
+            color: getColorByStatus(status)
+          }}
+        >
+          {status}
         </span>
         <span
           title={moment(started).format('DD-MM-YYYY hh:mm:ss')}
@@ -111,40 +111,22 @@ class GraphStatus extends React.Component {
     return (
       <div style={containerStyle}>
         <div style={wrapperStyle}>
-          <>
-            <h4 style={{ fontWeight: 'bold' }}>Graph status</h4>
-            {graphStatus.otp1 && (
-              <GraphStatusDetails
-                title="OTP1"
-                status={graphStatus.otp1.status}
-                started={graphStatus.otp1.started}
-              />
-            )}
-            {graphStatus.otp2 && (
-              <GraphStatusDetails
-                title="OTP2"
-                status={graphStatus.otp2.status}
-                started={graphStatus.otp2.started}
-              />
-            )}
-          </>
+          <h4 style={{ fontWeight: 'bold', margin: '0' }}>Graph status</h4>
+          <h4 style={{ fontWeight: 'bold', margin: '0' }}>Base graph status</h4>
         </div>
         <div style={wrapperStyle}>
-          <h4 style={{ fontWeight: 'bold' }}>Base graph status</h4>
-          {baseGraphStatus.otp1 && (
-            <GraphStatusDetails
-              title="OTP1"
-              status={baseGraphStatus.otp1.status}
-              started={baseGraphStatus.otp1.started}
-            />
-          )}
           {baseGraphStatus.otp2 && (
             <GraphStatusDetails
-              title="OTP2"
               status={baseGraphStatus.otp2.status}
               started={baseGraphStatus.otp2.started}
             />
           )}
+          {graphStatus.otp2 && (
+            <GraphStatusDetails
+              status={'STARTED'}
+              started={graphStatus.otp2.started}
+            />
+          )}
         </div>
       </div>
     );
diff --git a/src/screens/providers/components/ShowOTPGraphStatus.js b/src/screens/providers/components/ShowOTPGraphStatus.js
index 51cb9251..c9d0388d 100644
--- a/src/screens/providers/components/ShowOTPGraphStatus.js
+++ b/src/screens/providers/components/ShowOTPGraphStatus.js
@@ -4,15 +4,11 @@ import LatestOTPGraphVersions from './LatestOTPGraphVersions';
 
 export const ShowOTPGraphStatus = () => {
   return (
-    <div
-      style={{ display: 'flex', flexDirection: 'column', position: 'relative' }}
-    >
+    <div style={{ display: 'flex' }}>
       <div
         style={{
           display: 'flex',
-          alignItems: 'flex-end',
-          margin: '0px 20px 0 10px',
-          justifyContent: 'flex-end'
+          alignItems: 'center'
         }}
       >
         <LatestOTPGraphVersions />
diff --git a/src/screens/providers/components/SupplierTabWrapper.js b/src/screens/providers/components/SupplierTabWrapper.js
index 20398ede..be72db87 100644
--- a/src/screens/providers/components/SupplierTabWrapper.js
+++ b/src/screens/providers/components/SupplierTabWrapper.js
@@ -378,11 +378,7 @@ class SupplierTabWrapper extends React.Component {
         );
       }
 
-      return (
-        <div className="supplier-info">
-          <div style={{ marginLeft: 10, marginRight: 10 }}>{tabsToRender}</div>
-        </div>
-      );
+      return <div className="supplier-info">{tabsToRender}</div>;
     } else {
       return null;
     }
diff --git a/src/screens/providers/components/SuppliersContainer.js b/src/screens/providers/components/SuppliersContainer.js
index b00ee90c..2586a017 100644
--- a/src/screens/providers/components/SuppliersContainer.js
+++ b/src/screens/providers/components/SuppliersContainer.js
@@ -107,85 +107,76 @@ class SuppliersContainer extends React.Component {
 
     return (
       <div className="suppliers-container">
-        <div
-          style={{
-            display: 'flex',
-            justifyContent: 'space-between',
-            margin: 'auto',
-            width: '98%'
-          }}
-        >
-          <div style={{ display: 'flex', alignItems: 'center' }}>
-            <SelectSupplier
-              suppliers={supplierItems}
-              selectSupplier={v => this.selectSupplier(v)}
-              selectedSupplierId={activeProviderId}
-            />
-            {canEditOrganisation && (
+        <div style={{ display: 'flex', alignItems: 'center' }}>
+          <SelectSupplier
+            suppliers={supplierItems}
+            selectSupplier={v => this.selectSupplier(v)}
+            selectedSupplierId={activeProviderId}
+          />
+          {canEditOrganisation && (
+            <div
+              style={{
+                display: 'inline-block',
+                marginTop: 25,
+                marginLeft: 15
+              }}
+            >
               <div
+                title={toolTips.editProvider}
                 style={{
                   display: 'inline-block',
-                  marginTop: 25,
-                  marginLeft: 15
+                  cursor: 'pointer',
+                  marginRight: 10
                 }}
+                onClick={() => this.handleEditProvider()}
               >
-                <div
-                  title={toolTips.editProvider}
-                  style={{
-                    display: 'inline-block',
-                    cursor: 'pointer',
-                    marginRight: 10
-                  }}
-                  onClick={() => this.handleEditProvider()}
-                >
-                  {!this.props.displayAllSuppliers && (
-                    <div style={{ display: 'flex', alignItems: 'center' }}>
-                      <MdEdit style={{ width: '1.1em', height: '1.1em' }} />
-                      <span style={{ marginLeft: 2 }}>Edit</span>
-                    </div>
-                  )}
-                </div>
-                <div
-                  title={toolTips.createNewProvider}
-                  style={{
-                    display: 'inline-block',
-                    cursor: 'pointer',
-                    marginRight: 10
-                  }}
-                  onClick={() => this.handleNewProvider()}
-                >
+                {!this.props.displayAllSuppliers && (
                   <div style={{ display: 'flex', alignItems: 'center' }}>
-                    <MdNew style={{ width: '1.2em', height: '1.2em' }} />
-                    <span style={{ marginLeft: 2 }}>New</span>
+                    <MdEdit style={{ width: '1.1em', height: '1.1em' }} />
+                    <span style={{ marginLeft: 2 }}>Edit</span>
                   </div>
+                )}
+              </div>
+              <div
+                title={toolTips.createNewProvider}
+                style={{
+                  display: 'inline-block',
+                  cursor: 'pointer',
+                  marginRight: 10
+                }}
+                onClick={() => this.handleNewProvider()}
+              >
+                <div style={{ display: 'flex', alignItems: 'center' }}>
+                  <MdNew style={{ width: '1.2em', height: '1.2em' }} />
+                  <span style={{ marginLeft: 2 }}>New</span>
                 </div>
+              </div>
 
-                <div
-                  title={toolTips.deleteProvider}
-                  style={{ display: 'inline-block', cursor: 'pointer' }}
-                  onClick={() => this.handleOpenConfirmDeleteProviderDialog()}
-                >
-                  <div style={{ display: 'flex', alignItems: 'center' }}>
-                    <MdDelete style={{ width: '1.2em', height: '1.2em' }} />
-                    <span style={{ marginLeft: 2 }}>Delete</span>
-                  </div>
+              <div
+                title={toolTips.deleteProvider}
+                style={{ display: 'inline-block', cursor: 'pointer' }}
+                onClick={() => this.handleOpenConfirmDeleteProviderDialog()}
+              >
+                <div style={{ display: 'flex', alignItems: 'center' }}>
+                  <MdDelete style={{ width: '1.2em', height: '1.2em' }} />
+                  <span style={{ marginLeft: 2 }}>Delete</span>
                 </div>
               </div>
-            )}
-          </div>
-          <ConfirmDialog
-            open={this.state.confirmDialogOpen}
-            handleSubmit={this.state.confirmAction}
-            title={this.state.confirmTitle}
-            info={this.state.confirmInfo}
-            handleClose={() => {
-              this.setState({
-                confirmDialogOpen: false,
-                confirmAction: null
-              });
-            }}
-          />
+            </div>
+          )}
         </div>
+        <ConfirmDialog
+          open={this.state.confirmDialogOpen}
+          handleSubmit={this.state.confirmAction}
+          title={this.state.confirmTitle}
+          info={this.state.confirmInfo}
+          handleClose={() => {
+            this.setState({
+              confirmDialogOpen: false,
+              confirmAction: null
+            });
+          }}
+        />
       </div>
     );
   }
diff --git a/src/screens/providers/providers.js b/src/screens/providers/providers.js
index f1411585..66322690 100644
--- a/src/screens/providers/providers.js
+++ b/src/screens/providers/providers.js
@@ -16,7 +16,14 @@ const Providers = ({ auth, isAdmin }) => {
           <div
             style={{ display: 'flex', flexDirection: 'column', flexGrow: 1 }}
           >
-            <div style={{ display: 'flex', flexDirection: 'row' }}>
+            <div
+              style={{
+                display: 'flex',
+                flexDirection: 'row',
+                margin: '0 20px',
+                justifyContent: 'space-between'
+              }}
+            >
               <SuppliersContainer />
               <ShowOTPGraphStatus />
             </div>