Merge pull request #305 from joyent/dustin/v4.x/validation-updates

Device page and validations tab updates

src/router.js

@@ -1,6 +1,7 @@
 import Vue from 'vue';
 import Router from 'vue-router';
 import Devices from './views/Devices/Devices.vue';
+import Device from './views/Devices/Device.vue';
 import DataCenters from './views/DataCenterBrowser/DataCenters.vue';
 import SignIn from './views/SignIn/SignIn.vue';
 import UserManagement from './views/UserManagement/UserManagement.vue';
@@ -47,7 +48,7 @@ export default new Router({
           // when /device/:deviceId is matched
           path: ':deviceId',
           name: 'device',
-          component: Devices,
+          component: Device,
         },
       ],
     },

src/store/__tests__/actions.test.js

@@ -149,11 +149,4 @@ describe('actions', () => {
       expect(commit).toHaveBeenCalledWith('setUsers', []);
     });
   });
-
-  describe('setValidations', () => {
-    test('it sets the validations', () => {
-      actions.setValidations({ commit }, {});
-      expect(commit).toHaveBeenCalledWith('setValidations', {});
-    });
-  });
 });

src/store/__tests__/mutations.test.js

@@ -12,7 +12,6 @@ import rackLayout from '@src/__fixtures__/rackLayout.js';
 import rackRooms from '@src/__fixtures__/rackRooms.js';
 import userAuthTokens from '@src/__fixtures__/userAuthTokens.js';
 import users from '@src/__fixtures__/users.js';
-import validations from '@src/__fixtures__/validations.js';
 
 describe('mutations', () => {
   let state;
@@ -217,13 +216,4 @@ describe('mutations', () => {
       expect(state).toMatchObject({ users });
     });
   });
-
-  describe('setValidations', () => {
-    test('it adds validations to the state', () => {
-      state = { validations: [] };
-
-      mutations.setValidations(state, validations);
-      expect(state).toMatchObject({ validations });
-    });
-  });
 });

src/store/actions.js

@@ -149,10 +149,6 @@ export const setUsers = ({ commit }, users) => {
   commit('setUsers', users);
 };
 
-export const setValidations = ({ commit }, validations) => {
-  commit('setValidations', validations);
-};
-
 export default {
   clearActiveDevice,
   clearActiveRoomName,
@@ -191,5 +187,4 @@ export default {
   setShowDeviceInRack,
   setUserAuthTokens,
   setUsers,
-  setValidations,
 };

src/store/mutations.js

@@ -151,10 +151,6 @@ export const setUsers = (state, users) => {
   state.users = users;
 };
 
-export const setValidations = (state, validations) => {
-  state.validations = validations;
-};
-
 export default {
   clearActiveDevice,
   clearActiveRoomName,
@@ -193,5 +189,4 @@ export default {
   setShowDeviceInRack,
   setUserAuthTokens,
   setUsers,
-  setValidations,
 };

src/store/state.js

@@ -31,7 +31,6 @@ export const initialState = () => {
     userAuthTokens: [],
     userOrganizations: [],
     users: [],
-    validations: [],
   };
 };
 
@@ -67,7 +66,6 @@ export const state = {
   userAuthTokens: [],
   userOrganizations: [],
   users: [],
-  validations: [],
 };
 
 export default {

src/styles/components/_cards.scss

@@ -0,0 +1,19 @@
+.card {
+  &.is-rounded-1 {
+    border-radius: 3px;
+
+    .card-footer {
+      border-bottom-right-radius: 3px;
+      border-bottom-left-radius: 3px;
+    }
+  }
+
+  &.is-rounded-2 {
+    border-radius: 4px;
+
+    .card-footer {
+      border-bottom-right-radius: 4px;
+      border-bottom-left-radius: 4px;
+    }
+  }
+}

src/styles/components/_device-browser.scss

@@ -1,66 +1,76 @@
 .device-browser {
-	.device-search {
-		flex-grow: 1;
+  .device-search {
+    flex-grow: 1;
 
-		input.search {
-			background-color: $dark;
-			border-color: $grey;
-			border-radius: 4px;
-			color: #bdcbdb;
-			height: 46px;
-			margin-bottom: 20px;
-			min-width: 350px;
+    input.search {
+      background-color: $dark;
+      border-color: $grey;
+      border-radius: 4px;
+      color: #bdcbdb;
+      margin-bottom: 20px;
+      min-width: 350px;
 
-			&::placeholder {
-				color: $grey-light;
-			}
+      &::placeholder {
+        color: #bdcbdb;
+      }
 
-			&:focus {
-				border: 1px solid $blue;
-				box-shadow: none;
-			}
-		}
+      &:focus {
+        border: 1px solid $blue;
+        box-shadow: none;
+      }
+    }
+  }
 
-		span.icon.is-left {
-			top: 6px;
-			left: 2px;
+  .button.search {
+    font-weight: bold;
+    padding-right: 20px;
+    padding-left: 20px;
+  }
 
-			.material-icons {
-				font-size: 28px;
-			}
-		}
-	}
+  .device-details {
+    position: sticky;
+    top: 0;
 
-	.button.search {
-		font-weight: bold;
-		height: 46px;
-		padding-right: 20px;
-		padding-left: 20px;
-	}
+    .box.serial-number {
+      background-color: $dark;
+    }
+  }
 
-	.device-details {
-		position: sticky;
-		top: 0;
+  .card {
+    cursor: pointer;
 
-		.box.serial-number {
-			background-color: $dark;
-		}
-	}
+    &.is-parent {
+      background-color: #1a2531;
+      transition: all 0.1s ease;
 
-	.empty-state {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
+      &:hover {
+        background-color: #1f2a36;
+        border: 1px solid #5a6977;
+        // transform: scale(1.02);
+        transition: all 0.1s ease;
+      }
+    }
 
-		img {
-			margin: 30px auto;
-		}
+    .card-content {
+      padding: 20px;
 
-		.empty-state-heading {
-			color: $white;
-			font-size: 24px;
-			margin-bottom: 30px;
-		}
-	}
+      .content {
+        .card {
+          align-items: center;
+          display: flex;
+          justify-content: space-between;
+          padding: 10px;
+
+          &:not(:last-of-type) {
+            margin-bottom: 12px;
+          }
+
+          p.is-title {
+            font-weight: bold;
+            margin-bottom: 0.2em;
+          }
+        }
+      }
+    }
+  }
 }

src/styles/main.scss

@@ -37,6 +37,7 @@
 @import './components/base-modal';
 @import './components/build';
 @import './components/builds';
+@import './components/cards';
 @import './components/confirmation-modal';
 @import './components/create-build-modal';
 @import './components/create-token-modal';