BAI-461 replace legacy Image in v1 docs

frontend/pages/docs/v1/developers/main-concepts/building-models.mdx

@@ -1,14 +1,11 @@
 import DocsWrapper from 'src/docs/DocsWrapper'
-import Image from 'next/legacy/image'
-import Box from '@mui/material/Box'
+import MigrationImageBehaviour from 'src/docs/MigrationImageBehaviour'
 
 import bailoFlowChartBuild from 'public/docs/bailo_flowchart_build.png'
 
 # Building Models
 
-<Box sx={{ maxWidth: '75%', margin: 'auto' }}>
-  <Image src={bailoFlowChartBuild} />
-</Box>
+<MigrationImageBehaviour src={bailoFlowChartBuild} />
 
 One of Bailo's responsibilities is turning a raw model into a packaged and productionised image for deployments. This
 process differs based on packaging method and build environment, but is always controlled by the `BuildHandler`.

frontend/pages/docs/v1/developers/main-concepts/logical-flow.mdx

@@ -1,17 +1,13 @@
 import DocsWrapper from 'src/docs/DocsWrapper'
-
-import Image from 'next/legacy/image'
-import Box from '@mui/material/Box'
+import MigrationImageBehaviour from 'src/docs/MigrationImageBehaviour'
 
 import bailoMMDiagram from 'public/mm-diagram.png'
 
 # Logical Project Flow
 
 {/* TODO: fix to use improved theme when available */}
 
