Metadata by default no expanded (#3172)

cypress/elements/shared/button-selectors.js

@@ -19,4 +19,5 @@ export const BUTTON_SELECTORS = {
   deleteSelectedElementsButton:
     '[data-test-id = "delete-selected-elements-icon"]',
   dialogBackButton: '[data-test-id="back"]',
+  expandMetadataButton: '[data-test-id="expand"]',
 };

cypress/support/pages/catalog/products/productDetailsPage.js

@@ -73,9 +73,11 @@ export function fillUpAllCommonFieldsInCreateAndUpdate({
       editSeoSettings(seo);
     })
     .then(() => {
+      cy.get(BUTTON_SELECTORS.expandMetadataButton).first().click();
       addMetadataField(metadata.public);
     })
     .then(() => {
+      cy.get(BUTTON_SELECTORS.expandMetadataButton).last().click();
       addMetadataField(metadata.private);
     });
 }

src/components/Metadata/MetadataCard.tsx

@@ -15,7 +15,7 @@ import {
 } from "@material-ui/core";
 import { DeleteIcon, ExpandIcon, IconButton } from "@saleor/macaw-ui";
 import clsx from "clsx";
-import React, { useEffect } from "react";
+import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import CardTitle from "../CardTitle";
@@ -39,19 +39,9 @@ const MetadataCard: React.FC<MetadataCardProps> = ({
   onChange,
 }) => {
   const intl = useIntl();
-  const loaded = React.useRef(false);
+  const [expanded, setExpanded] = React.useState(false);
-  const [expanded, setExpanded] = React.useState(true);
   const classes = useStyles();
 
-  useEffect(() => {
-    if (data !== undefined) {
-      loaded.current = true;
-      if (data.length > 0) {
-        setExpanded(false);
-      }
-    }
-  }, [data === undefined]);
-
   return (
     <Card
       data-test-id="metadata-editor"