BAI-461 Update next/legacy/image to next/image

.github/workflows/web.yml

@@ -47,7 +47,7 @@ jobs:
         run: |
           make html
       - name: Upload artifact
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-pages-artifact@v1
         with:
           name: python-docs
           path: ./backend/docs/python-docs/html

frontend/pages/docs/administration/schemas/upload-a-schema.mdx

@@ -1,7 +1,6 @@
 import DocsWrapper from 'src/docs/DocsWrapper'
-import Image from 'next/legacy/image'
+import MigrationImageBehaviour from 'src/docs/MigrationImageBehaviour'
 import Box from '@mui/material/Box'
-
 import bailoResetApprovals from '../../../../public/docs/bailo_upload_new_schema.png'
 
 ## Upload a Schema
@@ -13,9 +12,7 @@ production system.
 To add a new schema, visit [/schemas/list](/schemas/list) on a Bailo instance. To manage schemas you will need to hold
 the 'admin' role on the Bailo instance. Click the 'Upload a new Schema' button in the top left.
 
-<Box sx={{ maxWidth: '75%', margin: 'auto' }}>
-  <Image src={bailoResetApprovals} />
-</Box>
+<MigrationImageBehaviour src={bailoResetApprovals} />
 
 This will bring up a form to create a new schema. A description of each field is below:
 

frontend/pages/docs/users/managing-models-and-releases/upload-to-bailo/completing-the-model.mdx

@@ -1,4 +1,4 @@
-import Image from 'next/legacy/image'
+import MigrationImageBehaviour from 'src/docs/MigrationImageBehaviour'
 import Box from '@mui/material/Box'
 import bailoModelAccess from 'public/docs/bailo_model_access.png'
 import DocsWrapper from 'src/docs/DocsWrapper'
@@ -12,8 +12,6 @@ Select **_*Model Access*_** in the side menu.
 Here you can select, from the **_*select roles*_** drop down menu, the roles that you want to review your model for
 approval.
 
-<Box sx={{ maxWidth: '75%', margin: 'auto' }}>
-  <Image src={bailoModelAccess} />
-</Box>
+<MigrationImageBehaviour src={bailoModelAccess} />
 
 export default ({ children }) => <DocsWrapper>{children}</DocsWrapper>

frontend/pages/docs/users/managing-models-and-releases/upload-to-bailo/create-a-release.mdx

@@ -1,4 +1,4 @@
-import Image from 'next/legacy/image'
+import MigrationImageBehaviour from 'src/docs/MigrationImageBehaviour'
 import Box from '@mui/material/Box'
 import bailoNewRelease from 'public/docs/bailo_new_release.png'
 import bailoNewReleaseForm from 'public/docs/bailo_new_release_form.png'
@@ -8,16 +8,12 @@ import DocsWrapper from 'src/docs/DocsWrapper'
 
 Once you have uploaded a model, go to the **_Releases_** tab, and click on **_Draft new Release_**.
 
-<Box sx={{ maxWidth: '75%', margin: 'auto' }}>
-  <Image src={bailoNewRelease} />
-</Box>
+<MigrationImageBehaviour src={bailoNewRelease} />
 
 This will bring up a small form that will require you to choose a semver, add release notes and gives you the option of
 uploading files and images.
 
-<Box sx={{ maxWidth: '75%', margin: 'auto' }}>
-  <Image src={bailoNewReleaseForm} />
-</Box>
+<MigrationImageBehaviour src={bailoNewReleaseForm} scaling={80} />
 
 Once the form is filled out, click on **_Create Release_** to submit all details.
 

frontend/pages/docs/users/managing-models-and-releases/upload-to-bailo/creating-a-model.mdx

@@ -1,4 +1,4 @@
-import Image from 'next/legacy/image'
+import Image from 'next/image'
 import Box from '@mui/material/Box'
 import bailoMarketIcon from 'public/docs/bailo_market_icon.png'
 import DocsWrapper from 'src/docs/DocsWrapper'
@@ -7,8 +7,8 @@ import DocsWrapper from 'src/docs/DocsWrapper'
 
 The models added to Bailo are displayed in the Bailo Marketplace.
 
-<Box sx={{ maxWidth: '75%', margin: 'auto' }}>
-  <Image src={bailoMarketIcon} />
+<Box sx={{ margin: 'auto' }}>
+  <Image src={bailoMarketIcon} height={550} />
 </Box>
 
 This enables the models to be discoverable to other users. There is an exception to this, where the models are marked as

frontend/pages/docs/users/managing-models-and-releases/upload-to-bailo/files.mdx

