refactor(VariantManagement): support SSR (#4272)

Part of #4091

Author: MarcusNotheis

packages/main/src/components/VariantManagement/CodeGen.tsx

@@ -17,10 +17,11 @@ import {
   VIEW,
   SEARCH
 } from '../../i18n/i18n-defaults';
+import { useCanRenderPortal } from '../../internal/ssr';
 import { Icon, Input } from '../../webComponents';
 import { Bar } from '../../webComponents/Bar';
 import { Button } from '../../webComponents/Button';
-import { Dialog, DialogDomRef } from '../../webComponents/Dialog';
+import { Dialog } from '../../webComponents/Dialog';
 import { Table } from '../../webComponents/Table';
 import { TableColumn } from '../../webComponents/TableColumn';
 import { FlexBox } from '../FlexBox';
@@ -136,14 +137,6 @@ export const ManageViewsDialog = (props: ManageViewsDialogPropTypes) => {
       <TableColumn key="delete-variant-item" />
     </>
   );
-  const manageViewsRef = useRef<DialogDomRef>(null);
-
-  useEffect(() => {
-    manageViewsRef.current.show();
-    return () => {
-      manageViewsRef.current?.close();
-    };
-  }, []);
 
   const [childrenProps, setChildrenProps] = useState(
     Children.map(children, (child) => {
@@ -217,11 +210,16 @@ export const ManageViewsDialog = (props: ManageViewsDialogPropTypes) => {
     );
   };
 
+  const canRenderPortal = useCanRenderPortal();
+  if (!canRenderPortal) {
+    return null;
+  }
+
   return createPortal(
     <Dialog
+      open
       className={classes.manageViewsDialog}
       data-component-name="VariantManagementManageViewsDialog"
-      ref={manageViewsRef}
       onAfterClose={onAfterClose}
       headerText={manageViewsText}
       header={
@@ -277,6 +275,6 @@ export const ManageViewsDialog = (props: ManageViewsDialogPropTypes) => {
         })}
       </Table>
     </Dialog>,
-    portalContainer
+    portalContainer ?? document.body
   );
 };

packages/main/src/components/VariantManagement/ManageViewsDialog.tsx

@@ -3,8 +3,7 @@ import favoriteIcon from '@ui5/webcomponents-icons/dist/favorite.js';
 import unfavoriteIcon from '@ui5/webcomponents-icons/dist/unfavorite.js';
 import { ThemingParameters, useI18nBundle } from '@ui5/webcomponents-react-base';
 import React, { useReducer, useRef, useState } from 'react';
-import { ButtonDesign } from '../../enums/ButtonDesign';
-import { ValueState } from '../../enums/ValueState';
+import { ButtonDesign, ValueState } from '../../enums';
 import {
   APPLY_AUTOMATICALLY,
   DELETE_VIEW,
@@ -19,13 +18,7 @@ import {
   VIEW
 } from '../../i18n/i18n-defaults';
 import { trimAndRemoveSpaces } from '../../internal/utils';
-import { Button } from '../../webComponents/Button';
-import { CheckBox } from '../../webComponents/CheckBox';
-import { Icon } from '../../webComponents/Icon';
-import { Input } from '../../webComponents/Input';
-import { RadioButton } from '../../webComponents/RadioButton';
-import { TableCell } from '../../webComponents/TableCell';
-import { TableRow } from '../../webComponents/TableRow';
+import { Button, CheckBox, Icon, Input, RadioButton, TableCell, TableRow } from '../../webComponents';
 import { Text } from '../Text';
 import { VariantItemPropTypes } from './VariantItem';
 

packages/main/src/components/VariantManagement/ManageViewsTableRows.tsx

@@ -1,12 +1,9 @@
 import { useI18nBundle, useIsomorphicId } from '@ui5/webcomponents-react-base';
 import { clsx } from 'clsx';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { createUseStyles } from 'react-jss';
-import { BarDesign } from '../../enums';
-import { ButtonDesign } from '../../enums/ButtonDesign';
-import { FlexBoxAlignItems } from '../../enums/FlexBoxAlignItems';
-import { FlexBoxDirection } from '../../enums/FlexBoxDirection';
+import { BarDesign, ButtonDesign, FlexBoxAlignItems, FlexBoxDirection } from '../../enums';
 import {
   APPLY_AUTOMATICALLY,
   CANCEL,
@@ -19,14 +16,20 @@ import {
   VIEW
 } from '../../i18n/i18n-defaults';
 import { Ui5CustomEvent } from '../../interfaces/Ui5CustomEvent';
+import { useCanRenderPortal } from '../../internal/ssr';
 import { trimAndRemoveSpaces } from '../../internal/utils';
 import { SelectedVariant } from '../../internal/VariantManagementContext';
-import { Bar } from '../../webComponents/Bar';
-import { Button, ButtonDomRef } from '../../webComponents/Button';
-import { CheckBox } from '../../webComponents/CheckBox';
-import { Dialog, DialogDomRef } from '../../webComponents/Dialog';
-import { Input, InputPropTypes } from '../../webComponents/Input';
-import { Label } from '../../webComponents/Label';
+import {
+  Bar,
+  Button,
+  ButtonDomRef,
+  CheckBox,
+  Dialog,
+  DialogDomRef,
+  Input,
+  InputPropTypes,
+  Label
+} from '../../webComponents';
 import { FlexBox } from '../FlexBox';
 
 const useStyles = createUseStyles(
@@ -137,15 +140,14 @@ export const SaveViewDialog = (props: SaveViewDialogPropTypes) => {
     setApplyAutomatically(e.target.checked);
   };
 
-  useEffect(() => {
-    saveViewDialogRef.current.show();
-    return () => {
-      saveViewDialogRef.current?.close();
-    };
-  }, []);
+  const canRenderPortal = useCanRenderPortal();
+  if (!canRenderPortal) {
+    return null;
+  }
 
   return createPortal(
     <Dialog
+      open
       className={classes.dialog}
       ref={saveViewDialogRef}
       headerText={headingText}
@@ -198,6 +200,6 @@ export const SaveViewDialog = (props: SaveViewDialogPropTypes) => {
         </FlexBox>
       </FlexBox>
     </Dialog>,
-    portalContainer
+    portalContainer ?? document.body
   );
 };

packages/main/src/components/VariantManagement/SaveViewDialog.tsx

@@ -1,10 +1,12 @@
 import { useState } from 'react';
 import { TitleLevel } from '../../enums';
-import { VariantManagementWithCustomValidation } from './CodeGen';
 import { VariantItem } from './VariantItem';
+import { WithCustomValidation as WithCustomValidationStory } from './VariantManagement.stories';
 import { VariantManagement, VariantManagementPropTypes } from './index';
 import { cypressPassThroughTestsFactory } from '@/cypress/support/utils';
 
+const WithCustomValidation = WithCustomValidationStory.render;
+
 const TwoVariantItems = [
   <VariantItem key="0">VariantItem 1</VariantItem>,
   <VariantItem selected key="1">
@@ -96,7 +98,7 @@ describe('VariantManagement', () => {
 
   it('saveViewInputProps & manageViewsInputProps', () => {
     // manageViewsInputProps
-    cy.mount(<VariantManagementWithCustomValidation />);
+    cy.mount(<WithCustomValidation />);
     cy.contains('Max 12 chars').click();
     cy.findByText('Manage').click();
     cy.get('[ui5-dialog]').should('be.visible');
@@ -113,7 +115,8 @@ describe('VariantManagement', () => {
     cy.contains('Max 12 charB').should('be.visible');
 
     //saveViewInputProps
-    cy.mount(<VariantManagementWithCustomValidation selectedByIndex={0} />);
+    // @ts-expect-error: not a real prop, just for testing
+    cy.mount(<WithCustomValidation selectedByIndex={0} />);
     cy.contains('Only alphanumeric chars in Save View input').click();
     cy.findByText('Save As').click();
     cy.get('[ui5-dialog]').should('be.visible');