fix(my-joy-beta): use new Message API

packages/my-joy-beta/src/containers/instances/firewall.js

@@ -5,7 +5,14 @@ import { compose, graphql } from 'react-apollo';
 import find from 'lodash.find';
 import get from 'lodash.get';
 
-import { ViewContainer, Title, StatusLoader, Message } from 'joyent-ui-toolkit';
+import {
+  ViewContainer,
+  Title,
+  StatusLoader,
+  Message,
+  MessageDescription,
+  MessageTitle
+} from 'joyent-ui-toolkit';
 
 import GetFirewallRules from '@graphql/list-firewall-rules.gql';
 import { FirewallRule as InstanceFirewallRule } from '@components/instances';
@@ -34,11 +41,12 @@ const Firewall = ({
 
   const _error =
     error && !values.length && !_loading ? (
-      <Message
-        title="Ooops!"
-        message="An error occurred while loading your instance firewall rules"
-        error
-      />
+      <Message error>
+        <MessageTitle>Ooops!</MessageTitle>
+        <MessageDescription>
+          An error occurred while loading your instance firewall rules
+        </MessageDescription>
+      </Message>
     ) : null;
 
   return (

packages/my-joy-beta/src/containers/instances/list.js

@@ -8,7 +8,13 @@ import get from 'lodash.get';
 import sortBy from 'lodash.sortby';
 import find from 'lodash.find';
 
-import { ViewContainer, Title, Message } from 'joyent-ui-toolkit';
+import {
+  ViewContainer,
+  Title,
+  Message,
+  MessageDescription,
+  MessageTitle
+} from 'joyent-ui-toolkit';
 
 import ListInstances from '@graphql/list-instances.gql';
 import StopInstance from '@graphql/stop-instance.gql';
@@ -43,11 +49,12 @@ const List = ({
 
   const _error =
     error && !_instances.length && !_loading ? (
-      <Message
-        title="Ooops!"
-        message="An error occurred while loading your instances."
-        error
-      />
+      <Message error>
+        <MessageTitle>Ooops!</MessageTitle>
+        <MessageDescription>
+          An error occurred while loading your instances
+        </MessageDescription>
+      </Message>
     ) : null;
 
   const handleAction = name => onAction({ name, ids: selected });

packages/my-joy-beta/src/containers/instances/metadata.js

@@ -7,7 +7,14 @@ import { reduxForm } from 'redux-form';
 import find from 'lodash.find';
 import get from 'lodash.get';
 
-import { ViewContainer, Title, StatusLoader, Message } from 'joyent-ui-toolkit';
+import {
+  ViewContainer,
+  Title,
+  StatusLoader,
+  Message,
+  MessageDescription,
+  MessageTitle
+} from 'joyent-ui-toolkit';
 
 import GetMetadata from '@graphql/list-metadata.gql';
 import { KeyValue } from '@components/instances';
@@ -44,11 +51,12 @@ const Metadata = ({ metadata = [], loading, error }) => {
 
   const _error =
     error && !values.length && !_loading ? (
-      <Message
-        title="Ooops!"
-        message="An error occurred while loading your instance metadata"
-        error
-      />
+      <Message error>
+        <MessageTitle>Ooops!</MessageTitle>
+        <MessageDescription>
+          An error occurred while loading your instance metadata
+        </MessageDescription>
+      </Message>
     ) : null;
 
   return (

packages/my-joy-beta/src/containers/instances/networks.js

@@ -5,7 +5,14 @@ import { compose, graphql } from 'react-apollo';
 import find from 'lodash.find';
 import get from 'lodash.get';
 
-import { ViewContainer, Title, StatusLoader, Message } from 'joyent-ui-toolkit';
+import {
+  ViewContainer,
+  Title,
+  StatusLoader,
+  Message,
+  MessageDescription,
+  MessageTitle
+} from 'joyent-ui-toolkit';
 
 import GetNetworks from '@graphql/list-networks.gql';
 import { Network as InstanceNetwork } from '@components/instances';
@@ -15,8 +22,6 @@ const Networks = ({ networks = [], loading, error }) => {
   const _title = <Title>Networks</Title>;
   const _loading = !(loading && !values.length) ? null : <StatusLoader />;
 
-  console.log(values);
-
   const _networks =
     !_loading &&
     values.map((network, i, all) => (
@@ -30,11 +35,12 @@ const Networks = ({ networks = [], loading, error }) => {
 
   const _error =
     error && !values.length && !_loading ? (
-      <Message
-        title="Ooops!"
-        message="An error occurred while loading your instance networks"
-        error
-      />
+      <Message error>
+        <MessageTitle>Ooops!</MessageTitle>
+        <MessageDescription>
+          An error occurred while loading your instance networks
+        </MessageDescription>
+      </Message>
     ) : null;
 
   return (

packages/my-joy-beta/src/containers/instances/snapshots.js

@@ -6,7 +6,14 @@ import { compose, graphql } from 'react-apollo';
 import find from 'lodash.find';
 import get from 'lodash.get';
 
-import { ViewContainer, Title, StatusLoader, Message } from 'joyent-ui-toolkit';
+import {
+  ViewContainer,
+  Title,
+  StatusLoader,
+  Message,
+  MessageTitle,
+  MessageDescription
+} from 'joyent-ui-toolkit';
 
 import GetSnapshots from '@graphql/list-snapshots.gql';
 
@@ -19,11 +26,12 @@ const Snapshots = ({ snapshots = [], loading, error }) => {
   const _summary = !_loading && <ReactJson src={snapshots} />;
 
   const _error = !(error && !_loading) ? null : (
-    <Message
-      title="Ooops!"
-      message="An error occurred while loading your instance snapshots"
-      error
-    />
+    <Message error>
+      <MessageTitle>Ooops!</MessageTitle>
+      <MessageDescription>
+        An error occurred while loading your instance snapshots
+      </MessageDescription>
+    </Message>
   );
 
   return (

packages/my-joy-beta/src/containers/instances/summary.js

@@ -5,7 +5,14 @@ import { compose, graphql } from 'react-apollo';
 import find from 'lodash.find';
 import get from 'lodash.get';
 
-import { ViewContainer, Title, StatusLoader, Message } from 'joyent-ui-toolkit';
+import {
+  ViewContainer,
+  Title,
+  StatusLoader,
+  Message,
+  MessageDescription,
+  MessageTitle
+} from 'joyent-ui-toolkit';
 
 import GetInstance from '@graphql/get-instance.gql';
 
@@ -17,11 +24,12 @@ const Summary = ({ instance = {}, loading, error }) => {
   const _summary = !_loading && <ReactJson src={instance} />;
 
   const _error = !(error && !_loading) ? null : (
-    <Message
-      title="Ooops!"
-      message="An error occurred while loading your instance summary"
-      error
-    />
+    <Message error>
+      <MessageTitle>Ooops!</MessageTitle>
+      <MessageDescription>
+        An error occurred while loading your instance summary
+      </MessageDescription>
+    </Message>
   );
 
   return (

packages/my-joy-beta/src/containers/instances/tags.js

@@ -7,7 +7,14 @@ import { reduxForm } from 'redux-form';
 import find from 'lodash.find';
 import get from 'lodash.get';
 
-import { ViewContainer, Title, StatusLoader, Message } from 'joyent-ui-toolkit';
+import {
+  ViewContainer,
+  Title,
+  StatusLoader,
+  Message,
+  MessageDescription,
+  MessageTitle
+} from 'joyent-ui-toolkit';
 
 import { KeyValue } from '@components/instances';
 import GetTags from '@graphql/list-tags.gql';
@@ -44,11 +51,12 @@ const Tags = ({ tags = [], loading, error }) => {
 
   const _error =
     error && !values.length && !_loading ? (
-      <Message
-        title="Ooops!"
-        message="An error occurred while loading your instance tags"
-        error
-      />
+      <Message error>
+        <MessageTitle>Ooops!</MessageTitle>
+        <MessageDescription>
+          An error occurred while loading your instance tags
+        </MessageDescription>
+      </Message>
     ) : null;
 
   return (