feat: use new Forma 36 Layout component [UFO-1876] (#9971)

Author: veu

apps/graphql-playground-v2/package-lock.json

@@ -5,8 +5,8 @@
   "dependencies": {
     "@contentful/app-sdk": "^4.23.1",
     "@contentful/f36-components": "^4.54.0",
+    "@contentful/f36-layout": "5.0.0-alpha.18",
     "@contentful/f36-tokens": "^4.0.2",
-    "@contentful/f36-workbench": "^4.21.0",
     "@contentful/react-apps-toolkit": "^1.2.16",
     "@emotion/css": "^11.13.4",
     "@graphiql/toolkit": "^0.10.0",

apps/graphql-playground-v2/package.json

@@ -6,9 +6,9 @@ import 'graphiql/graphiql.min.css';
 import { Box } from '@contentful/f36-components';
 import { css } from '@emotion/css';
 
-//TODO:  make it 100% height :)
 const style = css({
   height: '800px',
+  minHeight: '100vh',
 });
 
 type Props = {

apps/graphql-playground-v2/src/components/GraphiqlView.tsx

@@ -1,14 +1,22 @@
 import React, { useState } from 'react';
 import { PageAppSDK } from '@contentful/app-sdk';
+import { css } from '@emotion/css';
 import { GraphiqlView } from './GraphiqlView';
-import { Workbench } from '@contentful/f36-workbench';
 import { useQuery } from '@tanstack/react-query';
-import { Card, Modal, ModalContent, Note } from '@contentful/f36-components';
+import { Card, GlobalStyles, Modal, ModalContent, Note } from '@contentful/f36-components';
+import { Layout } from '@contentful/f36-layout';
 
 interface PageProps {
   sdk: PageAppSDK;
 }
 
+export const styles = {
+  body: css({
+    // emotion version mismatch between this app and F36 requires this override
+    padding: '0 !important',
+  }),
+};
+
 const Page = (props: PageProps) => {
   const { sdk } = props;
   const { parameters } = sdk;
@@ -37,20 +45,19 @@ const Page = (props: PageProps) => {
   });
 
   return cpaToken ? (
-    <Workbench>
-      <Workbench.Content type={'full'}>
+    <Layout variant="fullscreen" offsetTop={0}>
+      <Layout.Body className={styles.body}>
         <GraphiqlView
           spaceId={spaceId}
           environmentId={spaceEnvironmentAlias || spaceEnvironment}
           cpaToken={cpaToken}
           graphqlHost={sdk.hostnames.graphql}
         />
-
         <Modal isShown={isModelOpen} onClose={() => setModelOpen(false)}>
           <ModalContent>Go Vikas</ModalContent>
         </Modal>
-      </Workbench.Content>
-    </Workbench>
+      </Layout.Body>
+    </Layout>
   ) : (
     <Card style={{ margin: '1em' }}>
       <Note variant="warning">