Merge remote-tracking branch 'origin/master' into feature/markdown_te…

…am_desc

src/Components/SubscriptionList/SubscriptionRow/SubscriptionRow.less

@@ -32,6 +32,11 @@
     max-width: 350px;
 }
 
+.triggers-cell {
+    display: inline-block;
+    min-width: max-content;
+}
+
 .contacts-cell {
     width: 80%;
 }

src/Components/SubscriptionList/SubscriptionRow/SubscriptionRow.tsx

@@ -1,10 +1,11 @@
 import React from "react";
-import { Gapped } from "@skbkontur/react-ui";
+import { Link, Gapped, Hint } from "@skbkontur/react-ui";
 import { Contact, filterSubscriptionContacts } from "../../../Domain/Contact";
 import { Subscription } from "../../../Domain/Subscription";
 import ContactInfo from "../../ContactInfo/ContactInfo";
 import TagGroup from "../../TagGroup/TagGroup";
 import HelpTooltip from "../../HelpTooltip/HelpTooltip";
+import queryString from "query-string";
 import classNames from "classnames/bind";
 
 import styles from "./SubscriptionRow.less";
@@ -28,6 +29,14 @@ export const SubscriptionRow: React.FC<SubscriptionRowProps> = ({
     ).map((x: Contact) => <ContactInfo key={x.id} contact={x} />);
 
     const areAnyDisruptedSubs = getSubscriptionContacts.length === 0;
+
+    const triggersPageParams = `/?${queryString.stringify(
+        { tags: subscription.tags },
+        {
+            arrayFormat: "index",
+        }
+    )}`;
+
     return (
         <tr
             key={subscription.id}
@@ -37,6 +46,17 @@ export const SubscriptionRow: React.FC<SubscriptionRowProps> = ({
             <td className={cn("tags-cell")}>
                 <TagGroup tags={subscription.tags} />
             </td>
+            <td className={cn("triggers-cell")}>
+                <Hint text="Show all associated triggers">
+                    <Link
+                        target="_blank"
+                        href={triggersPageParams}
+                        onClick={(e) => e.stopPropagation()}
+                    >
+                        Show triggers
+                    </Link>
+                </Hint>
+            </td>
             <td className={cn("contacts-cell")}>
                 <Gapped gap={10}>{getSubscriptionContacts}</Gapped>
             </td>

src/Components/TriggerEditForm/EditDescritionHelp.tsx → src/Components/TriggerEditForm/Components/EditDescritionHelp.tsx

@@ -1,10 +1,10 @@
 import React from "react";
 import { Link } from "@skbkontur/react-ui/components/Link";
-import HelpTooltip from "../HelpTooltip/HelpTooltip";
-import CodeRef from "../CodeRef/CodeRef";
+import HelpTooltip from "../../HelpTooltip/HelpTooltip";
+import CodeRef from "../../CodeRef/CodeRef";
 import classNames from "classnames/bind";
 
-import styles from "./TriggerEditForm.less";
+import styles from "../TriggerEditForm.less";
 
 const cn = classNames.bind(styles);
 

src/Components/TriggerEditForm/Components/Form.less

@@ -0,0 +1,37 @@
+.form {
+    max-width: 800px;
+}
+
+.label {
+    flex-shrink: 0;
+    width: 150px;
+}
+
+.label-for-group {
+    align-self: flex-start;
+    padding-top: 7px;
+}
+
+.row {
+    display: flex;
+    align-items: baseline;
+    margin-bottom: 15px;
+
+    textarea {
+        vertical-align: top;
+    }
+}
+
+.control {
+    margin-left: auto;
+    width: calc(~'100% - 150px');
+}
+
+.group {
+    display: flex;
+    align-items: center;
+
+    & > * {
+        margin-right: 5px;
+    }
+}

src/Components/TriggerEditForm/Components/Form.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import classNames from "classnames/bind";
+
+import styles from "./Form.less";
+
+const cn = classNames.bind(styles);
+
+interface IFormProps {
+    children: React.ReactNode;
+}
+
+export function Form({ children }: IFormProps): React.ReactElement {
+    return <div className={cn("form")}>{children}</div>;
+}
+
+interface IFormRowProps {
+    label?: string;
+    useTopAlignForLabel?: boolean;
+    singleLineControlGroup?: boolean;
+    style?: {
+        [key: string]: number | string;
+    };
+    children: React.ReactNode;
+}
+
+export function FormRow({
+    label,
+    useTopAlignForLabel,
+    singleLineControlGroup,
+    children,
+    style,
+}: IFormRowProps): React.ReactElement {
+    const labelElement = label && (
+        <div className={cn("label", { "label-for-group": useTopAlignForLabel })}>{label}</div>
+    );
+
+    return (
+        <div className={cn("row")}>
+            {labelElement}
+            <div style={style} className={cn("control", { group: singleLineControlGroup })}>
+                {children}
+            </div>
+        </div>
+    );
+}

src/Components/TriggerEditForm/MetricSourceSelect.tsx → src/Components/TriggerEditForm/Components/MetricSourceSelect.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Gapped, Radio, RadioGroup } from "@skbkontur/react-ui";
-import TriggerSource from "../../Domain/Trigger";
+import TriggerSource from "../../../Domain/Trigger";
 import { Link } from "@skbkontur/react-ui/components/Link";
 
 interface Props {

src/Components/TriggerEditForm/TriggerEditForm.less

@@ -7,35 +7,6 @@
     top:3px
 }
 
-.form {
-    max-width: 800px;
-}
-
-.row {
-    display: flex;
-    align-items: baseline;
-    margin-bottom: 15px;
-
-    textarea {
-        vertical-align: top;
-    }
-}
-
-.label {
-    flex-shrink: 0;
-    width: 150px;
-}
-
-.control {
-    margin-left: auto;
-    width: calc(~'100% - 150px');
-}
-
-.label-for-group {
-    align-self: flex-start;
-    padding-top: 7px;
-}
-
 .target {
     top: 4px;
     position: relative;
@@ -49,15 +20,6 @@
     padding-right: 5px;
 }
 
-.group {
-    display: flex;
-    align-items: center;
-
-    & > * {
-        margin-right: 5px;
-    }
-}
-
 .days, .new-metrics {
     margin-bottom: 15px;
     display: flex;