Ui improvements

local-dev/api-data/01-populate-api-data.gql

@@ -930,6 +930,10 @@ mutation PopulateApi {
     id
   }
 
+  UIProject1Environment1addServices: setEnvironmentServices(input:{environment:3, services:["cli", "nginx", "mariadb"]}) {
+    id
+  }
+
   UIProject1Environment2: addOrUpdateEnvironment(
     input: {
       id: 4

services/ui/src/components/AddTask/components/DrushRsyncFiles.js

@@ -45,6 +45,7 @@ const DrushRsyncFiles = ({
     {(taskDrushRsyncFiles, { loading, called, error, data }) => {
       return (
         <React.Fragment>
+          <div className="warning">Warning! <br />This task replaces files. Be careful to double check the source and destination environment!</div>
           <div className="envSelect">
             <label id="source-env">Source:</label>
             <ReactSelect
@@ -92,6 +93,12 @@ const DrushRsyncFiles = ({
             Add task
           </button>
           <style jsx>{`
+            .warning {
+              background-color: red;
+              color: white;
+              padding: 10px;
+
+            }
             .envSelect {
               margin-top: 10px;
             }

services/ui/src/components/AddTask/components/DrushSqlSync.js

@@ -45,6 +45,7 @@ const DrushSqlSync = ({
     {(taskDrushSqlSync, { loading, called, error, data }) => {
       return (
         <React.Fragment>
+          <div className="warning">Warning! <br />This task overwrites databases. Be careful to double check the source and destination environment!</div>
           <div className="envSelect">
             <label id="source-env">Source:</label>
             <ReactSelect
@@ -92,6 +93,12 @@ const DrushSqlSync = ({
             Add task
           </button>
           <style jsx>{`
+            .warning {
+              background-color: red;
+              color: white;
+              padding: 10px;
+
+            }
             .envSelect {
               margin-top: 10px;
             }

services/ui/src/components/AddTask/logic.js

@@ -30,7 +30,7 @@ const withOptions = withProps(({ pageEnvironment }) => {
       value: 'DrushSqlDump'
     },
     {
-      label: 'Drush archive-dump (D7 only)',
+      label: 'Drush archive-dump (Drush 8 only)',
       value: 'DrushArchiveDump'
     }
   ];

services/ui/src/pages/backups.js

@@ -130,6 +130,9 @@ const PageBackups = withRouter((props) => {
               <div className='content-wrapper'>
                 <NavTabs activeTab='backups' environment={environment.openshiftProjectName}/>
                 <div className="content">
+                  <div className="notification">
+                    If you need a current database or files dump, use the tasks "drush sql-dump" or "drush archive-dump" in the new "Tasks" section!
+                  </div>
                   <div className="header">
                     <label className="source">Source</label>
                     <label className="created">Created</label>
@@ -179,6 +182,11 @@ const PageBackups = withRouter((props) => {
                 .content {
                   padding: 32px calc((100vw / 16) * 1);
                   width: 100%;
+                  .notification {
+                    background-color: ${color.lightBlue};
+                    color: ${color.white};
+                    padding: 10px 20px;
+                  }
                   .header {
                     @media ${bp.wideUp} {
                       align-items: center;