check if porter operator in component rather than outside (#4399)

dashboard/src/components/porter/PorterOperatorComponent.tsx

@@ -1,8 +1,9 @@
-import React from "react";
+import React, { useContext } from "react";
 import styled from "styled-components";
 
 import Text from "components/porter/Text";
 
+import { Context } from "shared/Context";
 import info from "assets/information-circle-contained.svg";
 
 import Container from "./Container";
@@ -13,6 +14,11 @@ type Props = {
   children: JSX.Element;
 };
 const PorterOperatorComponent: React.FC<Props> = ({ children }) => {
+  const { user } = useContext(Context);
+
+  if (!user?.email?.endsWith("@porter.run")) {
+    return null;
+  }
   return (
     <StyledContainer>
       <Container row>

dashboard/src/main/home/infrastructure-dashboard/modals/PreflightChecksModal.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from "react";
+import React from "react";
 import styled from "styled-components";
 import { match } from "ts-pattern";
 
@@ -15,8 +15,6 @@ import StatusDot from "components/porter/StatusDot";
 import Text from "components/porter/Text";
 import { type ClientPreflightCheck } from "lib/clusters/types";
 
-import { Context } from "shared/Context";
-
 import { useClusterFormContext } from "../ClusterFormContextProvider";
 import ResolutionStepsModalContents from "./help/preflight/ResolutionStepsModalContents";
 
@@ -89,7 +87,6 @@ const PreflightChecksModal: React.FC<Props> = ({
   onClose,
   preflightChecks,
 }) => {
-  const { user } = useContext(Context);
   const { submitSkippingPreflightChecks } = useClusterFormContext();
 
   return (
@@ -119,18 +116,16 @@ const PreflightChecksModal: React.FC<Props> = ({
           >
             Talk to support
           </ShowIntercomButton>
-          {user.email?.endsWith("@porter.run") && (
-            <PorterOperatorComponent>
-              <Button
-                onClick={async () => {
-                  await submitSkippingPreflightChecks();
-                }}
-                color="red"
-              >
-                Skip preflight checks
-              </Button>
-            </PorterOperatorComponent>
-          )}
+          <PorterOperatorComponent>
+            <Button
+              onClick={async () => {
+                await submitSkippingPreflightChecks();
+              }}
+              color="red"
+            >
+              Skip preflight checks
+            </Button>
+          </PorterOperatorComponent>
         </Container>
       </AppearingDiv>
     </Modal>