From 9d0288eb5ecc3df69227cd342c8d1bdaffb0a5e8 Mon Sep 17 00:00:00 2001 From: Alyssa Wang Date: Fri, 29 Nov 2024 15:52:11 -0500 Subject: [PATCH] FI-2622: Update meta tags for link unfurling (#553) * add meta description * add custom meta tags * add twitter meta tags * update description tag * move tags to wrapper * move meta tags to separate component for consistency --- .../components/LandingPage/LandingPage.tsx | 5 +++ .../SuiteOptionsPage/SuiteOptionsPage.tsx | 17 +++++++--- .../src/components/TestSuite/TestSession.tsx | 26 +++++++-------- .../TestSuite/TestSessionWrapper.tsx | 33 ++++++++++--------- client/src/components/_common/MetaTags.tsx | 24 ++++++++++++++ dev_suites/dev_demo_ig_stu1/demo_suite.rb | 1 + lib/inferno/apps/web/index.html.erb | 16 ++++++--- 7 files changed, 84 insertions(+), 38 deletions(-) create mode 100644 client/src/components/_common/MetaTags.tsx diff --git a/client/src/components/LandingPage/LandingPage.tsx b/client/src/components/LandingPage/LandingPage.tsx index b94ee75f4..af052af8f 100644 --- a/client/src/components/LandingPage/LandingPage.tsx +++ b/client/src/components/LandingPage/LandingPage.tsx @@ -12,6 +12,7 @@ import { postTestSessions } from '~/api/TestSessionApi'; import { getStaticPath } from '~/api/infernoApiService'; import { useAppStore } from '~/store/app'; import infernoLogo from '~/images/inferno_logo.png'; +import MetaTags from '~/components/_common/MetaTags'; import SelectionPanel from '~/components/_common/SelectionPanel/SelectionPanel'; import lightTheme from '~/styles/theme'; import useStyles from './styles'; @@ -73,6 +74,10 @@ const LandingPage: FC = ({ testSuites }) => { } } > + = ({ testSuite }) => { } } > + = ({ ); }; - const renderDrawerContents = () => { - return ( - - ); - }; + const renderDrawerContents = () => ( + + ); const renderView = (view: ViewType) => { const runnable = runnableMap.get(selectedRunnable); diff --git a/client/src/components/TestSuite/TestSessionWrapper.tsx b/client/src/components/TestSuite/TestSessionWrapper.tsx index 6cd248a0b..fdabc64fe 100644 --- a/client/src/components/TestSuite/TestSessionWrapper.tsx +++ b/client/src/components/TestSuite/TestSessionWrapper.tsx @@ -1,6 +1,14 @@ import React, { FC, useEffect } from 'react'; import { useParams } from 'react-router-dom'; +import { useSnackbar } from 'notistack'; import { Alert, Box, Fade } from '@mui/material'; +import { + getCurrentTestSessionResults, + getLastTestRun, + getTestSession, + getTestSessionData, +} from '~/api/TestSessionApi'; +import { getCoreVersion } from '~/api/VersionsApi'; import { Result, SuiteOption, @@ -10,20 +18,13 @@ import { TestSession, TestSuite, } from '~/models/testSuiteModels'; +import MetaTags from '~/components/_common/MetaTags'; import AppSkeleton from '~/components/Skeletons/AppSkeleton'; import Footer from '~/components/Footer'; import FooterSkeleton from '~/components/Skeletons/FooterSkeleton'; import Header from '~/components/Header'; import HeaderSkeleton from '~/components/Skeletons/HeaderSkeleton'; import TestSessionComponent from '~/components/TestSuite/TestSession'; -import { - getCurrentTestSessionResults, - getLastTestRun, - getTestSession, - getTestSessionData, -} from '~/api/TestSessionApi'; -import { getCoreVersion } from '~/api/VersionsApi'; -import { useSnackbar } from 'notistack'; import { useAppStore } from '~/store/app'; const TestSessionWrapper: FC = () => { @@ -120,13 +121,16 @@ const TestSessionWrapper: FC = () => { setDrawerOpen(newDrawerOpen); }; - /* - * Set the page title when testSession data is loaded - */ - const setTitle = (session: TestSession) => { + /* Meta tags for link unfurling */ + const renderMetaTags = (session: TestSession) => { + // Set the page title when testSession data is loaded const suiteName = session?.test_suite.short_title || session?.test_suite.title; const titlePrepend = suiteName ? `${suiteName} ` : ''; - document.title = `${titlePrepend}Test Session`; + const title = `${titlePrepend}Test Session`; + document.title = title; + const description = + session.test_suite.short_description || session.test_suite.description || ''; + return ; }; if (testSession && testResults && sessionData) { @@ -148,11 +152,10 @@ const TestSessionWrapper: FC = () => { .filter((v) => v) // Remove empty values : []; - setTitle(testSession); - return ( + {renderMetaTags(testSession)}
= ({ title, description }) => { + // These tags are dynamic -- static tags are located in index.html.erb + return ( + <> + {title} + + + + + + + + ); +}; + +export default MetaTags; diff --git a/dev_suites/dev_demo_ig_stu1/demo_suite.rb b/dev_suites/dev_demo_ig_stu1/demo_suite.rb index f4f44635a..5e8f6b4ae 100644 --- a/dev_suites/dev_demo_ig_stu1/demo_suite.rb +++ b/dev_suites/dev_demo_ig_stu1/demo_suite.rb @@ -6,6 +6,7 @@ module DemoIG_STU1 # rubocop:disable Naming/ClassAndModuleCamelCase class DemoSuite < Inferno::TestSuite title 'Demonstration Suite' id 'demo' + short_description 'Development suite for testing standard inputs and results' source_code_url 'https://github.com/inferno-framework/inferno-core' report_issue_url 'https://github.com/inferno-framework/inferno-core/issues' download_url 'https://github.com/inferno-framework/inferno-core/releases' diff --git a/lib/inferno/apps/web/index.html.erb b/lib/inferno/apps/web/index.html.erb index 62023be5f..2baf129da 100644 --- a/lib/inferno/apps/web/index.html.erb +++ b/lib/inferno/apps/web/index.html.erb @@ -9,10 +9,18 @@ - + + + Inferno Test Session + + + + + + + + +