fix: Misc. fixes for anvil (#28204)

## Description
Fixes #28203 
- Borders are added to widgets separately now, as there is no resizer in
Anvil
- Fix main container jump when hovering over the main container resizer
- Add height 100% to themeprovider so that the layout preset for main
canvas can render correctly
- Stop widgets from focusing in preview mode
- Prevent AutoHeight Sagas from running in Anvil
- Prevent Auto Layout sagas from running in Anvil

app/client/packages/design-system/theming/src/theme/src/ThemeProvider.tsx

@@ -30,8 +30,8 @@ const providerCss = ({ fontFamily, typography, ...theme }: Theme) => css`
 `;
 
 export const ThemeProvider = (props: ThemeProviderProps) => {
-  const { children, className, style, theme } = props;
-
+  const { children, className, style = {}, theme } = props;
+  style.height = "100%";
   return (
     <ThemeContext.Provider value={theme}>
       <div

app/client/src/layoutSystems/anvil/common/AnvilFlexComponent.tsx

@@ -28,6 +28,7 @@ import WidgetFactory from "WidgetProvider/factory";
 import type { WidgetProps } from "widgets/BaseWidget";
 import type { WidgetConfigProps } from "WidgetProvider/constants";
 import { usePositionObserver } from "layoutSystems/common/utils/LayoutElementPositionsObserver/usePositionObserver";
+import { useWidgetBorderStyles } from "./hooks/useWidgetBorderStyles";
 
 /**
  * Adds following functionalities to the widget:
@@ -152,12 +153,15 @@ export function AnvilFlexComponent(props: AnvilFlexComponentProps) {
     verticalAlignment,
   ]);
 
+  const borderStyles = useWidgetBorderStyles(props.widgetId);
+
   const styleProps: CSSProperties = useMemo(() => {
     return {
       position: "relative",
       "&:hover": {
         zIndex: onHoverZIndex,
       },
+      ...borderStyles,
     };
   }, [onHoverZIndex]);
 

app/client/src/layoutSystems/anvil/common/hooks/useWidgetBorderStyles.ts

@@ -0,0 +1,45 @@
+import type { AppState } from "@appsmith/reducers";
+import { Colors } from "constants/Colors";
+import { useSelector } from "react-redux";
+import { previewModeSelector } from "selectors/editorSelectors";
+import {
+  isCurrentWidgetFocused,
+  isWidgetSelected,
+} from "selectors/widgetSelectors";
+
+export function useWidgetBorderStyles(widgetId: string) {
+  const isFocused = useSelector(isCurrentWidgetFocused(widgetId));
+  const isSelected = useSelector(isWidgetSelected(widgetId));
+  const isDragging = useSelector(
+    (state: AppState) => state.ui.widgetDragResize.isDragging,
+  );
+  const isCanvasResizing: boolean = useSelector(
+    (state: AppState) => state.ui.widgetDragResize.isAutoCanvasResizing,
+  );
+
+  const isPreviewMode = useSelector(previewModeSelector);
+  if (isPreviewMode) {
+    return {};
+  }
+
+  let borderColor = "transparent";
+  if (isFocused) {
+    borderColor = Colors.WATUSI;
+  }
+  if (isSelected) {
+    borderColor = "#F86A2B";
+  }
+
+  return {
+    border: `1px solid ${
+      isDragging || isCanvasResizing ? "transparent" : borderColor
+    }`,
+    outline: `1px solid ${
+      !isDragging && (isFocused || isSelected) ? Colors.GREY_1 : "transparent"
+    }`,
+    borderRadius: "4px 0px 4px 4px",
+    boxShadow: `0px 0px 0px 1px ${
+      isDragging || isCanvasResizing ? "transparent" : borderColor
+    }`,
+  };
+}

app/client/src/layoutSystems/common/draggable/DraggableComponent.tsx

@@ -16,6 +16,7 @@ import {
   useWidgetDragResize,
 } from "utils/hooks/dragResizeHooks";
 import { getShouldAllowDrag } from "selectors/widgetDragSelectors";
+import { previewModeSelector } from "selectors/editorSelectors";
 
 const DraggableWrapper = styled.div`
   display: block;
@@ -86,6 +87,8 @@ function DraggableComponent(props: DraggableComponentProps) {
       state.ui.widgetDragResize?.dragDetails?.draggedOn === props.parentId,
   );
 
+  const isPreviewMode = useSelector(previewModeSelector);
+
   // True when any widget is dragging or resizing, including this one
   const isResizingOrDragging = !!isResizing || !!isDragging;
   const isCurrentWidgetDragging = isDragging && isSelected;
@@ -99,6 +102,7 @@ function DraggableComponent(props: DraggableComponentProps) {
       !isResizingOrDragging &&
       !isFocused &&
       !props.resizeDisabled &&
+      !isPreviewMode &&
       focusWidget(props.widgetId);
     e.stopPropagation();
   };

app/client/src/layoutSystems/common/mainContainerResizer/MainContainerResizer.tsx

@@ -36,7 +36,6 @@ const AutoLayoutCanvasResizer = styled.div`
   }
   &:hover,
   &:active {
-    width: 3px;
     transition: width 300ms ease;
     background: #ff9b4e;
     transition: background 300ms ease;

app/client/src/sagas/AutoLayoutUpdateSagas.tsx

@@ -65,6 +65,17 @@ import type { AppState } from "@appsmith/reducers";
 import { nestDSL, flattenDSL } from "@shared/dsl";
 import { getLayoutSystemType } from "selectors/layoutSystemSelectors";
 
+// Saga check : if layout system is not anvil, then run the saga
+// An alternative implementation would be to re-use shouldRunSaga,
+// however we will still have to check for individula action types.
+// This seems cleaner
+function* preventForAnvil(saga: any, action: ReduxAction<unknown>) {
+  const layoutSystemType: LayoutSystemTypes = yield select(getLayoutSystemType);
+  if (layoutSystemType !== LayoutSystemTypes.ANVIL) {
+    yield call(shouldRunSaga, saga, action);
+  }
+}
+
 function* shouldRunSaga(saga: any, action: ReduxAction<unknown>) {
   const isAutoLayout: boolean = yield select(getIsAutoLayout);
   if (isAutoLayout) {
@@ -492,19 +503,23 @@ export default function* layoutUpdateSagas() {
   yield all([
     takeLatest(
       ReduxActionTypes.RECALCULATE_COLUMNS,
+      preventForAnvil,
       updateLayoutForMobileCheckpoint,
     ),
     takeLatest(
       ReduxActionTypes.UPDATE_LAYOUT_SYSTEM_TYPE,
+      preventForAnvil,
       updateLayoutSystemTypeSaga,
     ),
     takeLatest(
       ReduxActionTypes.UPDATE_WIDGET_DIMENSIONS,
+      preventForAnvil,
       updateWidgetDimensionsSaga,
     ),
     debounce(
       50,
       ReduxActionTypes.PROCESS_AUTO_LAYOUT_DIMENSION_UPDATES,
+      preventForAnvil,
       processAutoLayoutDimensionUpdatesSaga,
     ),
     takeLatest(

app/client/src/sagas/autoHeightSagas/index.ts

@@ -15,11 +15,14 @@ import {
 import { dynamicallyUpdateContainersSaga } from "./containers";
 import { generateTreeForAutoHeightComputations } from "./layoutTree";
 import { updateWidgetAutoHeightSaga } from "./widgets";
-import { getIsAutoLayout } from "selectors/editorSelectors";
+import { LayoutSystemTypes } from "layoutSystems/types";
+import { getLayoutSystemType } from "selectors/layoutSystemSelectors";
 
+// Auto height actions must be computed only in FIXED layout
+// We can avoid these types of checks once we change the architecture of layout specific sagas.
 function* shouldCallAutoHeight(saga: any, action: ReduxAction<unknown>) {
-  const isAutoLayout: boolean = yield select(getIsAutoLayout);
-  if (!isAutoLayout) {
+  const layoutSystemType: LayoutSystemTypes = yield select(getLayoutSystemType);
+  if (layoutSystemType === LayoutSystemTypes.FIXED) {
     yield call(saga, action);
   }
 }