move layout components to @app/client

Moves <SharedLayout /> and everything that depends on it to the
@app/client tree. Rationale: <SharedLayout /> needs to read
process.env.T_AND_C_URL, which is a detail of the build that
@app/components shouldn't know about.

When environment variable injection changes with Turbopack, we'll want
to limit the blast radius.

The other option was passing termsAndConditionsUrl as a prop from
@app/client into <SharedLayout /> everywhere we render it. But these
layout components aren't logically reusable outside of their new
locations in pages/ anyway, so it makes more sense to relocate them.

unblocks turbopack

Author: AprilArcus

@app/components/src/Redirect.tsx @app/client/src/pages/Redirect.tsx@app/components/src/Redirect.tsx renamed to @app/client/src/pages/Redirect.tsx

@@ -1,11 +1,10 @@
 import { NetworkStatus, useApolloClient } from "@apollo/client";
+import { H3, StandardWidth } from "@app/components";
 import { Skeleton } from "antd";
 import Router from "next/router";
 import React, { useEffect } from "react";
 
 import { SharedLayout } from "./SharedLayout";
-import { StandardWidth } from "./StandardWidth";
-import { H3 } from "./Text";
 
 export interface RedirectProps {
   href: string;

@app/components/src/SharedLayout.tsx @app/client/src/pages/SharedLayout.tsx@app/components/src/SharedLayout.tsx renamed to @app/client/src/pages/SharedLayout.tsx

@@ -4,6 +4,7 @@ import {
   type QueryResult,
   useApolloClient,
 } from "@apollo/client";
+import { ErrorAlert, H3, StandardWidth, Warn } from "@app/components";
 import { companyName, projectName } from "@app/config";
 import {
   type SharedLayout_QueryFragment,
@@ -18,22 +19,10 @@ import Router, { useRouter } from "next/router";
 import * as React from "react";
 import { useCallback } from "react";
 
-import { ErrorAlert, H3, StandardWidth, Warn } from ".";
 import { Redirect } from "./Redirect";
 
 const { Header, Content, Footer } = Layout;
 const { Text } = Typography;
-/*
- * For some reason, possibly related to the interaction between
- * `babel-plugin-import` and https://github.com/babel/babel/pull/9766, we can't
- * directly export these values, but if we reference them and re-export then we
- * can.
- *
- * TODO: change back to `export { Row, Col, Link }` when this issue is fixed.
- */
-const _babelHackRow = Row;
-const _babelHackCol = Col;
-export { _babelHackCol as Col, Link, _babelHackRow as Row };
 
 export const contentMinHeight = "calc(100vh - 64px - 70px)";
 

@app/client/src/pages/_error.tsx

@@ -1,16 +1,12 @@
-import {
-  ErrorOccurred,
-  FourOhFour,
-  H2,
-  P,
-  SharedLayout,
-} from "@app/components";
+import { ErrorOccurred, FourOhFour, H2, P } from "@app/components";
 import { useSharedQuery } from "@app/graphql";
 import { Alert, Col, Row } from "antd";
 import { type NextPage } from "next";
 import Link from "next/link";
 import * as React from "react";
 
+import { SharedLayout } from "./SharedLayout";
+
 const isDev = process.env.NODE_ENV !== "production";
 
 interface SocialAuthErrorProps {

@app/client/src/pages/create-organization/index.tsx

@@ -1,6 +1,5 @@
 import { PageHeader } from "@ant-design/pro-layout";
 import { type ApolloError } from "@apollo/client";
-import { AuthRestrict, Redirect, SharedLayout } from "@app/components";
 import {
   type CreatedOrganizationFragment,
   useCreateOrganizationMutation,
@@ -20,6 +19,9 @@ import { type Store } from "rc-field-form/lib/interface";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import slugify from "slugify";
 
+import { Redirect } from "../Redirect";
+import { AuthRestrict, SharedLayout } from "../SharedLayout";
+
 const { useForm } = Form;
 const { Text } = Typography;
 

@app/client/src/pages/forgot.tsx

@@ -1,6 +1,5 @@
 import { UserOutlined } from "@ant-design/icons";
 import { type ApolloError } from "@apollo/client";
-import { AuthRestrict, SharedLayout } from "@app/components";
 import { useForgotPasswordMutation, useSharedQuery } from "@app/graphql";
 import { extractError, getCodeFromError } from "@app/lib";
 import { Alert, Button, Form, Input, type InputRef } from "antd";
@@ -9,6 +8,8 @@ import Link from "next/link";
 import { type Store } from "rc-field-form/lib/interface";
 import React, { useCallback, useEffect, useRef, useState } from "react";
 
+import { AuthRestrict, SharedLayout } from "./SharedLayout";
+
 const { useForm } = Form;
 
 const ForgotPassword: NextPage = () => {

@app/client/src/pages/index.tsx

@@ -1,10 +1,11 @@
 import { Button, Col, Divider, Row, Typography } from "antd";
 import * as React from "react";
 const { Text, Title, Paragraph } = Typography;
-import { SharedLayout } from "@app/components";
 import { useSharedQuery } from "@app/graphql";
 import { type NextPage } from "next";
 
+import { SharedLayout } from "./SharedLayout";
+
 // Convenience helper
 const Li = ({ children, ...props }: any) => (
   <li {...props}>

@app/client/src/pages/invitations/accept.tsx

@@ -1,12 +1,5 @@
 import { type QueryResult } from "@apollo/client";
-import {
-  AuthRestrict,
-  ButtonLink,
-  ErrorAlert,
-  Redirect,
-  SharedLayout,
-  SpinPadded,
-} from "@app/components";
+import { ButtonLink, ErrorAlert, SpinPadded } from "@app/components";
 import {
   type InvitationDetailQuery,
   type InvitationDetailQueryVariables,
@@ -21,6 +14,9 @@ import Router, { type NextRouter, useRouter } from "next/router";
 import * as qs from "querystring";
 import React, { type FC } from "react";
 
+import { Redirect } from "../Redirect";
+import { AuthRestrict, SharedLayout } from "../SharedLayout";
+
 interface IProps {
   id: string | null;
   code: string | null;

@app/client/src/pages/login.tsx

@@ -1,13 +1,10 @@
 import { LockOutlined, UserAddOutlined, UserOutlined } from "@ant-design/icons";
 import { type ApolloError, useApolloClient } from "@apollo/client";
 import {
-  AuthRestrict,
   ButtonLink,
   Col,
   Redirect,
   Row,
-  SharedLayout,
-  type SharedLayoutChildProps,
   SocialLoginOptions,
 } from "@app/components";
 import { useLoginMutation, useSharedQuery } from "@app/graphql";
@@ -23,6 +20,12 @@ import Router from "next/router";
 import { type Store } from "rc-field-form/lib/interface";
 import React, { useCallback, useEffect, useRef, useState } from "react";
 
+import {
+  AuthRestrict,
+  SharedLayout,
+  type SharedLayoutChildProps,
+} from "./SharedLayout";
+
 interface LoginProps {
   next: string | null;
 }

@app/client/src/pages/o/[slug]/index.tsx

@@ -1,7 +1,6 @@
 import { PageHeader } from "@ant-design/pro-layout";
 import {
   ButtonLink,
-  SharedLayout,
   useOrganizationLoading,
   useOrganizationSlug,
 } from "@app/components";
@@ -13,6 +12,8 @@ import { Col, Empty, Row } from "antd";
 import { type NextPage } from "next";
 import React, { type FC } from "react";
 
+import { SharedLayout } from "../../SharedLayout";
+
 const OrganizationPage: NextPage = () => {
   const slug = useOrganizationSlug();
   const query = useOrganizationPageQuery({ variables: { slug } });

…nents/src/OrganizationSettingsLayout.tsx …/settings/OrganizationSettingsLayout.tsx@app/components/src/OrganizationSettingsLayout.tsx renamed to @app/client/src/pages/o/[slug]/settings/OrganizationSettingsLayout.tsx @app/components/src/OrganizationSettingsLayout.tsx renamed to @app/client/src/pages/o/[slug]/settings/OrganizationSettingsLayout.tsx

@@ -1,10 +1,10 @@
+import { StandardWidth } from "@app/components";
 import { type OrganizationPage_OrganizationFragment } from "@app/graphql";
 import { Layout, Menu, Typography } from "antd";
 import Link from "next/link";
 import React, { useMemo } from "react";
 
-import { contentMinHeight } from "./SharedLayout";
-import { StandardWidth } from "./StandardWidth";
+import { contentMinHeight } from "../../../SharedLayout";
 
 type TextProps = React.ComponentProps<typeof Typography.Text>;
 const { Text } = Typography;