From 23778a1981df2d71599d13949856d347686e399a Mon Sep 17 00:00:00 2001
From: EduardZaydler <117674342+EduardZaydler@users.noreply.github.com>
Date: Fri, 5 Apr 2024 16:38:38 +0700
Subject: [PATCH] provided subscription editor with config state (#500)

---
 .../SubscriptionEditor/SubscriptionEditor.tsx | 350 +++++++++---------
 1 file changed, 177 insertions(+), 173 deletions(-)

diff --git a/src/Components/SubscriptionEditor/SubscriptionEditor.tsx b/src/Components/SubscriptionEditor/SubscriptionEditor.tsx
index cdac342d..d24a58bd 100644
--- a/src/Components/SubscriptionEditor/SubscriptionEditor.tsx
+++ b/src/Components/SubscriptionEditor/SubscriptionEditor.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React, { FC } from "react";
 import { Toggle } from "@skbkontur/react-ui/components/Toggle";
 import { Checkbox } from "@skbkontur/react-ui/components/Checkbox";
 import { ValidationWrapperV1, tooltip, ValidationInfo } from "@skbkontur/react-ui-validations";
@@ -11,6 +11,8 @@ import TagDropdownSelect from "../TagDropdownSelect/TagDropdownSelect";
 import ScheduleEdit from "../ScheduleEdit/ScheduleEdit";
 import CodeRef from "../CodeRef/CodeRef";
 import HelpTooltip from "../HelpTooltip/HelpTooltip";
+import { ConfigState } from "../../store/selectors";
+import { useAppSelector } from "../../store/hooks";
 import classNames from "classnames/bind";
 
 import styles from "./SubscriptionEditor.less";
@@ -19,177 +21,29 @@ const cn = classNames.bind(styles);
 
 export type SubscriptionInfo = Omit<SubscriptionCreateInfo, "user" | "id">;
 
-type Props = {
+type TSubscriptionEditorProps = {
     subscription: Subscription | SubscriptionInfo;
     onChange: (subscriptionInfo: Partial<SubscriptionInfo>) => void;
     tags: Array<string>;
     contacts: Array<Contact>;
 };
 
-export default class SubscriptionEditor extends React.Component<Props> {
-    render(): React.ReactNode {
-        const { subscription, contacts, onChange, tags } = this.props;
-        const { plotting = { enabled: true, theme: "light" } } = subscription;
-        const isAllTagsToggleVisible: boolean =
-            this.context?.featureFlags?.isSubscriptionToAllTagsAvailable ?? true;
-        const isAddPlottingVisible: boolean =
-            this.context?.featureFlags?.isPlottingAvailable ?? true;
-        return (
-            <div className={cn("form")}>
-                <div className={cn("row")}>
-                    <div className={cn("caption")}>Target delivery channels:</div>
-                    <div className={cn("value", "with-input")}>
-                        <ValidationWrapperV1
-                            renderMessage={tooltip("right middle")}
-                            validationInfo={this.validateContacts()}
-                        >
-                            <ContactSelect
-                                contactIds={subscription.contacts}
-                                onChange={(contactIds) => onChange({ contacts: contactIds })}
-                                availableContacts={contacts}
-                            />
-                        </ValidationWrapperV1>
-                    </div>
-                </div>
-                <div className={cn("row")}>
-                    <div className={cn("caption")}>
-                        Tags:{" "}
-                        <HelpTooltip closeButton={false}>
-                            Notification will be sent if trigger contains <strong>ALL</strong> of
-                            selected tags.
-                        </HelpTooltip>
-                    </div>
-                    <div className={cn("value", "with-input")}>
-                        <ValidationWrapperV1
-                            renderMessage={tooltip("right middle")}
-                            validationInfo={this.validateTags()}
-                        >
-                            <TagDropdownSelect
-                                data-tid="Tag dropdown select"
-                                value={subscription.tags}
-                                onChange={(nextTags: string[]) => {
-                                    onChange({
-                                        tags: nextTags,
-                                    });
-                                }}
-                                availableTags={tags}
-                                isDisabled={subscription.any_tags}
-                            />
-                        </ValidationWrapperV1>
-                    </div>
-                </div>
-                {isAllTagsToggleVisible && (
-                    <div className={cn("row")}>
-                        <span>
-                            <Toggle
-                                checked={subscription.any_tags}
-                                onValueChange={(checked) =>
-                                    onChange({
-                                        any_tags: checked,
-                                        tags: checked ? [] : subscription.tags,
-                                    })
-                                }
-                            >
-                                All tags
-                            </Toggle>
-                        </span>{" "}
-                        <HelpTooltip closeButton={false}>
-                            You will be subscribed to ALL existing tags. May cause increased loads
-                            and alert spamming.
-                        </HelpTooltip>
-                    </div>
-                )}
-                <div className={cn("row")}>
-                    <div className={cn("caption")}>Delivery schedule:</div>
-                    <div className={cn("value")}>
-                        <ScheduleEdit
-                            schedule={subscription.sched}
-                            onChange={(value: Schedule) => onChange({ sched: value })}
-                        />
-                    </div>
-                </div>
-                <div className={cn("row")}>
-                    <Checkbox
-                        checked={subscription.throttling}
-                        onValueChange={(checked) => onChange({ throttling: checked })}
-                    >
-                        Throttle messages
-                    </Checkbox>{" "}
-                    <HelpTooltip closeButton={false}>
-                        If trigger emit to many events they will be grouped into single message.
-                    </HelpTooltip>
-                </div>
-                <div className={cn("row")}>
-                    <Checkbox
-                        checked={subscription.ignore_recoverings}
-                        onValueChange={(checked) => onChange({ ignore_recoverings: checked })}
-                    >
-                        Send notifications when triggers degraded only
-                    </Checkbox>{" "}
-                    <HelpTooltip closeButton={false}>
-                        {this.renderDegradationExplanation()}
-                    </HelpTooltip>
-                </div>
-                <div className={cn("row")}>
-                    <Checkbox
-                        checked={subscription.ignore_warnings}
-                        onValueChange={(checked) => onChange({ ignore_warnings: checked })}
-                    >
-                        Do not send <CodeRef>WARN</CodeRef> notifications
-                    </Checkbox>{" "}
-                    <HelpTooltip closeButton={false}>
-                        {this.renderWarnExclusionExplanation()}
-                    </HelpTooltip>
-                </div>
-                {isAddPlottingVisible && (
-                    <div className={cn("row")}>
-                        <Checkbox
-                            checked={plotting.enabled}
-                            onValueChange={(checked) =>
-                                onChange({ plotting: { ...plotting, enabled: checked } })
-                            }
-                        >
-                            Add graph to notification
-                        </Checkbox>
-                        {plotting.enabled && (
-                            <div className={cn("row-options")}>
-                                <label>
-                                    Light
-                                    <span className={cn("graph-theme-toggle")}>
-                                        <Toggle
-                                            checked={plotting.theme === "dark"}
-                                            onChange={() =>
-                                                onChange({
-                                                    plotting: {
-                                                        ...plotting,
-                                                        theme:
-                                                            plotting.theme === "dark"
-                                                                ? "light"
-                                                                : "dark",
-                                                    },
-                                                })
-                                            }
-                                        />
-                                    </span>
-                                    Dark
-                                </label>
-                            </div>
-                        )}
-                    </div>
-                )}
-                <div className={cn("row")}>
-                    <Checkbox
-                        checked={subscription.enabled}
-                        onValueChange={(checked) => onChange({ enabled: checked })}
-                    >
-                        Enabled
-                    </Checkbox>{" "}
-                </div>
-            </div>
-        );
-    }
+const SubscriptionEditor: FC<TSubscriptionEditorProps> = ({
+    subscription,
+    contacts,
+    onChange,
+    tags,
+}) => {
+    const { config } = useAppSelector(ConfigState);
+
+    const { plotting = { enabled: true, theme: "light" } } = subscription;
 
-    renderDegradationExplanation = (): React.ReactElement => (
+    const isAllTagsToggleVisible: boolean =
+        config?.featureFlags?.isSubscriptionToAllTagsAvailable ?? true;
+
+    const isAddPlottingVisible: boolean = config?.featureFlags?.isPlottingAvailable ?? true;
+
+    const renderDegradationExplanation = (): React.ReactElement => (
         <div>
             Only following state switches triggers notification:
             <div>
@@ -213,7 +67,7 @@ export default class SubscriptionEditor extends React.Component<Props> {
         </div>
     );
 
-    renderWarnExclusionExplanation = (): React.ReactElement => (
+    const renderWarnExclusionExplanation = (): React.ReactElement => (
         <div>
             Do not triggers notification on following switches:
             <div>
@@ -225,8 +79,7 @@ export default class SubscriptionEditor extends React.Component<Props> {
         </div>
     );
 
-    validateContacts(): ValidationInfo | null {
-        const { subscription } = this.props;
+    const validateContacts = (): ValidationInfo | null => {
         if (subscription.contacts.length === 0) {
             return {
                 message: "Please add one or more delivery channels",
@@ -234,10 +87,9 @@ export default class SubscriptionEditor extends React.Component<Props> {
             };
         }
         return null;
-    }
+    };
 
-    validateTags(): ValidationInfo | null {
-        const { subscription } = this.props;
+    const validateTags = (): ValidationInfo | null => {
         if (subscription.tags.length === 0 && !subscription.any_tags) {
             return {
                 message: "Please add one or more tags",
@@ -245,5 +97,157 @@ export default class SubscriptionEditor extends React.Component<Props> {
             };
         }
         return null;
-    }
-}
+    };
+
+    return (
+        <div className={cn("form")}>
+            <div className={cn("row")}>
+                <div className={cn("caption")}>Target delivery channels:</div>
+                <div className={cn("value", "with-input")}>
+                    <ValidationWrapperV1
+                        renderMessage={tooltip("right middle")}
+                        validationInfo={validateContacts()}
+                    >
+                        <ContactSelect
+                            contactIds={subscription.contacts}
+                            onChange={(contactIds) => onChange({ contacts: contactIds })}
+                            availableContacts={contacts}
+                        />
+                    </ValidationWrapperV1>
+                </div>
+            </div>
+            <div className={cn("row")}>
+                <div className={cn("caption")}>
+                    Tags:{" "}
+                    <HelpTooltip closeButton={false}>
+                        Notification will be sent if trigger contains <strong>ALL</strong> of
+                        selected tags.
+                    </HelpTooltip>
+                </div>
+                <div className={cn("value", "with-input")}>
+                    <ValidationWrapperV1
+                        renderMessage={tooltip("right middle")}
+                        validationInfo={validateTags()}
+                    >
+                        <TagDropdownSelect
+                            data-tid="Tag dropdown select"
+                            value={subscription.tags}
+                            onChange={(nextTags: string[]) => {
+                                onChange({
+                                    tags: nextTags,
+                                });
+                            }}
+                            availableTags={tags}
+                            isDisabled={subscription.any_tags}
+                        />
+                    </ValidationWrapperV1>
+                </div>
+            </div>
+            {isAllTagsToggleVisible && (
+                <div className={cn("row")}>
+                    <span>
+                        <Toggle
+                            checked={subscription.any_tags}
+                            onValueChange={(checked) =>
+                                onChange({
+                                    any_tags: checked,
+                                    tags: checked ? [] : subscription.tags,
+                                })
+                            }
+                        >
+                            All tags
+                        </Toggle>
+                    </span>{" "}
+                    <HelpTooltip closeButton={false}>
+                        You will be subscribed to ALL existing tags. May cause increased loads and
+                        alert spamming.
+                    </HelpTooltip>
+                </div>
+            )}
+            <div className={cn("row")}>
+                <div className={cn("caption")}>Delivery schedule:</div>
+                <div className={cn("value")}>
+                    <ScheduleEdit
+                        schedule={subscription.sched}
+                        onChange={(value: Schedule) => onChange({ sched: value })}
+                    />
+                </div>
+            </div>
+            <div className={cn("row")}>
+                <Checkbox
+                    checked={subscription.throttling}
+                    onValueChange={(checked) => onChange({ throttling: checked })}
+                >
+                    Throttle messages
+                </Checkbox>{" "}
+                <HelpTooltip closeButton={false}>
+                    If trigger emit to many events they will be grouped into single message.
+                </HelpTooltip>
+            </div>
+            <div className={cn("row")}>
+                <Checkbox
+                    checked={subscription.ignore_recoverings}
+                    onValueChange={(checked) => onChange({ ignore_recoverings: checked })}
+                >
+                    Send notifications when triggers degraded only
+                </Checkbox>{" "}
+                <HelpTooltip closeButton={false}>{renderDegradationExplanation()}</HelpTooltip>
+            </div>
+            <div className={cn("row")}>
+                <Checkbox
+                    checked={subscription.ignore_warnings}
+                    onValueChange={(checked) => onChange({ ignore_warnings: checked })}
+                >
+                    Do not send <CodeRef>WARN</CodeRef> notifications
+                </Checkbox>{" "}
+                <HelpTooltip closeButton={false}>{renderWarnExclusionExplanation()}</HelpTooltip>
+            </div>
+            {isAddPlottingVisible && (
+                <div className={cn("row")}>
+                    <Checkbox
+                        checked={plotting.enabled}
+                        onValueChange={(checked) =>
+                            onChange({ plotting: { ...plotting, enabled: checked } })
+                        }
+                    >
+                        Add graph to notification
+                    </Checkbox>
+                    {plotting.enabled && (
+                        <div className={cn("row-options")}>
+                            <label>
+                                Light
+                                <span className={cn("graph-theme-toggle")}>
+                                    <Toggle
+                                        checked={plotting.theme === "dark"}
+                                        onChange={() =>
+                                            onChange({
+                                                plotting: {
+                                                    ...plotting,
+                                                    theme:
+                                                        plotting.theme === "dark"
+                                                            ? "light"
+                                                            : "dark",
+                                                },
+                                            })
+                                        }
+                                    />
+                                </span>
+                                Dark
+                            </label>
+                        </div>
+                    )}
+                </div>
+            )}
+            <div className={cn("row")}>
+                <Checkbox
+                    checked={subscription.enabled}
+                    onValueChange={(checked) => onChange({ enabled: checked })}
+                >
+                    Enabled
+                </Checkbox>{" "}
+            </div>
+        </div>
+    );
+};
+
+export default SubscriptionEditor;