From bde42f80adf1cebcf5d9f7a7c8657ce1f517183d Mon Sep 17 00:00:00 2001
From: Stephen Yang <stephen.yang98@gmail.com>
Date: Thu, 9 May 2024 16:54:24 -0700
Subject: [PATCH 1/3] updated serviceslink component with deconstructed props

---
 app/modals/ServicesModal/ServicesLink.tsx  | 22 ++++++++++++----------
 app/modals/ServicesModal/ServicesModal.tsx |  1 +
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/app/modals/ServicesModal/ServicesLink.tsx b/app/modals/ServicesModal/ServicesLink.tsx
index b2d45837b..7f7b5bdb1 100644
--- a/app/modals/ServicesModal/ServicesLink.tsx
+++ b/app/modals/ServicesModal/ServicesLink.tsx
@@ -8,22 +8,24 @@ interface IService {
 
 
 const ServicesLink = (props) => {
+  const { services, setServices, servicesData, app} = props;
+
   const toggleService = service => {
-    if (props.services.includes(service)) {
-      props.setServices(props.services.filter(el => el !== service));
+    if (services.includes(service)) {
+      setServices(services.filter(el => el !== service));
     } else {
-      if (service !== 'communications' && props.services.includes('communications')) props.setServices([]);
-      props.setServices(props.services.concat(service));
+      if (service !== 'communications' && services.includes('communications')) setServices([]);
+      setServices(services.concat(service));
     }
   };
 
   return (
 
     <div className="services-links">
-      {props.servicesData.map((service: IService, index: number) => (
+      {servicesData.map((service: IService, index: number) => (
         <div
           key={`${index}servicesData`}
-          className={props.services.includes(service.microservice) ? 'link selected' : 'link'}
+          className={services.includes(service.microservice) ? 'link selected' : 'link'}
           onClick={() => toggleService(service.microservice)}
         >
           {service.microservice}
@@ -31,11 +33,11 @@ const ServicesLink = (props) => {
       ))}
       <Link id='selectLink'
         className="router link"
-        to={props.services.length > 0 ? `/applications/${props.app}/${props.services.join(' ')}` : '#'}
+        to={services.length > 0 ? `/applications/${app}/${services.join(' ')}` : '#'}
       >
-        {props.services.length === 0 && 'Select Services'}
-        {props.services.length === 1 && 'Display Service'}
-        {props.services.length > 1 && 'Compare Services'}
+        {services.length === 0 && 'Select Services'}
+        {services.length === 1 && 'Display Service'}
+        {services.length > 1 && 'Compare Services'}
       </Link>
     </div>
   )
diff --git a/app/modals/ServicesModal/ServicesModal.tsx b/app/modals/ServicesModal/ServicesModal.tsx
index 8e02d3a86..56e028c40 100644
--- a/app/modals/ServicesModal/ServicesModal.tsx
+++ b/app/modals/ServicesModal/ServicesModal.tsx
@@ -26,6 +26,7 @@ const ServicesModal: React.FC<ServicesModalProps> = React.memo(({ i, app }) => {
   const { user, applications } = useContext(DashboardContext);
   const { servicesData, connectToDB } = useContext(ApplicationContext);
   const [services, setServices] = useState<Array<string>>([]);
+  console.log(services);
   const [ cardName,dbType,dbURI,description,serviceType ] = applications[i]
 
 

From 373ca45e3061b4aae3da3b19d39b545b7e8cf5ad Mon Sep 17 00:00:00 2001
From: Stephen Yang <stephen.yang98@gmail.com>
Date: Sat, 11 May 2024 10:21:25 -0700
Subject: [PATCH 2/3] added select all services button

---
 app/context/ApplicationContext.tsx          | 5 ++---
 app/modals/ServicesModal/ServicesLink.tsx   | 9 +++++++--
 app/modals/ServicesModal/ServicesModal.scss | 4 ++--
 app/modals/ServicesModal/ServicesModal.tsx  | 1 +
 4 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/app/context/ApplicationContext.tsx b/app/context/ApplicationContext.tsx
index 7885794ac..6f7bdce3e 100644
--- a/app/context/ApplicationContext.tsx
+++ b/app/context/ApplicationContext.tsx
@@ -44,13 +44,13 @@ const ApplicationContextProvider: React.FC<AppContextProps> = React.memo(props =
     console.log({application});
     // console.log('Hi, inside ApplicationConext - fetchServicesNames callback. Sending servicesRequest to ipcMain.');
     console.log('app when fetch services name: ', application);
-    console.log(application)
+
     ipcRenderer.send('servicesRequest');
     ipcRenderer.on('servicesResponse', (event: Electron.Event, data: any) => {
       //data here refers to the data coming the services document of the database
       let result: any;
       result = JSON.parse(data);
-      console.log('result from ipcrenderer services response is: ', result);
+
       // console.log('Calling setServicesData passing in above result. Current servicesData is the following: ', servicesData);
       setServicesData(result);
       ipcRenderer.removeAllListeners('servicesResponse');
@@ -71,7 +71,6 @@ const ApplicationContextProvider: React.FC<AppContextProps> = React.memo(props =
     ipcRenderer.removeAllListeners('databaseConnected');
     ipcRenderer.send('connect', username, index, URI, databaseType);
     ipcRenderer.on('databaseConnected', (event: Electron.Event, data: any) => {
-      console.log({data});
       if(data === true) {
         fetchServicesNames(application);
       } else {
diff --git a/app/modals/ServicesModal/ServicesLink.tsx b/app/modals/ServicesModal/ServicesLink.tsx
index 7f7b5bdb1..8bfe2f560 100644
--- a/app/modals/ServicesModal/ServicesLink.tsx
+++ b/app/modals/ServicesModal/ServicesLink.tsx
@@ -31,14 +31,19 @@ const ServicesLink = (props) => {
           {service.microservice}
         </div>
       ))}
-      <Link id='selectLink'
-        className="router link"
+      <Link
+        className="selectLink router link"
         to={services.length > 0 ? `/applications/${app}/${services.join(' ')}` : '#'}
       >
         {services.length === 0 && 'Select Services'}
         {services.length === 1 && 'Display Service'}
         {services.length > 1 && 'Compare Services'}
       </Link>
+      <Link
+        className="selectLink router link"
+        to={`/applications/${app}/client event-bus items inventory orders auth`}>
+        Select All Services
+      </Link>
     </div>
   )
 }
diff --git a/app/modals/ServicesModal/ServicesModal.scss b/app/modals/ServicesModal/ServicesModal.scss
index 86456902c..51d84e6f2 100644
--- a/app/modals/ServicesModal/ServicesModal.scss
+++ b/app/modals/ServicesModal/ServicesModal.scss
@@ -49,7 +49,7 @@
       text-align: center;
       font-weight: 100;
 
-      &#selectLink {
+      &.selectLink {
         background-color: #fbdca3;
       }
 
@@ -83,4 +83,4 @@
   font-weight: 100;
   color: #444d56;
   border-radius: 5px;
-}
+}
\ No newline at end of file
diff --git a/app/modals/ServicesModal/ServicesModal.tsx b/app/modals/ServicesModal/ServicesModal.tsx
index 56e028c40..d2b59cd82 100644
--- a/app/modals/ServicesModal/ServicesModal.tsx
+++ b/app/modals/ServicesModal/ServicesModal.tsx
@@ -27,6 +27,7 @@ const ServicesModal: React.FC<ServicesModalProps> = React.memo(({ i, app }) => {
   const { servicesData, connectToDB } = useContext(ApplicationContext);
   const [services, setServices] = useState<Array<string>>([]);
   console.log(services);
+  console.log(services.join(' '));
   const [ cardName,dbType,dbURI,description,serviceType ] = applications[i]
 
 

From 6d430d40f82367f77c66a8a09162780837bc0639 Mon Sep 17 00:00:00 2001
From: Stephen Yang <stephen.yang98@gmail.com>
Date: Sat, 11 May 2024 10:38:34 -0700
Subject: [PATCH 3/3] deconstructed props in all modal components

---
 app/modals/AddModal/ServiceDBType.tsx       |  7 ++++---
 app/modals/AddModal/ServicesDescription.tsx | 13 +++++++------
 app/modals/AwsModal/AwsDescription.tsx      |  9 +++++----
 app/modals/AwsModal/AwsKeyUrl.tsx           | 21 +++++++++++----------
 app/modals/AwsModal/AwsRegion.tsx           |  5 +++--
 app/modals/AwsModal/AwsServiceInstance.tsx  | 11 ++++++-----
 6 files changed, 36 insertions(+), 30 deletions(-)

diff --git a/app/modals/AddModal/ServiceDBType.tsx b/app/modals/AddModal/ServiceDBType.tsx
index 34f3cf071..f436eb210 100644
--- a/app/modals/AddModal/ServiceDBType.tsx
+++ b/app/modals/AddModal/ServiceDBType.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 
 
 const ServiceDBType = (props) => {
+  const { typeOfService, handleChange, database } = props
   return (
     <>
       <div>
@@ -11,8 +12,8 @@ const ServiceDBType = (props) => {
           <select
             id="serv-type"
             name="typeOfService"
-            value={props.typeOfService}
-            onChange={e => props.handleChange(e)}
+            value={typeOfService}
+            onChange={e => handleChange(e)}
           >
             <option value="Docker">Docker</option>
             <option value="gRPC">gRPC</option>
@@ -24,7 +25,7 @@ const ServiceDBType = (props) => {
           <label htmlFor="db-type">
             Type of Database<span>*</span>
           </label>
-          <select id="db-type" name="database" value={props.database} onChange={e => props.handleChange(e)}>
+          <select id="db-type" name="database" value={database} onChange={e => handleChange(e)}>
             <option value="SQL">SQL</option>
             <option value="MongoDB">MongoDB</option>
           </select>
diff --git a/app/modals/AddModal/ServicesDescription.tsx b/app/modals/AddModal/ServicesDescription.tsx
index a36cae142..174fa00dd 100644
--- a/app/modals/AddModal/ServicesDescription.tsx
+++ b/app/modals/AddModal/ServicesDescription.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
 const ServicesDescription = (props) => {
+  const { URI, handleChange, name, description } = props;
   return (
     <>
       <div>
@@ -10,8 +11,8 @@ const ServicesDescription = (props) => {
           <input
             id="db-uri"
             name="URI"
-            value={props.URI}
-            onChange={e => props.handleChange(e)}
+            value={URI}
+            onChange={e => handleChange(e)}
             placeholder="Database URI"
             required
           />
@@ -24,8 +25,8 @@ const ServicesDescription = (props) => {
             id="db-name"
             type="text"
             name="name"
-            value={props.name}
-            onChange={e => props.handleChange(e)}
+            value={name}
+            onChange={e => handleChange(e)}
             placeholder="Add a name for your new service"
             required
           />
@@ -35,8 +36,8 @@ const ServicesDescription = (props) => {
           <textarea
             id="db-desc"
             name="description"
-            value={props.description}
-            onChange={e => props.handleChange(e)}
+            value={description}
+            onChange={e => handleChange(e)}
             placeholder="Add a short description"
           />
         </div>
diff --git a/app/modals/AwsModal/AwsDescription.tsx b/app/modals/AwsModal/AwsDescription.tsx
index 694905f8a..9563278f6 100644
--- a/app/modals/AwsModal/AwsDescription.tsx
+++ b/app/modals/AwsModal/AwsDescription.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
 const AwsDescription = (props) => {
+  const { name, handleChange, description } = props;
   return (
     <>
       <div>
@@ -11,8 +12,8 @@ const AwsDescription = (props) => {
           id="aws-name"
           type="text"
           name="name"
-          value={props.name}
-          onChange={e => props.handleChange(e)}
+          value={name}
+          onChange={e => handleChange(e)}
           placeholder="Add a name for your new service"
           required
         />
@@ -22,8 +23,8 @@ const AwsDescription = (props) => {
         <textarea
           id="db-desc"
           name="description"
-          value={props.description}
-          onChange={e => props.handleChange(e)}
+          value={description}
+          onChange={e => handleChange(e)}
           placeholder="Add a short description"
         />
       </div>
diff --git a/app/modals/AwsModal/AwsKeyUrl.tsx b/app/modals/AwsModal/AwsKeyUrl.tsx
index 81c2853b2..4732269bd 100644
--- a/app/modals/AwsModal/AwsKeyUrl.tsx
+++ b/app/modals/AwsModal/AwsKeyUrl.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
 const AwsKeyUrl = (props) => {
+  const { typeOfService, accessKey, handleChange, secretAccessKey, awsUrl } = props;
   return (
     <>
       <div>
@@ -10,13 +11,13 @@ const AwsKeyUrl = (props) => {
           id="aws-access-key"
           type="password"
           name="accessKey"
-          value={props.accessKey}
-          onChange={e => props.handleChange(e)}
-          placeholder={props.typeOfService === 'AWS/EKS' ? 'Grafana Bearer Token' : 'AWS Access Key'}
+          value={accessKey}
+          onChange={e => handleChange(e)}
+          placeholder={typeOfService === 'AWS/EKS' ? 'Grafana Bearer Token' : 'AWS Access Key'}
           required
         />
       </div>
-      {(props.typeOfService !== 'AWS/EKS') && (
+      {(typeOfService !== 'AWS/EKS') && (
         <div>
         <label htmlFor="aws-secret-access-key">
           Secret Access Key<span>*</span>
@@ -25,8 +26,8 @@ const AwsKeyUrl = (props) => {
           id="aws-secret-access-key"
           type="password"
           name="secretAccessKey"
-          value={props.secretAccessKey}
-          onChange={e => props.handleChange(e)}
+          value={secretAccessKey}
+          onChange={e => handleChange(e)}
           placeholder="AWS Secret Access Key"
           required
         />
@@ -34,15 +35,15 @@ const AwsKeyUrl = (props) => {
       )}        
       <div>
         <label htmlFor="aws-url">
-          {(props.typeOfService === 'AWS/EKS') ? 'Grafana URL' : 'Access Key'}<span>*</span>
+          {(typeOfService === 'AWS/EKS') ? 'Grafana URL' : 'Access Key'}<span>*</span>
         </label>
         <input
           id="aws-url"
           type="string"
           name="awsUrl"
-          value={props.awsUrl}
-          onChange={e => props.handleChange(e)}
-          placeholder={props.typeOfService === 'AWS/EKS'? 'Grafana Provided URL': 'AWS Url'}
+          value={awsUrl}
+          onChange={e => handleChange(e)}
+          placeholder={typeOfService === 'AWS/EKS'? 'Grafana Provided URL': 'AWS Url'}
         />
       </div>
     </>
diff --git a/app/modals/AwsModal/AwsRegion.tsx b/app/modals/AwsModal/AwsRegion.tsx
index 399e72c41..336e9f7cb 100644
--- a/app/modals/AwsModal/AwsRegion.tsx
+++ b/app/modals/AwsModal/AwsRegion.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
 const AwsRegion = (props) => {
+  const { region, handleChange } = props;
   return (
     <div>
       <label htmlFor="region">
@@ -9,8 +10,8 @@ const AwsRegion = (props) => {
       <select
         id="aws-region"
         name="region"
-        value={props.region}
-        onChange={e => props.handleChange(e)}
+        value={region}
+        onChange={e => handleChange(e)}
         placeholder="AWS Region"
         required
       >
diff --git a/app/modals/AwsModal/AwsServiceInstance.tsx b/app/modals/AwsModal/AwsServiceInstance.tsx
index 7e81c98e9..5f8818d38 100644
--- a/app/modals/AwsModal/AwsServiceInstance.tsx
+++ b/app/modals/AwsModal/AwsServiceInstance.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
 const AwsServiceInstance = (props) => {
+  const { typeOfService, handleChange, instance } = props;
   return (
     <>
       <div>
@@ -8,15 +9,15 @@ const AwsServiceInstance = (props) => {
         <select
           id="serv-type"
           name="typeOfService"
-          value={props.typeOfService}
-          onChange={e => props.handleChange(e)}
+          value={typeOfService}
+          onChange={e => handleChange(e)}
         >
           <option value="AWS/EC2">Elastic Compute Cloud (EC2)</option>
           <option value="AWS/ECS">Elastic Container Service (ECS)</option>
           <option value="AWS/EKS">Elastic Kubernetes Service (EKS)</option>
         </select>
       </div>
-      {props.typeOfService === 'AWS/EC2' && (
+      {typeOfService === 'AWS/EC2' && (
         <div>
           <label htmlFor="instance">
             AWS Instance ID<span>*</span>
@@ -24,8 +25,8 @@ const AwsServiceInstance = (props) => {
           <input
             id="aws-instance"
             name="instance"
-            value={props.instance}
-            onChange={e => props.handleChange(e)}
+            value={instance}
+            onChange={e => handleChange(e)}
             placeholder="AWS Instance ID"
             required
           />