Merge branch 'master' into fix/filter_header

Author: vr-varad

src/custom/CustomTooltip/customTooltip.tsx

@@ -29,8 +29,8 @@ function CustomTooltip({
 }: CustomTooltipProps): JSX.Element {
   return (
     <Tooltip
-      enterDelay={0}
-      leaveDelay={1200}
+      enterTouchDelay={0}
+      leaveTouchDelay={2000}
       componentsProps={_.merge(
         {
           tooltip: {

src/custom/Modal/index.tsx

@@ -175,7 +175,7 @@ export const Modal: React.FC<ModalProps> = ({
       {...props}
     >
       {title && (
-        <ModalStyledHeader data-testid="modal-header">
+        <ModalStyledHeader className='modal-header' data-testid="modal-header">
           {headerIcon && <Box data-testid="modal-header-icon">{headerIcon}</Box>}
           <Typography component={'div'} variant="h6" data-testid="modal-title">
             {title}
@@ -199,7 +199,7 @@ export const Modal: React.FC<ModalProps> = ({
                 )}
               </CustomTooltip>
             )}
-            <CloseBtn onClick={closeModal} data-testid="modal-close-btn">
+            <CloseBtn onClick={closeModal} className='modal-close-btn' data-testid="modal-close-btn">
               <CloseIcon {...iconLarge} fill="#fff"></CloseIcon>
             </CloseBtn>
           </div>
@@ -214,7 +214,7 @@ export const Modal: React.FC<ModalProps> = ({
 
 export const ModalFooter: React.FC<ModalFooterProps> = ({ helpText, children, variant }) => {
   return (
-    <StyledFooter variant={variant} hasHelpText={!!helpText}>
+    <StyledFooter className='modal-footer' variant={variant} hasHelpText={!!helpText}>
       {helpText && (
         // <CustomTooltip title={helpText} variant="standard" placement="top">
         //   <IconButton>

src/custom/Panel/Panel.tsx

@@ -2,7 +2,7 @@ import { Resizable } from 're-resizable';
 import React from 'react';
 import Draggable from 'react-draggable';
 import { Box, BoxProps, Tooltip } from '../../base';
-import { CloseIcon, CollapseAllIcon, ExpandAllIcon, FullScreenIcon } from '../../icons';
+import { CloseIcon, CollapseAllIcon, ExpandAllIcon, FullScreenIcon, ResizeIcon } from '../../icons';
 import { useTheme } from '../../theme';
 import { ErrorBoundary } from '../ErrorBoundary';
 import {
@@ -14,7 +14,8 @@ import {
   PanelBody,
   PanelContainer,
   PanelTitle,
-  ResizableContent
+  ResizableContent,
+  ResizeIconContainer
 } from './style';
 
 export type PanelProps = {
@@ -108,6 +109,9 @@ const Panel_: React.FC<PanelProps> = ({
               </div>
               <PanelBody className="panel-body">{children}</PanelBody>
             </ErrorBoundary>
+            <ResizeIconContainer>
+              <ResizeIcon />
+            </ResizeIconContainer>
           </ResizableContent>
         </Resizable>
       </PanelContainer>

src/custom/Panel/style.tsx

@@ -129,3 +129,17 @@ export const PanelTitle = styled('div')(() => ({
   marginInline: 'auto',
   width: 'fit-content'
 }));
+
+export const ResizeIconContainer = styled('div')(({ theme }) => ({
+  position: 'absolute',
+  bottom: '2px',
+  left: '4px',
+  pointerEvents: 'none',
+  '& svg': {
+    width: '18px',
+    height: '18px',
+    stroke: 'currentColor',
+    fill: 'currentColor',
+    color: theme.palette.text.primary
+  }
+}));

src/custom/index.ts

@@ -2,3 +2,4 @@
 export * from './CustomTooltip';
 export * from './HelperTextPopover';
 export * from './Markdown';
+export * from './Modal';

src/icons/Resize/ResizeIcon.tsx

@@ -0,0 +1,23 @@
+import { FC } from 'react';
+import { DEFAULT_HEIGHT, DEFAULT_WIDTH } from '../../constants/constants';
+import { IconProps } from '../types';
+
+export const ResizeIcon: FC<IconProps> = ({
+  width = DEFAULT_WIDTH,
+  height = DEFAULT_HEIGHT,
+  ...props
+}) => {
+  return (
+    <svg
+      width={width}
+      height={height}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 512 512"
+      {...props}
+    >
+      <path d="M418.3 80H307.8c-7.5 0-13.7 6.1-13.7 13.7v.2c0 7.5 6.1 13.7 13.7 13.7h76.5L107.6 384.3v-76.5c0-7.5-6.1-13.7-13.7-13.7h-.2c-7.5 0-13.7 6.1-13.7 13.7v110.5c0 7.5 6.1 13.7 13.7 13.7h110.5c7.5 0 13.7-6.1 13.7-13.7v-.2c0-7.5-6.1-13.7-13.7-13.7h-76.5l276.7-276.7v76.5c0 7.5 6.1 13.7 13.7 13.7h.2c7.5 0 13.7-6.1 13.7-13.7V93.7c0-7.6-6.1-13.7-13.7-13.7z" />
+    </svg>
+  );
+};
+
+export default ResizeIcon;

src/icons/Resize/index.ts

@@ -0,0 +1 @@
+export { default as ResizeIcon } from './ResizeIcon';

src/icons/index.ts

@@ -99,6 +99,7 @@ export * from './Rectangle';
 export * from './Redo';
 export * from './Remove';
 export * from './Reset';
+export * from './Resize';
 export * from './RightArrow';
 export * from './Ring';
 export * from './Save';