refactor(ui): rename SilencePreview to PayloadPreview

ui/src/Components/SilenceModal/PayloadPreview/__snapshots__/index.test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<SilencePreview /> matches snapshot 1`] = `
+exports[`<PayloadPreview /> matches snapshot 1`] = `
 "
 <pre class=\\"json-pretty\\">
   {
@@ -42,7 +42,7 @@ exports[`<SilencePreview /> matches snapshot 1`] = `
   </span>
   &quot;:
   <span class=\\"json-string\\">
-    &quot;SilencePreview test&quot;
+    &quot;PayloadPreview test&quot;
   </span>
   }
 </pre>

ui/src/Components/SilenceModal/PayloadPreview/index.js

@@ -8,8 +8,8 @@ import "react-json-pretty/src/JSONPretty.monikai.css";
 
 import { SilenceFormStore } from "Stores/SilenceFormStore";
 
-const SilencePreview = observer(
-  class SilencePreview extends Component {
+const PayloadPreview = observer(
+  class PayloadPreview extends Component {
     static propTypes = {
       silenceFormStore: PropTypes.instanceOf(SilenceFormStore).isRequired
     };
@@ -26,4 +26,4 @@ const SilencePreview = observer(
   }
 );
 
-export { SilencePreview };
+export { PayloadPreview };

ui/src/Components/SilenceModal/PayloadPreview/index.test.js

@@ -7,17 +7,17 @@ import toDiffableHtml from "diffable-html";
 import moment from "moment";
 
 import { SilenceFormStore } from "Stores/SilenceFormStore";
-import { SilencePreview } from ".";
+import { PayloadPreview } from ".";
 
-describe("<SilencePreview />", () => {
+describe("<PayloadPreview />", () => {
   it("matches snapshot", () => {
     const silenceFormStore = new SilenceFormStore();
     silenceFormStore.data.startsAt = moment([2000, 1, 1, 0, 0, 0]);
     silenceFormStore.data.endsAt = moment([2000, 1, 1, 1, 0, 0]);
     silenceFormStore.data.createdBy = "me@example.com";
-    silenceFormStore.data.comment = "SilencePreview test";
+    silenceFormStore.data.comment = "PayloadPreview test";
 
-    const tree = render(<SilencePreview silenceFormStore={silenceFormStore} />);
+    const tree = render(<PayloadPreview silenceFormStore={silenceFormStore} />);
     expect(toDiffableHtml(tree.html())).toMatchSnapshot();
   });
 });

ui/src/Components/SilenceModal/SilenceForm.js

@@ -19,7 +19,7 @@ import { Settings } from "Stores/Settings";
 import { AlertManagerInput } from "./AlertManagerInput";
 import { SilenceMatch } from "./SilenceMatch";
 import { DateTimeSelect } from "./DateTimeSelect";
-import { SilencePreview } from "./SilencePreview";
+import { PayloadPreview } from "./PayloadPreview";
 
 const IconInput = ({
   type,
@@ -201,7 +201,7 @@ const SilenceForm = observer(
             </span>
           </div>
           {this.previewCollapse.hidden ? null : (
-            <SilencePreview silenceFormStore={silenceFormStore} />
+            <PayloadPreview silenceFormStore={silenceFormStore} />
           )}
         </form>
       );

ui/src/Components/SilenceModal/SilenceForm.test.js

@@ -94,28 +94,28 @@ describe("<SilenceForm /> matchers", () => {
 });
 
 describe("<SilenceForm /> preview", () => {
-  it("doesn't render SilencePreview when previewCollapse.hidden is true", () => {
+  it("doesn't render PayloadPreview when previewCollapse.hidden is true", () => {
     const tree = ShallowSilenceForm();
     const instance = tree.instance();
     instance.previewCollapse.hidden = true;
-    expect(tree.find("SilencePreview")).toHaveLength(0);
+    expect(tree.find("PayloadPreview")).toHaveLength(0);
   });
 
-  it("renders SilencePreview when previewCollapse.hidden is false", () => {
+  it("renders PayloadPreview when previewCollapse.hidden is false", () => {
     const tree = ShallowSilenceForm();
     const instance = tree.instance();
     instance.previewCollapse.hidden = false;
-    expect(tree.find("SilencePreview")).toHaveLength(1);
+    expect(tree.find("PayloadPreview")).toHaveLength(1);
   });
 
-  it("clicking on the toggle icon toggles SilencePreview", () => {
+  it("clicking on the toggle icon toggles PayloadPreview", () => {
     const tree = ShallowSilenceForm();
     const button = tree.find(".btn.cursor-pointer.text-muted");
-    expect(tree.find("SilencePreview")).toHaveLength(0);
+    expect(tree.find("PayloadPreview")).toHaveLength(0);
     button.simulate("click");
-    expect(tree.find("SilencePreview")).toHaveLength(1);
+    expect(tree.find("PayloadPreview")).toHaveLength(1);
     button.simulate("click");
-    expect(tree.find("SilencePreview")).toHaveLength(0);
+    expect(tree.find("PayloadPreview")).toHaveLength(0);
   });
 });