[Bot] feat: added resize functionality to modal in dbot (deriv-com#13145)

* feat: added resize functionality to modals in dbot

* fix: fixed the failing test case in transaction-details-desktop spec file

Author: vinu-deriv

packages/bot-web-ui/src/components/draggable/draggable.tsx

@@ -23,7 +23,7 @@ export default function Draggable({
     bounds = 'window',
     children,
     dragHandleClassName,
-    enableResizing = false,
+    enableResizing = true,
     header_title,
     height = 'fit-content',
     is_visible,
@@ -54,7 +54,7 @@ export default function Draggable({
                 top: yaxis,
             }}
             dragHandleClassName={dragHandleClassName}
-            enableResizing={enableResizing}
+            enableResizing={{ right: enableResizing, bottom: enableResizing, bottomRight: enableResizing }}
             minHeight={height}
             minWidth={minWidth}
             onDrag={(e, data) => {

packages/bot-web-ui/src/components/transaction-details/__tests__/transaction-details-desktop.spec.tsx

@@ -77,7 +77,7 @@ describe('TransactionDetailsDesktop', () => {
         const computedStyle = window.getComputedStyle(draggable_element);
         const transformValue = computedStyle.getPropertyValue('transform');
 
-        expect(transformValue).toBe('translate(-1034px,0px)');
+        expect(transformValue).toBe('translate(-882px,0px)');
     });
 
     it('should close DesktopTransactionTable modal', () => {

packages/bot-web-ui/src/components/transaction-details/desktop-transaction-table.tsx

@@ -61,7 +61,7 @@ export default function DesktopTransactionTable({
     balance,
 }: TDesktopTransactionTable) {
     return (
-        <div data-testid='transaction_details_tables'>
+        <div data-testid='transaction_details_tables' className='transaction-details-tables'>
             <div
                 className={classNames(
                     `${PARENT_CLASS}__table-container`,
@@ -134,10 +134,15 @@ export default function DesktopTransactionTable({
                     );
                 })}
             </div>
-            <div className={classNames(`${PARENT_CLASS}__table-container`)}>
+            <div
+                className={classNames(
+                    `${PARENT_CLASS}__table-container`,
+                    `${PARENT_CLASS}__table-container__bottom-table`
+                )}
+            >
                 <TableHeader columns={result_columns} />
                 <div className={`${PARENT_CLASS}__table-row`}>
-                    <TableCell label={account} />
+                    <TableCell label={account} extra_classes={[`${PARENT_CLASS}__table-cell--grow-mid`]} />
                     <TableCell label={result?.number_of_runs} />
                     <TableCell label={Math.abs(result?.total_stake ?? 0).toFixed(2)} />
                     <TableCell label={Math.abs(result?.total_payout ?? 0).toFixed(2)} />

packages/bot-web-ui/src/components/transaction-details/transaction-details-desktop.scss

@@ -22,11 +22,13 @@
     &__table-container {
         display: flex;
         flex-direction: column;
-        overflow: auto;
-        max-height: 40vh;
         margin-bottom: 8px;
         &__top-table {
-            height: 40vh;
+            overflow: auto;
+            height: inherit;
+        }
+        &__bottom-table {
+            overflow: unset;
         }
     }
 
@@ -57,7 +59,7 @@
         white-space: normal;
         word-wrap: break-word;
         &--grow-big {
-            flex-grow: 3;
+            flex-grow: 2.5;
         }
         &--grow-mid {
             flex-grow: 1.5;
@@ -94,3 +96,11 @@
         padding: 4px 16px;
     }
 }
+
+.transaction-details-tables {
+    height: calc(100% - 48px);
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    overflow: hidden;
+}

packages/bot-web-ui/src/components/transaction-details/transaction-details-desktop.tsx

@@ -20,7 +20,7 @@ const transaction_columns: TColumn[] = [
 
 /* TODO: Add back account & balance when we have support from transaction store */
 const result_columns: TColumn[] = [
-    { key: 'account', label: localize('Account') },
+    { key: 'account', label: localize('Account'), extra_class: '--grow-mid' },
     { key: 'no_of_runs', label: localize('No. of runs') },
     { key: 'total_stake', label: localize('Total stake') },
     { key: 'total_payout', label: localize('Total payout') },
@@ -57,8 +57,8 @@ const TransactionDetailsDesktop = observer(() => {
     }, []);
 
     // Calculate xaxis and yaxis to center the modal on open
-    const modalWidth = 1034;
-    const modalHeight = 800;
+    const modalWidth = 882;
+    const modalHeight = 404;
     const xaxis = (screenDimensions.width - modalWidth) / 2;
     const yAxisValue = (screenDimensions.height - modalHeight) / 2;
     const yaxis = yAxisValue >= 0 ? yAxisValue : 0;
@@ -71,6 +71,7 @@ const TransactionDetailsDesktop = observer(() => {
             minWidth={modalWidth}
             onCloseDraggable={() => toggleTransactionDetailsModal(false)}
             width={modalWidth}
+            height={modalHeight}
             xaxis={xaxis}
             yaxis={yaxis}
             header_title={'Transactions detailed summary'}

packages/bot-web-ui/src/pages/chart/chart-modal/chart-modal-desktop.tsx

@@ -25,8 +25,8 @@ const ChartModalDesktop = observer(() => {
         };
     }, []);
 
-    const modalWidth = 426;
-    const modalHeight = 481;
+    const modalWidth = 526;
+    const modalHeight = 524;
 
     const xAxisValue = (screenDimensions.width - modalWidth) / 2;
     const yAxisValue = (screenDimensions.height - modalHeight) / 2;
@@ -44,6 +44,7 @@ const ChartModalDesktop = observer(() => {
             onCloseDraggable={setChartModalVisibility}
             minWidth={modalWidth}
             width={modalWidth}
+            height={modalHeight}
             dragHandleClassName='react-rnd-wrapper-header'
         >
             <div className='chart-modal-dialog' data-testid='chart-modal-dialog'>

packages/bot-web-ui/src/pages/chart/chart-modal/chart-modal.scss

@@ -9,18 +9,17 @@
         display: flex;
         align-items: center;
     }
-
-    --modal-height: 48.1vh;
-
+    padding: 0 0.8rem;
+    --modal-height: calc(100% - 48px);
     height: var(--modal-height);
-    max-height: var(--modal-height);
     @include align-items-center;
     justify-content: center;
     z-index: 999;
     transition: opacity 0.25s cubic-bezier(0.25, 0.1, 0.1, 0.25);
 
     .dashboard__chart-wrapper--modal {
-        height: var(--modal-height);
+        height: 100%;
+        width: 100%;
     }
 
     .sc-navigation-widget {