Schedules rotation form tweaks (#3365)

# What this PR does

- adds proper boundary constraints on dragging the rotation modal (can't
drag outside of parent container anymore)
- add scrolling within the users list in the rotation modal

## Which issue(s) this PR fixes

Fixes grafana/oncall-private#2299

CHANGELOG.md

@@ -7,6 +7,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+### Fixed
+
+- Fixed recurrency limit issue in the Rotation Modal ([#3358](https://github.com/grafana/oncall/pull/3358))
+- Added dragging boundary constraints for Rotation Modal and show scroll for the users list ([#3365](https://github.com/grafana/oncall/pull/3365))
+
 ## v1.3.58 (2023-11-14)
 
 ### Added
@@ -26,7 +31,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   by excluding dark theme css vars in this case ([#3336](https://github.com/grafana/oncall/pull/3336))
 - Fix issue when acknowledge reminder works for deleted organizations @Ferril ([#3345](https://github.com/grafana/oncall/pull/3345))
 - Fix generating QR code ([#3347](https://github.com/grafana/oncall/pull/3347))
-- Fixed recurrency limit issue in the Rotation Modal ([#3358](https://github.com/grafana/oncall/pull/3358))
 
 ## v1.3.57 (2023-11-10)
 

grafana-plugin/src/components/UserGroups/UserGroups.module.css

@@ -24,25 +24,6 @@
   margin-top: 12px;
 }
 
-/* 
-.separator::before {
-  display: block;
-  content: '';
-  flex-grow: 1;
-  border-bottom: var(--border-medium);
-  height: 0;
-  margin-right: 5px;
-}
-
-.separator::after {
-  display: block;
-  content: '';
-  flex-grow: 1;
-  border-bottom: var(--border-medium);
-  height: 0;
-  margin-left: 5px;
-} */
-
 .groups {
   width: 100%;
   padding: 0;
@@ -51,8 +32,8 @@
   display: flex;
   flex-direction: column;
   gap: 1px;
-  max-height: calc(100vh - 600px);
-  overflow: scroll;
+  max-height: 300px;
+  overflow: auto;
 }
 
 .user {

grafana-plugin/src/containers/RotationForm/RotationForm.module.css

@@ -1,4 +1,4 @@
-.body {
+.container {
   margin: 15px -15px;
   padding: 15px 0;
   border-top: var(--border-medium);

grafana-plugin/src/containers/RotationForm/RotationForm.tsx

@@ -15,7 +15,7 @@ import {
 import cn from 'classnames/bind';
 import dayjs from 'dayjs';
 import { observer } from 'mobx-react';
-import Draggable from 'react-draggable';
+import Draggable, { DraggableData, DraggableEvent } from 'react-draggable';
 
 import Block from 'components/GBlock/Block';
 import Modal from 'components/Modal/Modal';
@@ -106,6 +106,10 @@ const RotationForm = observer((props: RotationFormProps) => {
 
   const [errors, setErrors] = useState<{ [key: string]: string[] }>({});
 
+  const [bounds, setDraggableBounds] = useState<{ left: number; right: number; top: number; bottom: number }>(
+    undefined
+  );
+
   const [rotationName, setRotationName] = useState<string>(`[L${layerPriority}] Rotation`);
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const [offsetTop, setOffsetTop] = useState<number>(0);
@@ -423,7 +427,8 @@ const RotationForm = observer((props: RotationFormProps) => {
             handle=".drag-handler"
             defaultClassName={cx('draggable')}
             positionOffset={{ x: 0, y: offsetTop }}
-            bounds={{ top: 0 }}
+            bounds={bounds || 'body'}
+            onStart={onDraggableInit}
           >
             <div {...props}>{children}</div>
           </Draggable>
@@ -457,7 +462,7 @@ const RotationForm = observer((props: RotationFormProps) => {
               </HorizontalGroup>
             </HorizontalGroup>
           </div>
-          <div className={cx('body')}>
+          <div className={cx('container')}>
             <div className={cx('content')}>
               <VerticalGroup spacing="none">
                 {hasUpdatedShift && (
@@ -684,6 +689,20 @@ const RotationForm = observer((props: RotationFormProps) => {
       )}
     </>
   );
+
+  function onDraggableInit(_e: DraggableEvent, data: DraggableData) {
+    if (!data) {
+      return;
+    }
+
+    const scrollbarView = document.querySelector('.scrollbar-view')?.getBoundingClientRect();
+
+    const x = data.node.offsetLeft;
+    const top = -data.node.offsetTop + (scrollbarView?.top || 100);
+    const bottom = window.innerHeight - (data.node.offsetTop + data.node.offsetHeight);
+
+    setDraggableBounds({ left: -x, right: x, top: top - offsetTop, bottom: bottom - offsetTop });
+  }
 });
 
 interface ShiftPeriodProps {