diagnostic dump and link fixes

webpack/api/__tests__/api_test.ts

@@ -12,7 +12,7 @@ describe("API", () => {
       [API.current.sensorReadingPath, BASE + "/api/sensor_readings"],
       [API.current.deviceConfigPath, BASE + "/api/device_configs"],
       [API.current.plantTemplatePath, BASE + "/api/plant_templates"],
-      [API.current.diagnosticDumpsPath, BASE + "/api/diagnostic_dumps"],
+      [API.current.diagnosticDumpsPath, BASE + "/api/diagnostic_dumps/"],
       [API.current.farmwareInstallationPath, BASE + "/api/farmware_installations"],
     ].map(x => expect(x[0]).toEqual(x[1]));
   });

webpack/api/api.ts

@@ -146,7 +146,7 @@ export class API {
   /** /api/plant_templates/:id */
   get plantTemplatePath() { return `${this.baseUrl}/api/plant_templates`; }
   /** /api/diagnostic_dumps/:id */
-  get diagnosticDumpsPath() { return `${this.baseUrl}/api/diagnostic_dumps`; }
+  get diagnosticDumpsPath() { return `${this.baseUrl}/api/diagnostic_dumps/`; }
   /** /api/farmware_installations/:id */
   get farmwareInstallationPath() {
     return `${this.baseUrl}/api/farmware_installations`;

webpack/api/crud.ts

@@ -224,6 +224,7 @@ export function urlFor(tag: ResourceName) {
     FbosConfig: API.current.fbosConfigPath,
     WebAppConfig: API.current.webAppConfigPath,
     FirmwareConfig: API.current.firmwareConfigPath,
+    DiagnosticDump: API.current.diagnosticDumpsPath,
   };
   const url = OPTIONS[tag];
   if (url) {

webpack/constants.ts

@@ -446,6 +446,12 @@ export namespace Content {
     trim(`Warning! Opting in to FarmBot OS beta releases may reduce
     FarmBot system stability. Are you sure?`);
 
+  export const DIAGNOSTIC_CHECK =
+    trim(`Save snapshot of FarmBot OS system information, including
+    user and device identity, to the database. A code will be returned
+    that you can provide in support requests to allow FarmBot to look up
+    data relevant to the issue to help us identify the problem.`);
+
   // Hardware Settings
   export const RESTORE_DEFAULT_HARDWARE_SETTINGS =
     trim(`Restoring hardware parameter defaults will destroy the

webpack/css/global.scss

@@ -174,12 +174,6 @@ a {
 }
 
 .input-group {
-  a {
-    color: #434343;
-    &:visited {
-      color: #434343;
-    }
-  }
   input[type=checkbox] {
     box-shadow: none;
   }
@@ -384,9 +378,20 @@ a {
   text-decoration: none !important;
   outline: none !important;
   cursor: pointer !important;
-  color: $off_white;
+  color: $dark_gray;
+  &:link {
+    font-weight: 500;
+    color: $dark_gray;
+  }
   &:visited {
-    color: $off_white;
+    color: $dark_gray;
+  }
+  &:hover {
+    font-weight: bold;
+    color: $dark_gray;
+  }
+  &:active {
+    color: $dark_gray;
   }
 }
 
@@ -846,21 +851,3 @@ ul {
     }
   }
 }
-
-a.panel-link {
-    // TODO: Might need to move this to a better place. CC: @gabrielBurnworth
-    //
-    // PROBLEM: <a> links in the device panel are invisible.
-    // SOLUTION: Add {color: $dark_gray}
-    // PROBLEM 2: This rule probably does not belong at the bottom of
-    //            global.scss
-    color: $dark_gray;
-
-    &:visited {
-      color: $dark_gray;
-    };
-
-    &:active {
-      color: $dark_gray;
-    };
-}

webpack/devices/components/__tests__/diagnostic_dump_row_test.tsx

@@ -19,7 +19,7 @@ describe("<DiagnosticDumpRow/>", () => {
     diag.body.ticket_identifier = "0000";
     const el = mount(<DiagnosticDumpRow dispatch={dispatch} diag={diag} />);
     expect(el.text()).toContain("0000");
-    el.find("a").first().simulate("click");
+    el.find("button.green").first().simulate("click");
     expect(jsonDownload).toHaveBeenCalledWith(diag.body, "farmbot_diagnostics_0000.json");
     el.find("button.red").first().simulate("click");
     expect(destroy).toHaveBeenCalledWith(diag.uuid);

webpack/devices/components/diagnostic_dump_row.tsx

@@ -4,6 +4,7 @@ import { TaggedDiagnosticDump } from "../../resources/tagged_resources";
 import { jsonDownload } from "../../account/request_account_export";
 import { destroy } from "../../api/crud";
 import { ago } from "../connectivity/status_checks";
+import { t } from "i18next";
 
 export interface Props {
   diag: TaggedDiagnosticDump;
@@ -27,19 +28,23 @@ export class DiagnosticDumpRow extends React.Component<Props, {}> {
 
   render() {
     return <Row>
-      <Col xs={1}>
-        <span>
-          <button
-            className="red fb-button del-button"
-            onClick={this.destroy}>
-            <i className="fa fa-times" />
-          </button>
-        </span>
+      <Col xs={2}>
+        <button
+          className="green fb-button"
+          onClick={this.download}>
+          {t("Download")}
+        </button>
       </Col>
-      <Col xs={11}>
-        <a onClick={this.download} className="panel-link">
-          Download diagnostic report {this.ticket} (Saved {this.age})
-        </a>
+      <Col xs={9}>
+        {t("Diagnostic report {{ticket}} (Saved {{age}})",
+          { ticket: this.ticket, age: this.age })}
+      </Col>
+      <Col xs={1}>
+        <button
+          className="red fb-button del-button"
+          onClick={this.destroy}>
+          <i className="fa fa-times" />
+        </button>
       </Col>
     </Row >;
   }

webpack/devices/components/send_diagnostic_report.tsx

@@ -8,6 +8,7 @@ import { ShouldDisplay, Feature } from "../interfaces";
 import { TaggedDiagnosticDump } from "../../resources/tagged_resources";
 import { DiagnosticDumpRow } from "./diagnostic_dump_row";
 import { requestDiagnostic } from "../actions";
+import { Content } from "../../constants";
 
 export interface DiagReportProps {
   dispatch: Function;
@@ -16,7 +17,7 @@ export interface DiagReportProps {
   diagnostics: TaggedDiagnosticDump[];
 }
 
-export class SendDiagnosticReport extends React.Component<DiagReportProps, {}>{
+export class SendDiagnosticReport extends React.Component<DiagReportProps, {}> {
   show = () => {
     return <section>
       <div style={{ fontSize: "1px" }}>
@@ -34,7 +35,7 @@ export class SendDiagnosticReport extends React.Component<DiagReportProps, {}>{
             </label>
           </Col>
           <Col xs={6}>
-            <p>...</p>
+            <p>{t(Content.DIAGNOSTIC_CHECK)}</p>
           </Col>
           <Col xs={3}>
             <button
@@ -44,6 +45,7 @@ export class SendDiagnosticReport extends React.Component<DiagReportProps, {}>{
             </button>
           </Col>
         </Row>
+        <hr />
         {this.props.diagnostics.map(d => {
           return <DiagnosticDumpRow
             key={d.uuid}