Merge pull request #88 from ronellecaguioa/description

Description

Author: ronellecaguioa

app/components/Applications.tsx

@@ -23,9 +23,10 @@ const Applications = () => {
   };
 
   // Handle clicks on Application cards
-  const handleClick = (app: string, i: number) => {
+  const handleClick = (selectedApp: string, i: number) => {
     setIndex(i);
-    setApp(app);
+    setApp(selectedApp);
+    console.log('handle', selectedApp)
     setOpen(true);
   };
 
@@ -56,18 +57,18 @@ const Applications = () => {
 
   return (
     <>
-      {applications.map((app: string, i: number | any | string | undefined) => (
+      {applications.map((app: string[], i: number | any | string | undefined) => (
         <Grid item xs={6} key={i}>
           <Paper
             className={classes.paper}
             id={i}
             key={i}
-            onClick={(event: React.MouseEvent<HTMLElement>) => handleClick(app, i)}
+            onClick={(event: React.MouseEvent<HTMLElement>) => handleClick(app[0], i)}
           >
-            {app}
+            {app[0]}
             <IconButton
               aria-label="Delete"
-              onClick={(event: React.MouseEvent<HTMLElement>) => confirmDelete(app, i)}
+              onClick={(event: React.MouseEvent<HTMLElement>) => confirmDelete(app[0], i)}
               color="primary"
             >
               <DeleteForeverOutlinedIcon className={classes.hover} />

app/components/Header.tsx

@@ -5,7 +5,7 @@ import { ApplicationContext } from '../context/ApplicationContext';
 import '../stylesheets/Header.scss';
 
 export interface HeaderProps {
-  app: string;
+  app: string[];
   service: string;
   live: boolean;
   setLive: React.Dispatch<React.SetStateAction<boolean>>;

app/containers/GraphsContainer.tsx

@@ -18,7 +18,7 @@ import RouteTrace from '../charts/RouteTrace';
 import '../stylesheets/GraphsContainer.scss';
 
 export interface Params {
-  app: string;
+  app: any;
   service: string;
 }
 

app/context/DashboardContext.tsx

@@ -13,6 +13,7 @@ interface IFields {
   database: string;
   URI: string;
   name: string;
+  description: string;
 }
 
 export const DashboardContext = createContext<any>(null);
@@ -39,8 +40,11 @@ const DashboardContextProvider = ({ children }: Props) => {
    * of applications
    */
   const addApp = (fields: IFields) => {
-    const { database, URI, name } = fields;
-    const result = ipcRenderer.sendSync('addApp', JSON.stringify([name, database, URI]));
+    const { database, URI, name, description } = fields;
+    const result = ipcRenderer.sendSync(
+      'addApp',
+      JSON.stringify([name, database, URI, description])
+    );
     setApplications(result);
   };
 

app/modals/AddModal.tsx

@@ -6,6 +6,7 @@ interface IFields {
   database: string;
   URI: string;
   name: string;
+  description: string;
 }
 
 interface IDashboard {
@@ -16,7 +17,7 @@ interface AddModalProps {
   setOpen: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
-type InputElement = React.ChangeEvent<HTMLSelectElement | HTMLInputElement>;
+type InputElement = React.ChangeEvent<HTMLSelectElement | HTMLInputElement | HTMLTextAreaElement>;
 type FormElement = React.FormEvent<HTMLFormElement>;
 
 const AddModal: React.FC<AddModalProps> = ({ setOpen }) => {
@@ -25,6 +26,7 @@ const AddModal: React.FC<AddModalProps> = ({ setOpen }) => {
     database: 'SQL',
     URI: '',
     name: '',
+    description: '',
   });
 
   // Submit form data and save to database
@@ -43,23 +45,24 @@ const AddModal: React.FC<AddModalProps> = ({ setOpen }) => {
     });
   };
 
-  const { database, URI, name } = fields;
+  const { database, URI, name, description } = fields;
   return (
     <div className="add-container">
       <div className="add-header">
         <h2>Add an Application</h2>
         <p>Enter the database information used to track the service</p>
       </div>
       <form onSubmit={handleSubmit}>
-        <div className="input-field">
-          <label htmlFor="db-type">Type</label>
+      <p>Required*</p>
+        <div>
+          <label htmlFor="db-type">Type<span>*</span></label>
           <select id="db-type" name="database" value={database} onChange={e => handleChange(e)}>
             <option value="SQL">SQL</option>
             <option value="MongoDB">MongoDB</option>
           </select>
         </div>
-        <div className="input-field">
-          <label htmlFor="db-uri">URI</label>
+        <div>
+          <label htmlFor="db-uri">URI<span>*</span></label>
           <input
             id="db-uri"
             name="URI"
@@ -69,8 +72,8 @@ const AddModal: React.FC<AddModalProps> = ({ setOpen }) => {
             required
           />
         </div>
-        <div className="input-field">
-          <label htmlFor="db-name">Name</label>
+        <div>
+          <label htmlFor="db-name">Name<span>*</span></label>
           <input
             id="db-name"
             type="text"
@@ -81,6 +84,16 @@ const AddModal: React.FC<AddModalProps> = ({ setOpen }) => {
             required
           />
         </div>
+        <div>
+          <label htmlFor="db-desc">Description</label>
+          <textarea
+            id="db-desc"
+            name="db-desc"
+            value={description}
+            onChange={e => handleChange(e)}
+            placeholder="Add a short description"
+          />
+        </div>
         <button>Submit</button>
       </form>
     </div>

app/stylesheets/AddModal.scss

@@ -1,10 +1,11 @@
 @import './constants.scss';
 
 .add-container {
-  @include centerModal();
+  @include centerModal(30%, 500px);
 
   /* Header */
   .add-header {
+    width: 100%;
     padding: 20px 30px;
     text-align: center;
     border-bottom: thin solid $lightgray;
@@ -19,48 +20,85 @@
 
   /* Form */
   form {
-    @include centerWithFlex(center, column);
-    padding: 0 30px;
+    @include centerWithFlex($direction: column);
+    padding: 20px 30px;
+    width: 100%;
+
+    p,
+    span {
+      color: rgb(211, 0, 0);
+    }
+
+    span {
+      font-weight: 300;
+      font-size: 80%;
+    }
+
+    p {
+      align-self: flex-start;
+    }
 
     div {
+      @include centerWithFlex();
+
+      // <select /> margins
       &:first-of-type {
-        margin-top: 0;
+        margin-top: 20px;
+      }
+
+      // <textarea>
+      &:last-of-type {
+        @include centerWithFlex($justify: flex-start, $align: flex-start);
       }
 
       @include centerWithFlex(space-between);
       width: 100%;
       margin: 15px 0;
 
-      /* Text input */
-      input {
-        height: 30px;
-        border: thin solid $lightgray;
-        border-radius: 3px;
-        flex: 1;
-        font-family: inherit;
+      select,
+      input,
+      textarea {
         font-size: 100%;
         padding: 5px;
+        border: thin solid $lightgray;
+        flex: 1;
+        border-radius: 3px;
       }
 
-      /* Select field */
+      // Select field
       select {
-        appearance: none;
         cursor: pointer;
         height: 30px;
-        border: thin solid $lightgray;
-        flex: 1;
-        font-size: 100%;
+        margin: 0;
+        appearance: none;
+        transition: 0.2s;
+
+        &:hover {
+          background-color: darken(#fff, 5%);
+        }
+      }
+
+      // Text input
+      input {
+        height: 30px;
+      }
+
+      // Textarea
+      textarea {
+        resize: none;
+        height: 90px;
       }
 
       label {
-        width: 100px;
+        width: 140px;
         font-size: 135%;
         font-weight: 400;
       }
     }
 
     /* Submit button */
     button {
+      height: 40px;
       font-size: 115%;
       width: 50%;
       color: #fff;

app/stylesheets/Header.scss

@@ -26,17 +26,37 @@ select {
   appearance: none;
   cursor: pointer;
   margin: 15px auto;
+
+  &:hover {
+    background-color: darken(#fff, 5%);
+  }
 }
 
 .header-btns {
   display: flex;
 
   button {
+    &:first-of-type {
+      position: absolute;
+      top: 25px;
+      left: 130px;
+      background-color: transparent;
+      border: 2px solid $sidebarblue;
+      color: $sidebarblue;
+      transition: 0.1s;
+
+      &:hover {
+        background-color: $sidebarblue;
+        color: #fff;
+      }
+    }
+
     margin: 0 10px;
-    font-size: 115%;
+    font-size: 110%;
     letter-spacing: 1px;
-    padding: 10px;
+    padding: 12px;
     font-weight: 300;
+    border-radius: 30px;
 
     /* Live data dot */
     .dot {

app/stylesheets/MainContainer.scss

@@ -16,6 +16,5 @@
     @include centerWithFlex(center);
     width: 100%;
     padding: 10px;
-    border-top: thin solid $lightgray;
   }
 }

app/stylesheets/constants.scss

@@ -4,21 +4,22 @@ $headergray: #e8e8e8;
 $lightgray: #c3c3c3;
 $boxshadow: 2px 2px 6px rgb(187, 187, 187);
 
-@mixin centerWithFlex($justify: center, $direction: row) {
+@mixin centerWithFlex($justify: center, $direction: row, $align: center) {
   display: flex;
-  align-items: center;
+  align-items: $align;
   justify-content: $justify;
   flex-direction: $direction;
 }
 
-@mixin centerModal($width: auto) {
+@mixin centerModal($width: auto, $minwidth: 400px) {
   @include centerWithFlex(center, column);
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   border-radius: 5px;
   width: $width;
+  min-width: $minwidth;
   min-height: 100px;
   background-color: #f4f4f4;
 }

electron/routes/dashboard.ts

@@ -1,4 +1,5 @@
 import { ipcMain, IpcMainEvent } from 'electron';
+import moment from 'moment';
 import path from 'path';
 import fs from 'fs';
 /**
@@ -15,6 +16,12 @@ ipcMain.on('addApp', (message: IpcMainEvent, application: any) => {
 
   // Add new applicaiton to list
   const newApp = JSON.parse(application);
+
+  // Add a creation date to the application
+  const createdOn = moment().format('lll');
+  newApp.push(createdOn);
+
+  // Add app to list of applications
   state.services.push(newApp);
 
   // Update settings.json with new list
@@ -37,7 +44,7 @@ ipcMain.on('getApps', message => {
   );
 
   // Destructure list of services from state to be rendered on the dashboard
-  const dashboardList = state.services.map((arr: string[]) => arr[0]);
+  const dashboardList = state.services.map((arr: string[]) => [arr[0], arr[3], arr[4]]);
 
   // Sync event - return new applications list
   message.returnValue = dashboardList;