New functional select all services button

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 {

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>

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>

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>

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,24 +26,24 @@ 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
         />
       </div>
       )}        
       <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>
     </>

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
       >

app/modals/AwsModal/AwsServiceInstance.tsx

@@ -1,31 +1,32 @@
 import React from 'react';
 
 const AwsServiceInstance = (props) => {
+  const { typeOfService, handleChange, instance } = props;
   return (
     <>
       <div>
         <label htmlFor="serv-type">Type of Service</label>
         <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>
           </label>
           <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
           />

app/modals/ServicesModal/ServicesLink.tsx

@@ -8,34 +8,41 @@ 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}
         </div>
       ))}
-      <Link id='selectLink'
-        className="router link"
-        to={props.services.length > 0 ? `/applications/${props.app}/${props.services.join(' ')}` : '#'}
+      <Link
+        className="selectLink router link"
+        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>
+      <Link
+        className="selectLink router link"
+        to={`/applications/${app}/client event-bus items inventory orders auth`}>
+        Select All Services
       </Link>
     </div>
   )

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;
-}
+}

app/modals/ServicesModal/ServicesModal.tsx

@@ -26,6 +26,8 @@ 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);
+  console.log(services.join(' '));
   const [ cardName,dbType,dbURI,description,serviceType ] = applications[i]