-<Box sx={{ maxWidth: '75%', margin: 'auto' }} backgroundColor='whitesmoke'>
-  <Image src={bailoMMDiagram} />
-</Box>
+<MigrationImageBehaviour src={bailoMMDiagram} style={{ objectFit: 'contain', backgroundColor: 'whitesmoke' }} />
 
 1. A user accesses a URL. We use [NextJS routing](https://nextjs.org/docs/routing/introduction) to point it to a file in
    `pages`. `[xxx].tsx` files accept any route, `xxx.tsx` files allow only that specific route.

frontend/pages/docs/v1/users/approvals/index.mdx

@@ -1,6 +1,5 @@
 import DocsWrapper from 'src/docs/DocsWrapper'
-import Image from 'next/legacy/image'
-import Box from '@mui/material/Box'
+import MigrationImageBehaviour from 'src/docs/MigrationImageBehaviour'
 
 import bailoModelCompliance from 'public/docs/bailo_model_compliance.png'
 import bailoReviews from 'public/docs/bailo_reviews.png'
@@ -11,9 +10,7 @@ import bailoResetApprovals from 'public/docs/bailo_reset_approvals.png'
 When you [upload a model](../upload-a-model/why-upload-a-model) to Bailo, it does not immediately become available to
 deploy. Instead, it must first pass a series of compliance checks.
 
-<Box sx={{ maxWidth: '75%', margin: 'auto' }}>
-  <Image src={bailoModelCompliance} />
-</Box>
+<MigrationImageBehaviour src={bailoModelCompliance} />
 
 You can check the compliance state of any model by clicking on the 'Compliance' tab. Each item is coloured based on its
 current status; 'green' represents passed, 'orange' for in progress and 'red' for failed. Compliance checks are split
@@ -27,18 +24,14 @@ Manual reviews are split into two categories:
 It is expected that reviews are handled outside of Bailo, using your usual corporate tools. When the review is complete,
 the model can either be approved or declined from the [reviews](/review) page:
 
-<Box sx={{ maxWidth: '75%', margin: 'auto' }}>
-  <Image src={bailoReviews} />
-</Box>
+<MigrationImageBehaviour src={bailoReviews} />
 
 Email notifications, if configured, will be sent out when you are requested to review a model. Notifications are also
 sent out to the model owner when a model has a review either approved or declined. If a review is declined, the model
 can be updated by either editing the existing version or uploading a new version. Uploading a new version automatically
 retriggers reviews. Reviews can be re-requested at any point using the 'Reset Approvals' model action:
 
-<Box sx={{ maxWidth: '75%', margin: 'auto' }}>
-  <Image src={bailoResetApprovals} />
-</Box>
+<MigrationImageBehaviour src={bailoResetApprovals} />
 
 # Deployment Approvals
 

frontend/pages/docs/v1/users/deployments/compliance.mdx

@@ -1,16 +1,13 @@
 import DocsWrapper from 'src/docs/DocsWrapper'
-import Image from 'next/legacy/image'
-import Box from '@mui/material/Box'
+import MigrationImageBehaviour from 'src/docs/MigrationImageBehaviour'
 
 import bailoDeploymentCompliance from 'public/docs/bailo_deployment_compliance.png'
 
 # Deployment Compliance
 
 A deployment is unavailable until it has passed all compliance checks. These are outlined under the 'compliance' tab.
 
-<Box sx={{ maxWidth: '75%', margin: 'auto' }}>
-  <Image src={bailoDeploymentCompliance} />
-</Box>
+<MigrationImageBehaviour src={bailoDeploymentCompliance} />
 
 The colour of each step represents its current state:
 

frontend/pages/docs/v1/users/deployments/requesting-a-deployment.mdx

@@ -1,6 +1,5 @@
 import DocsWrapper from 'src/docs/DocsWrapper'
-import Image from 'next/legacy/image'
-import Box from '@mui/material/Box'
+import MigrationImageBehaviour from 'src/docs/MigrationImageBehaviour'
 
 import bailoRequestDeployment from 'public/docs/bailo_request_deployment.png'
 import bailoMyDeployments from 'public/docs/bailo_my_deployments.png'
@@ -10,9 +9,7 @@ import bailoMyDeployments from 'public/docs/bailo_my_deployments.png'
 A deployment is required to use a model that has been uploaded to Bailo. To request a deployment, first go to the model
 page and select 'Request deployment' from the actions menu.
 
-<Box sx={{ maxWidth: '75%', margin: 'auto' }}>
-  <Image src={bailoRequestDeployment} />
-</Box>
+<MigrationImageBehaviour src={bailoRequestDeployment} />
 
 Fill out the deployment form. This can either be done by:
 
@@ -24,8 +21,6 @@ approve a model, follow [the approvals process](../approvals/model-approvals).
 
 After your model deployment has been approved, it will automatically be made available in the 'my deployments' tab.
 
-<Box sx={{ maxWidth: '75%', margin: 'auto' }}>
-  <Image src={bailoMyDeployments} />
-</Box>
+<MigrationImageBehaviour src={bailoMyDeployments} />
 
 export default ({ children }) => <DocsWrapper>{children}</DocsWrapper>

frontend/pages/docs/v1/users/deployments/using-a-deployment/docker.mdx

@@ -1,6 +1,5 @@
 import DocsWrapper from 'src/docs/DocsWrapper'
-import Image from 'next/legacy/image'
-import Box from '@mui/material/Box'
+import MigrationImageBehaviour from 'src/docs/MigrationImageBehaviour'
 
 import bailoDockerDownloadCommands from 'public/docs/bailo_docker_download_commands.png'
 
@@ -17,9 +16,7 @@ store. This is compatible with a variety of Docker clients, including 'Kubernete
 Instructions and commands required to download and run a Docker image can be found by clicking "Show download commands"
 from the deployment page.
 
-<Box sx={{ maxWidth: '75%', margin: 'auto' }}>
-  <Image src={bailoDockerDownloadCommands} />
-</Box>
+<MigrationImageBehaviour src={bailoDockerDownloadCommands} />
 
 Within Kubernetes and OpenShift, you must first create a secret containing your docker authentication before you can
 pull images from Bailo. To do so, follow the

frontend/pages/docs/v1/users/marketplace/index.mdx

@@ -1,16 +1,13 @@
 import DocsWrapper from 'src/docs/DocsWrapper'
-import Image from 'next/legacy/image'
-import Box from '@mui/material/Box'
+import MigrationImageBehaviour from 'src/docs/MigrationImageBehaviour'
 import bailoMarketplaceIcon from 'public/docs/bailo_marketplace_icon.png'
 
 ## Marketplace
 
 The Marketplace is the default landing page when you access Bailo. You can return to it from any other location in Bailo
 by clicking the Marketplace icon:
 
-<Box sx={{ maxWidth: '75%', margin: 'auto' }}>
-  <Image src={bailoMarketplaceIcon} />
-</Box>
+<MigrationImageBehaviour src={bailoMarketplaceIcon} />
 
 Models in Bailo are viewable in the Marketplace, with a search bar in the top-right to filter the list.
 

frontend/pages/docs/v1/users/upload-a-model/upload-to-bailo.mdx

@@ -1,6 +1,5 @@
 import DocsWrapper from 'src/docs/DocsWrapper'
-import Image from 'next/legacy/image'
-import Box from '@mui/material/Box'
+import MigrationImageBehaviour from 'src/docs/MigrationImageBehaviour'
 
 import bailoUpload from 'public/docs/bailo_upload.png'
 import bailoUploadSubmission from 'public/docs/bailo_upload_submission.png'
@@ -18,25 +17,19 @@ model. There is also:
 - A 'schema' dropdown, which lets you select different model schemas to follow.
 - An 'uploading existing' tab, which lets you upload premade JSON.
 
-<Box sx={{ maxWidth: '75%', margin: 'auto' }}>
-  <Image src={bailoUpload} />
-</Box>
+<MigrationImageBehaviour src={bailoUpload} />
 
 Each tab has a state, either 'in progress' or 'done'. Once all tabs are done, you can head to the 'submission' tab and
 upload your model.
 
-<Box sx={{ maxWidth: '75%', margin: 'auto' }}>
-  <Image src={bailoUploadSubmission} />
-</Box>
+<MigrationImageBehaviour src={bailoUploadSubmission} />
 
 The submission tab enables you to export your data in both a human readable (HTML) format and a machine readable (JSON)
 format. After confirming your data is correct, you should press 'Submit' to upload your model to Bailo.
 
 After submitting your model, a progress bar will appear as the files and data are uploaded to Bailo. Upon completion,
 you will be redirected to your model:
 
-<Box sx={{ maxWidth: '75%', margin: 'auto' }}>
-  <Image src={bailoModelPage} />
-</Box>
+<MigrationImageBehaviour src={bailoModelPage} />
 
 export default ({ children }) => <DocsWrapper>{children}</DocsWrapper>

frontend/src/docs/MigrationImageBehaviour.tsx

@@ -2,12 +2,15 @@
 //paddingBottom is controlled by a width to height ratio
 
 import Image from 'next/image'
+import { CSSProperties } from 'react'
 
 export function imageLoader({ src }: { src: string }) {
   return src
 }
 
-function ResponsiveImage({ src, scaling = 50, alt }) {
+const css: CSSProperties = { objectFit: 'contain' }
+
+function ResponsiveImage({ src, scaling = 50, alt, style = css }) {
   return (
     <div
       style={{
@@ -18,7 +21,7 @@ function ResponsiveImage({ src, scaling = 50, alt }) {
         paddingBottom: `max(350px, ${scaling}%)`,
       }}
     >
-      <Image loader={imageLoader} className='next-image' src={src} fill style={{ objectFit: 'contain' }} alt={alt} />
+      <Image loader={imageLoader} className='next-image' src={src} fill style={style} alt={alt} />
     </div>
   )
 }