@@ -1,6 +1,6 @@
 import DocsWrapper from 'src/docs/DocsWrapper'
 import Box from '@mui/material/Box'
-import Image from 'next/legacy/image'
+import Image from 'next/image'
 
 import bailoUploadFile from 'public/docs/bailo_upload_new_release_file.png'
 import bailoUploadedFile from 'public/docs/bailo_created_release_upload_file.png'

frontend/pages/docs/users/managing-models-and-releases/upload-to-bailo/images.mdx

@@ -1,7 +1,6 @@
 import DocsWrapper from 'src/docs/DocsWrapper'
 import Box from '@mui/material/Box'
-import Image from 'next/legacy/image'
-
+import MigrationImageBehaviour from 'src/docs/MigrationImageBehaviour'
 import bailoPushImage from 'public/docs/bailo_push_image_to_docker_container.png'
 import bailoImageRelease from 'public/docs/bailo_add_image_to_release.png'
 
@@ -14,17 +13,13 @@ upload them to a model and then add them to a release.
 
 You can push a model to Bailo by following the instructions in the registry tab of your model.
 
-<Box sx={{ maxWidth: '75%', margin: 'auto' }}>
-  <Image src={bailoPushImage} />
-</Box>
+<MigrationImageBehaviour src={bailoPushImage} />
 
 ## Adding an image to a release
 
 Once your image has been pushed to Bailo's registry you can now add it to one of your releases.
 
-<Box sx={{ maxWidth: '75%', margin: 'auto' }}>
-  <Image src={bailoImageRelease} />
-</Box>
+<MigrationImageBehaviour src={bailoImageRelease} />
 
 ## What is a docker container?
 

frontend/pages/docs/users/programmatically-using-bailo/authentication.mdx

@@ -1,7 +1,6 @@
 import DocsWrapper from 'src/docs/DocsWrapper'
 import Box from '@mui/material/Box'
-import Image from 'next/legacy/image'
-
+import MigrationImageBehaviour from 'src/docs/MigrationImageBehaviour'
 import bailoSettingsAuth from 'public/docs/bailo_settings_authentication.png'
 import tokens from 'public/docs/bailo_tokens.png'
 
@@ -28,9 +27,7 @@ If you are not using PKI then Bailo allows the usage of access tokens to allow f
 to grant access to models within Bailo to specific models and specific actions. These can be found in
 `Settings > Authentication`.
 
-<Box sx={{ maxWidth: '75%', margin: 'auto' }}>
-  <Image src={bailoSettingsAuth} />
-</Box>
+<MigrationImageBehaviour src={bailoSettingsAuth} alt='Bailo Settings Authentication' />
 
 To create a new access token, press `Add token` and select the options from below.
 
@@ -39,9 +36,7 @@ To create a new access token, press `Add token` and select the options from belo
 
 Copy and paste the `Access key` and `Secret Key` and store these safely.
 
-<Box sx={{ maxWidth: '75%', margin: 'auto' }}>
-  <Image src={tokens} />
-</Box>
+<MigrationImageBehaviour src={tokens} />
 
 The Python Client allows support for using access tokens. Instead of using the default `Agent` class you can use The
 `TokenAgent` class. The client works in the same way as before but will authenticate using access tokens.

frontend/pages/docs/users/programmatically-using-bailo/open-api.mdx

@@ -1,16 +1,14 @@
 import DocsWrapper from 'src/docs/DocsWrapper'
 import Box from '@mui/material/Box'
-import Image from 'next/legacy/image'
+import MigrationImageBehaviour from 'src/docs/MigrationImageBehaviour'
 
 import bailoSwaggerDocs from 'public/docs/bailo_swagger_docs.png'
 
 # Open API Docs
 
 Bailo provides an Open API Specification for all Bailo endpoints [here](/docs/api).
 
