feat/subscription transfer btn (#528)

src/Api/MoiraApi.ts

@@ -20,6 +20,7 @@ export type SubscriptionCreateInfo = {
     enabled: boolean;
     any_tags: boolean;
     user?: string;
+    team_id?: string;
     id?: string;
     ignore_recoverings: boolean;
     ignore_warnings: boolean;

src/Components/CreateSubscriptionModal/CreateSubscriptionModal.tsx

@@ -5,7 +5,8 @@ import { ValidationContainer } from "@skbkontur/react-ui-validations";
 import { Fill, RowStack } from "@skbkontur/react-stack-layout";
 import { Contact } from "../../Domain/Contact";
 import { omitSubscription } from "../../helpers/omitTypes";
-import SubscriptionEditor, { SubscriptionInfo } from "../SubscriptionEditor/SubscriptionEditor";
+import SubscriptionEditor from "../SubscriptionEditor/SubscriptionEditor";
+import { SubscriptionCreateInfo } from "../../Api/MoiraApi";
 import FileLoader from "../FileLoader/FileLoader";
 import ModalError from "../ModalError/ModalError";
 import { useParams } from "react-router";
@@ -23,7 +24,7 @@ type Props = {
 const CreateSubscriptionModal: React.FC<Props> = ({ tags, contacts, onCancel }) => {
     const isPlottingDefaultOn = useSelector(selectIsPlottingDefaultOn);
 
-    const [subscription, setSubscription] = useState<SubscriptionInfo>({
+    const [subscription, setSubscription] = useState<SubscriptionCreateInfo>({
         any_tags: false,
         sched: createSchedule(WholeWeek),
         tags: [],
@@ -47,7 +48,7 @@ const CreateSubscriptionModal: React.FC<Props> = ({ tags, contacts, onCancel })
         isTestingSubscription,
     } = useCreateSubscription(validationContainerRef, subscription, onCancel, setError, teamId);
 
-    const handleChange = (subscription: Partial<SubscriptionInfo>): void => {
+    const handleChange = (subscription: Partial<SubscriptionCreateInfo>): void => {
         setSubscription((prev) => ({ ...prev, ...subscription }));
         setError(null);
     };

src/Components/SubscriptionEditor/SubscriptionEditor.tsx

@@ -19,11 +19,9 @@ import styles from "./SubscriptionEditor.less";
 
 const cn = classNames.bind(styles);
 
-export type SubscriptionInfo = Omit<SubscriptionCreateInfo, "user" | "id">;
-
 type TSubscriptionEditorProps = {
-    subscription: Subscription | SubscriptionInfo;
-    onChange: (subscriptionInfo: Partial<SubscriptionInfo>) => void;
+    subscription: Subscription | SubscriptionCreateInfo;
+    onChange: (subscriptionInfo: Partial<SubscriptionCreateInfo>) => void;
     tags: Array<string>;
     contacts: Array<Contact>;
 };

src/Components/SubscriptionList/SubscriptionList.tsx

@@ -5,6 +5,8 @@ import { SubscriptionRow } from "./SubscriptionRow/SubscriptionRow";
 import ArrowBoldDownIcon from "@skbkontur/react-icons/ArrowBoldDown";
 import ArrowBoldUpIcon from "@skbkontur/react-icons/ArrowBoldUp";
 import { useSortData } from "../../hooks/useSortData";
+import { useAppSelector } from "../../store/hooks";
+import { UIState } from "../../store/selectors";
 import classNames from "classnames/bind";
 
 import styles from "./SubscriptionList.less";
@@ -22,6 +24,8 @@ export const SubscriptionList: React.FC<Props> = ({
     contacts,
     handleEditSubscription,
 }) => {
+    const { isTransferringSubscriptions } = useAppSelector(UIState);
+
     const { sortedData, sortConfig, handleSort } = useSortData(subscriptions, "contacts");
 
     const SortingIcon =
@@ -31,6 +35,7 @@ export const SubscriptionList: React.FC<Props> = ({
             <table className={cn("items")}>
                 <thead>
                     <tr className={cn("header")}>
+                        {isTransferringSubscriptions && <td style={{ position: "absolute" }}></td>}
                         <td className={cn("fold-button-gap")} />
                         <td colSpan={2}>
                             <button

src/Components/SubscriptionList/SubscriptionRow/SubscriptionRow.less

@@ -17,6 +17,10 @@
         border-bottom: 0;
     }
 
+    &:has(td.checkbox-cell:hover) {
+        background-color: transparent;
+    }
+
     position: relative;
 
     &::after {
@@ -34,6 +38,13 @@
     }
 }
 
+.checkbox-cell {
+    position: absolute;
+    left: -18px;
+    top: 50%;
+    transform: translate(-50%, -50%);
+}
+
 .error {
     &:hover {
         background-color: #f8a291;
@@ -85,6 +96,14 @@
     width: 10px;
 }
 
+.focused {
+    div {
+        div {
+            box-shadow: inset 0 0 0 1px #fff, 0 0 0 2px #1f87ef;
+        }
+    }
+}
+
 @media screen and (min-width: @breakpoint) {
     .showMore-button-cell {
         display: none;

src/Components/SubscriptionList/SubscriptionRow/SubscriptionRow.tsx

@@ -8,6 +8,10 @@ import HelpTooltip from "../../HelpTooltip/HelpTooltip";
 import queryString from "query-string";
 import ArrowChevronUpIcon from "@skbkontur/react-icons/ArrowChevronUp";
 import ArrowChevronDownIcon from "@skbkontur/react-icons/ArrowChevronDown";
+import { useAppDispatch, useAppSelector } from "../../../store/hooks";
+import { UIState } from "../../../store/selectors";
+import { Checkbox } from "@skbkontur/react-ui/components/Checkbox";
+import { toggleSubscriptionTransfer } from "../../../store/Reducers/UIReducer.slice";
 import classNames from "classnames/bind";
 
 import styles from "./SubscriptionRow.less";
@@ -25,6 +29,8 @@ export const SubscriptionRow: React.FC<SubscriptionRowProps> = ({
     contacts,
     onEditSubscription,
 }) => {
+    const { isTransferringSubscriptions, transferingSubscriptions } = useAppSelector(UIState);
+    const dispatch = useAppDispatch();
     const [isExpanded, setIsExpanded] = useState(false);
 
     const toggleExpand = () => {
@@ -64,6 +70,25 @@ export const SubscriptionRow: React.FC<SubscriptionRowProps> = ({
             className={cn(rowClassName)}
             onClick={() => onEditSubscription(subscription)}
         >
+            {isTransferringSubscriptions && (
+                <td
+                    onClick={(event) => {
+                        event.stopPropagation();
+                    }}
+                    className={cn("checkbox-cell")}
+                >
+                    <Checkbox
+                        className={cn({
+                            focused:
+                                isTransferringSubscriptions && !transferingSubscriptions.length,
+                        })}
+                        checked={transferingSubscriptions.includes(subscription)}
+                        onClick={() => {
+                            dispatch(toggleSubscriptionTransfer(subscription));
+                        }}
+                    />
+                </td>
+            )}
             <td className={cn("showMore-button-cell")}>
                 {isExpanded ? (
                     <ArrowChevronUpIcon onClick={(event) => handleCollapse(event)} />
@@ -97,12 +122,10 @@ export const SubscriptionRow: React.FC<SubscriptionRowProps> = ({
             )}
             {areAnyDisruptedSubs && (
                 <td className={cn("tooltip-cell")}>
-                    (
                     <HelpTooltip trigger="hover">
                         It seems that this subscription is broken, please set up the delivery
                         channel.
                     </HelpTooltip>
-                    )
                 </td>
             )}
         </tr>

src/Components/TransferSubscriptionsTeamSelect/TransferSubscriptionsTeamSelect.less

@@ -0,0 +1,14 @@
+@import "~styles/variables.less";
+@import "~styles/mixins.less";
+
+.transfer-btn {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.team-checkbox {
+    display: flex;
+    align-items: center;
+    padding: 0;
+}

src/Components/TransferSubscriptionsTeamSelect/TransferSubscriptionsTeamSelect.tsx

@@ -0,0 +1,67 @@
+import React from "react";
+import { DropdownMenu, MenuHeader, MenuSeparator } from "@skbkontur/react-ui";
+import { Checkbox } from "@skbkontur/react-ui/components/Checkbox";
+import { Team } from "../../Domain/Team";
+import { MenuItem } from "@skbkontur/react-ui/components/MenuItem";
+import { ThemeContext, ThemeFactory } from "@skbkontur/react-ui";
+import { useParams } from "react-router";
+import { Button } from "@skbkontur/react-ui/components/Button";
+import { useAppSelector } from "../../store/hooks";
+import { UIState } from "../../store/selectors";
+import classNames from "classnames/bind";
+
+import styles from "./TransferSubscriptionsTeamSelect.less";
+
+const cn = classNames.bind(styles);
+
+interface ITransferSubscriptionsTeamSelectProps {
+    teams: Team[];
+    teamToTransfer: Team | null;
+    handleSetTeamToTransfer: (team: Team) => void;
+}
+
+export const TransferSubscriptionsTeamSelect: React.FC<ITransferSubscriptionsTeamSelectProps> = ({
+    teams,
+    teamToTransfer,
+    handleSetTeamToTransfer,
+}) => {
+    const { teamId: currentTeamId } = useParams<{ teamId: string }>();
+    const { isTransferringSubscriptions } = useAppSelector(UIState);
+
+    return (
+        <DropdownMenu
+            caption={({ openMenu }) => (
+                <Button width={180} className={cn("transfer-btn")} onClick={() => openMenu()}>
+                    {teamToTransfer && isTransferringSubscriptions
+                        ? `Transfering to: ${teamToTransfer.name}`
+                        : "Transfer subscriptions"}
+                </Button>
+            )}
+        >
+            <MenuHeader>Select the team to transfer subscriptions to</MenuHeader>
+            <MenuSeparator />
+            {teams.map((team) => {
+                return (
+                    team.id !== currentTeamId && (
+                        <ThemeContext.Provider
+                            key={team.id}
+                            value={ThemeFactory.create({
+                                menuItemHoverBg: "initial",
+                            })}
+                        >
+                            <MenuItem>
+                                <Checkbox
+                                    className={cn("team-checkbox")}
+                                    checked={teamToTransfer?.id === team.id}
+                                    onValueChange={() => handleSetTeamToTransfer(team)}
+                                >
+                                    {team.name}
+                                </Checkbox>
+                            </MenuItem>
+                        </ThemeContext.Provider>
+                    )
+                );
+            })}
+        </DropdownMenu>
+    );
+};

src/Containers/SettingsContainer.tsx

@@ -83,6 +83,7 @@ const SettingsContainer: FC<ISettingsContainerProps> = ({ isTeamMember, history
                 )}
                 {settings && tags && (
                     <SubscriptionListContainer
+                        teams={teams}
                         tags={tags.list}
                         contacts={settings.contacts}
                         subscriptions={settings.subscriptions}

src/Containers/SubscriptionListContainer/SubscriptionListContainer.less

@@ -1,4 +1,4 @@
-@import '~styles/variables.less';
+@import "~styles/variables.less";
 
 .header {
     font-size: 18px;
@@ -7,25 +7,30 @@
 }
 
 .subscriptionBtnContainer {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(auto,  1fr));
-  grid-auto-flow: column;
-  grid-gap: 5px;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(auto, 1fr));
+    grid-auto-flow: column;
+    grid-gap: 5px;
 }
 
 .row {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  align-items: baseline;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: baseline;
 }
 
-@media screen and (max-width:  @breakpoint) {
-  .subscriptionBtnContainer {
-    grid-template-columns:  1fr;
-    grid-auto-flow: row;
-  }
+.transfer-btns {
+    display: flex;
+    justify-content: end;
+    margin-top: 18px;
+    gap: 10px;
 }
 
-
+@media screen and (max-width: @breakpoint) {
+    .subscriptionBtnContainer {
+        grid-template-columns: 1fr;
+        grid-auto-flow: row;
+    }
+}