Merge branch 'main' into feature/III-6977-notification-publication-delay

Author: alduya

src/hooks/useFeatureFlag.ts

@@ -17,6 +17,7 @@ const FeatureFlags = {
   REACT_DUPLICATE: 'react_duplicate',
   REACT_LABELS_CREATE_EDIT: 'react_labels_create_edit',
   SHOW_CONSOLE_DEBUGGING: 'show_console_debugging',
+  SHOW_IFRAME_BORDER: 'show_iframe_border',
   REACT_ROLES_OVERVIEW: 'react_roles_overview',
   REACT_ROLES_CREATE_EDIT: 'react_roles_create_edit',
   REACT_USERS_SEARCH: 'react_users_search',

src/pages/[...params].page.js

@@ -3,6 +3,7 @@ import { useRouter } from 'next/router';
 import PropTypes from 'prop-types';
 import { memo, useState } from 'react';
 
+import { FeatureFlags, useFeatureFlag } from '@/hooks/useFeatureFlag';
 import {
   useHandleWindowMessage,
   WindowMessageTypes,
@@ -16,26 +17,31 @@ import { getApplicationServerSideProps } from '@/utils/getApplicationServerSideP
 const prefixWhenNotEmpty = (value, prefix) =>
   value ? `${prefix}${value}` : value;
 
-const IFrame = memo(({ url }) => (
+const IFrame = memo(({ url, showBorder }) => (
   <Box
     id="fallback_frame"
     as="iframe"
     src={url}
     width="100%"
-    height="100vh"
     flex={1}
+    css={`
+      ${showBorder ? 'border: 2px solid red;' : ''}
+      height: 100vh;
+    `}
   />
 ));
 
 IFrame.displayName = 'IFrame';
 
 IFrame.propTypes = {
   url: PropTypes.string,
+  showBorder: PropTypes.bool,
 };
 
 const Fallback = () => {
   const router = useRouter();
   const { publicRuntimeConfig } = getConfig();
+  const [showBorder] = useFeatureFlag(FeatureFlags.SHOW_IFRAME_BORDER);
 
   // Keep track of which paths were not found. Do not store as a single boolean
   // for the current path, because it's possible to navigate from a 404 path to
@@ -61,7 +67,7 @@ const Fallback = () => {
   // and then the 404 logic does not get triggered because the listener is too
   // late to get the message from the AngularJS app.
   if (isClientSide) {
-    return <IFrame url={legacyPath} />;
+    return <IFrame url={legacyPath} showBorder={showBorder} />;
   }
 
   return null;

src/pages/search/index.page.tsx

@@ -4,6 +4,7 @@ import { useState } from 'react';
 import { TabContent } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
 
+import { FeatureFlags, useFeatureFlag } from '@/hooks/useFeatureFlag';
 import {
   useHandleWindowMessage,
   WindowMessageTypes,
@@ -28,6 +29,7 @@ const Search = () => {
   const isClientSide = useIsClient();
   const { publicRuntimeConfig } = getConfig();
   const isOwnershipEnabled = publicRuntimeConfig.ownershipEnabled === 'true';
+  const [showBorder] = useFeatureFlag(FeatureFlags.SHOW_IFRAME_BORDER);
 
   const handleSelectTab = async (tabKey: Scope) =>
     router.push(
@@ -54,6 +56,7 @@ const Search = () => {
           width="100%"
           css={`
             overflow-y: auto;
+            ${showBorder ? 'border: 2px solid red;' : ''}
           `}
         >
           {isOwnershipEnabled && (