-<Box sx={{ maxWidth: '75%', margin: 'auto' }}>
-  <Image src={bailoSwaggerDocs} />
-</Box>
+<MigrationImageBehaviour src={bailoSwaggerDocs} />
 
 Full Documentation on using the UI can be found [here](https://swagger.io/tools/swagger-ui/).
 

frontend/pages/docs/users/reviews/reviewing/access.mdx

@@ -1,4 +1,4 @@
-import Image from 'next/legacy/image'
+import MigrationImageBehaviour from 'src/docs/MigrationImageBehaviour'
 import Box from '@mui/material/Box'
 import bailoAccessRequest from 'public/docs/bailo_access_request.png'
 import DocsWrapper from 'src/docs/DocsWrapper'
@@ -9,8 +9,6 @@ The process of reviewing an access request is the same as reviewing a release ex
 been created, will be in the **_Access Request Reviews_** tab in the **_Review page_**. Access requests can only be
 approved by the **_Model Senior Responsible Officer_**.
 
-<Box sx={{ maxWidth: '75%', margin: 'auto' }}>
-  <Image src={bailoAccessRequest} />
-</Box>
+<MigrationImageBehaviour src={bailoAccessRequest} />
 
 export default ({ children }) => <DocsWrapper>{children}</DocsWrapper>

frontend/pages/docs/users/reviews/reviewing/releases.mdx

@@ -1,4 +1,4 @@
-import Image from 'next/legacy/image'
+import MigrationImageBehaviour from 'src/docs/MigrationImageBehaviour'
 import Box from '@mui/material/Box'
 import bailoReviewPage from 'public/docs/bailo_review_page.png'
 import bailoReview from 'public/docs/bailo_review.png'
@@ -10,22 +10,16 @@ import DocsWrapper from 'src/docs/DocsWrapper'
 When reviewing a release, there will be a message in the **_Release Reviews_** tab, on the **_Review_** page, that will
 state who needs to review the release.
 
-<Box sx={{ maxWidth: '75%', margin: 'auto' }}>
-  <Image src={bailoReviewPage} />
-</Box>
+<MigrationImageBehaviour src={bailoReviewPage} />
 
 Click on the release that applies to your role and this will take you to the **_Releases_** page. On the banner there is
 a **_REVIEW_** button, where you can start your review.
 
-<Box sx={{ maxWidth: '75%', margin: 'auto' }}>
-  <Image src={bailoReview} />
-</Box>
+<MigrationImageBehaviour src={bailoReview} />
 
 You have the option of approving or requesting changes.
 
-<Box sx={{ maxWidth: '75%', margin: 'auto' }}>
-  <Image src={bailoReviewForm} />
-</Box>
+<MigrationImageBehaviour src={bailoReviewForm} />
 
 When you have made your decision, an email will be sent to the owner to notify them of your response.
 

frontend/pages/docs/users/using-a-model/downloading-files.mdx

@@ -1,5 +1,5 @@
 import DocsWrapper from 'src/docs/DocsWrapper'
-import Image from 'next/legacy/image'
+import MigrationImageBehaviour from 'src/docs/MigrationImageBehaviour'
 import Box from '@mui/material/Box'
 
 import releases from 'public/docs/bailo_releases.png'
@@ -10,14 +10,10 @@ import release from 'public/docs/bailo_release.png'
 Files are attached to model releases. You can download files from a release in one of two ways - by either finding the
 release in the `Releases` tab and clicking the file download link:
 
-<Box sx={{ maxWidth: '75%', margin: 'auto' }}>
-  <Image src={releases} />
-</Box>
+<MigrationImageBehaviour src={releases} />
 
 or alternatively, visiting the page for a specific release and clicking the file download link:
 
-<Box sx={{ maxWidth: '75%', margin: 'auto' }}>
-  <Image src={release} />
-</Box>
+<MigrationImageBehaviour src={release} />
 
 export default ({ children }) => <DocsWrapper>{children}</DocsWrapper>

frontend/pages/docs/users/using-a-model/personal-access-tokens.mdx

@@ -1,5 +1,5 @@
 import DocsWrapper from 'src/docs/DocsWrapper'
-import Image from 'next/legacy/image'
+import MigrationImageBehaviour from 'src/docs/MigrationImageBehaviour'
 import Box from '@mui/material/Box'
 
 import personalAccessTokens from 'public/docs/bailo_personal_access_tokens.png'
@@ -15,14 +15,10 @@ be asked to specify which models the token can be used with and which actions th
 Visit the personal access tokens page. From here you can click the `Add Token` button to create a new personal access
 token:
 
-<Box sx={{ maxWidth: '75%', margin: 'auto' }}>
-  <Image src={personalAccessTokens} />
-</Box>
+<MigrationImageBehaviour src={personalAccessTokens} scaling={60} />
 
 Finally, fill out the form and click `Generate Token`:
 
-<Box sx={{ maxWidth: '75%', margin: 'auto' }}>
-  <Image src={createPersonalAccessToken} />
-</Box>
+<MigrationImageBehaviour src={createPersonalAccessToken} scaling={60} />
 
 export default ({ children }) => <DocsWrapper>{children}</DocsWrapper>

frontend/pages/docs/users/using-a-model/requesting-access.mdx

@@ -1,5 +1,5 @@
 import DocsWrapper from 'src/docs/DocsWrapper'
-import Image from 'next/legacy/image'
+import MigrationImageBehaviour from 'src/docs/MigrationImageBehaviour'
 import Box from '@mui/material/Box'
 
 import modelOverview from 'public/docs/bailo_model_overview.png'
@@ -15,21 +15,15 @@ authorise and keep tracking of anyone who wants to request access.
 
 Visit the model overview page. From here you can click the "Request Access" button to create a new access request:
 
-<Box sx={{ maxWidth: '75%', margin: 'auto' }}>
-  <Image src={modelOverview} />
-</Box>
+<MigrationImageBehaviour src={modelOverview} />
 
 Much like creating a model, access requests forms require a schema, this can be selected like so:
 
-<Box sx={{ maxWidth: '75%', margin: 'auto' }}>
-  <Image src={selectAccessRequestSchema} />
-</Box>
+<MigrationImageBehaviour src={selectAccessRequestSchema} />
 
 Finally, fill out the form and submit your access request:
 
-<Box sx={{ maxWidth: '75%', margin: 'auto' }}>
-  <Image src={createAccessRequest} />
-</Box>
+<MigrationImageBehaviour src={createAccessRequest} />
 
 ## Review Process
 

frontend/pages/docs/users/using-a-model/using-a-pushed-docker-image.mdx

@@ -1,5 +1,5 @@
 import DocsWrapper from 'src/docs/DocsWrapper'
-import Image from 'next/legacy/image'
+import MigrationImageBehaviour from 'src/docs/MigrationImageBehaviour'
 
 import pushingAnImage from '../../../../public/docs/Pushing-an-image.png'
 import registryTab from '../../../../public/docs/Registry-tab.png'
@@ -14,7 +14,7 @@ Images can be pushed to the Docker registry attached to the hosted Bailo environ
 specific models so that they can be attached to releases. The steps on doing this will be detailed below, but can also
 be found inside the UI on the registry of a model.
 
-<Image src={registryTab} />
+<MigrationImageBehaviour src={registryTab} />
 
 Clicking on the "Push Image" button will display a dialog window that will make the process easier, but essentially the
 process is:
@@ -32,14 +32,14 @@ Once you have pushed a Docker image to the registry it will be made available fo
 the image has been assigned to the model using the steps in the previous page, all you need to do is select the image
 using the drop down on the release creating page like so:
 
-<Image src={selectingAnImage} />
+<MigrationImageBehaviour src={selectingAnImage} />
 
 ## Accessing an image
 
 When an image is attached to a release, you will see them listed as part of the release display in the `Releases` tab on
 the model page like so:
 
-<Image src={ModelReleaseImageList} />
+<MigrationImageBehaviour src={ModelReleaseImageList} />
 
 These paths can be copied for use in the following command:
 

frontend/src/common/EmptyBlob.tsx

@@ -1,15 +1,17 @@
 import { Stack } from '@mui/material'
 import Typography from '@mui/material/Typography'
-import Image from 'next/legacy/image'
+import Image from 'next/image'
 
 type EmptyBlobProps = {
   text: string
 }
 
 export default function EmptyBlob({ text }: EmptyBlobProps) {
+  const css = { maxWidth: '100%', height: 'auto' }
+
   return (
     <Stack spacing={1} alignItems='center'>
-      <Image src='/emptyBlob.svg' alt='Empty blob' width={120} height={120} data-test='emptyBlobImage' />
+      <Image src='/emptyBlob.svg' alt='Empty blob' width={120} height={120} data-test='emptyBlobImage' style={css} />
       <Typography color='text.secondary'>{text}</Typography>
     </Stack>
   )

frontend/src/docs/MigrationImageBehaviour.tsx

@@ -0,0 +1,26 @@
+//Script to migrate from next/legacy/image to next/image
+//paddingBottom is controlled by a width to height ratio
+
+import Image from 'next/image'
+
+export function imageLoader({ src }: { src: string }) {
+  return src
+}
+
+function ResponsiveImage({ src, scaling = 50, alt }) {
+  return (
+    <div
+      style={{
+        position: 'relative',
+        width: 'auto',
+        height: 'auto',
+        marginLeft: 'auto',
+        paddingBottom: `max(350px, ${scaling}%)`,
+      }}
+    >
+      <Image loader={imageLoader} className='next-image' src={src} layout='fill' objectFit='contain' alt={alt} />
+    </div>
+  )
+}
+
+export default ResponsiveImage

lib/landing/scripts/generate.js

@@ -40,6 +40,14 @@ function alterFile(path) {
     `),
   )
 
+  content = content.replaceAll(
+    `import Image from 'next/image'`,
+    dedent(`
+      import Image from 'next/image'
+      import imageLoader from 'src/imageLoader'
+    `),
+  )
+
   writeFileSync(path, content)
 }