feat: publication for blueprint upgrade status SOFIE-2258

meteor/client/ui/Collections.tsx

@@ -44,3 +44,10 @@ export const UIPieceContentStatuses = createSyncCustomPublicationMongoCollection
 export const UIBucketContentStatuses = createSyncCustomPublicationMongoCollection(
 	CustomCollectionName.UIBucketContentStatuses
 )
+
+/**
+ * Pre-processed Blueprint Upgrade statuses
+ */
+export const UIBlueprintUpgradeStatuses = createSyncCustomPublicationMongoCollection(
+	CustomCollectionName.UIBlueprintUpgradeStatuses
+)

meteor/client/ui/Settings/Migration.tsx

@@ -12,8 +12,8 @@ import * as _ from 'underscore'
 import { EditAttribute, EditAttributeBase } from '../../lib/EditAttribute'
 import { MeteorCall } from '../../../lib/api/methods'
 import { checkForOldDataAndCleanUp } from './SystemManagement'
-import { UpgradesView } from './Upgrades'
 import { stringifyError } from '@sofie-automation/shared-lib/dist/lib/stringifyError'
+import { UpgradesView } from './Upgrades/View'
 
 interface IProps {}
 interface IState {

meteor/client/ui/Settings/ShowStyle/BlueprintConfiguration/index.tsx

@@ -8,6 +8,11 @@ import { MappingsExt } from '@sofie-automation/corelib/dist/dataModel/Studio'
 import { DBShowStyleBase, SourceLayers } from '@sofie-automation/corelib/dist/dataModel/ShowStyleBase'
 import { SelectConfigPreset } from './SelectConfigPreset'
 import { SelectBlueprint } from './SelectBlueprint'
+import { ShowStyleBaseId } from '@sofie-automation/corelib/dist/dataModel/Ids'
+import { PubSub } from '../../../../../lib/api/pubsub'
+import { useSubscription, useTracker } from '../../../../lib/ReactMeteorData/ReactMeteorData'
+import { UIBlueprintUpgradeStatuses } from '../../../Collections'
+import { getUpgradeStatusMessage, UpgradeStatusButtons } from '../../Upgrades/Components'
 
 interface ShowStyleBaseBlueprintConfigurationSettingsProps {
 	showStyleBase: DBShowStyleBase
@@ -46,6 +51,8 @@ export function ShowStyleBaseBlueprintConfigurationSettings(
 			<SelectBlueprint showStyleBase={props.showStyleBase} />
 			<SelectConfigPreset showStyleBase={props.showStyleBase} />
 
+			<BlueprintUpgradeStatus showStyleBaseId={props.showStyleBase._id} />
+
 			<BlueprintConfigSchemaSettings
 				schema={props.schema}
 				translationNamespaces={translationNamespaces}
@@ -58,3 +65,31 @@ export function ShowStyleBaseBlueprintConfigurationSettings(
 		</>
 	)
 }
+
+interface BlueprintUpgradeStatusProps {
+	showStyleBaseId: ShowStyleBaseId
+}
+
+function BlueprintUpgradeStatus({ showStyleBaseId }: BlueprintUpgradeStatusProps): JSX.Element {
+	const { t } = useTranslation()
+
+	const isReady = useSubscription(PubSub.uiBlueprintUpgradeStatuses)
+
+	const status = useTracker(
+		() =>
+			UIBlueprintUpgradeStatuses.findOne({
+				documentId: showStyleBaseId,
+				documentType: 'showStyle',
+			}),
+		[showStyleBaseId]
+	)
+
+	const statusMessage = isReady && status ? getUpgradeStatusMessage(t, status) ?? t('OK') : t('Loading...')
+
+	return (
+		<p>
+			{t('Upgrade Status')}: {statusMessage}
+			{status && <UpgradeStatusButtons upgradeResult={status} />}
+		</p>
+	)
+}

meteor/client/ui/Settings/Studio/BlueprintConfiguration/index.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useMemo } from 'react'
-import { useTracker } from '../../../../lib/ReactMeteorData/react-meteor-data'
+import { useSubscription, useTracker } from '../../../../lib/ReactMeteorData/react-meteor-data'
 import { BlueprintManifestType } from '@sofie-automation/blueprints-integration'
 import { BlueprintConfigSchemaSettings } from '../../BlueprintConfigSchema'
 import {
@@ -12,6 +12,10 @@ import { useTranslation } from 'react-i18next'
 import { DBStudio } from '@sofie-automation/corelib/dist/dataModel/Studio'
 import { SelectConfigPreset } from './SelectConfigPreset'
 import { SelectBlueprint } from './SelectBlueprint'
+import { StudioId } from '@sofie-automation/corelib/dist/dataModel/Ids'
+import { PubSub } from '../../../../../lib/api/pubsub'
+import { UIBlueprintUpgradeStatuses } from '../../../Collections'
+import { getUpgradeStatusMessage, UpgradeStatusButtons } from '../../Upgrades/Components'
 
 interface StudioBlueprintConfigurationSettingsProps {
 	studio: DBStudio
@@ -58,6 +62,8 @@ export function StudioBlueprintConfigurationSettings(props: StudioBlueprintConfi
 			<SelectBlueprint studio={props.studio} />
 			<SelectConfigPreset studio={props.studio} blueprint={blueprint} />
 
+			<BlueprintUpgradeStatus studioId={props.studio._id} />
+
 			<BlueprintConfigSchemaSettings
 				schema={configSchema}
 				translationNamespaces={translationNamespaces}
@@ -69,3 +75,31 @@ export function StudioBlueprintConfigurationSettings(props: StudioBlueprintConfi
 		</>
 	)
 }
+
+interface BlueprintUpgradeStatusProps {
+	studioId: StudioId
+}
+
+function BlueprintUpgradeStatus({ studioId }: BlueprintUpgradeStatusProps): JSX.Element {
+	const { t } = useTranslation()
+
+	const isReady = useSubscription(PubSub.uiBlueprintUpgradeStatuses)
+
+	const status = useTracker(
+		() =>
+			UIBlueprintUpgradeStatuses.findOne({
+				documentId: studioId,
+				documentType: 'studio',
+			}),
+		[studioId]
+	)
+
+	const statusMessage = isReady && status ? getUpgradeStatusMessage(t, status) ?? t('OK') : t('Loading...')
+
+	return (
+		<p>
+			{t('Upgrade Status')}: {statusMessage}
+			{status && <UpgradeStatusButtons upgradeResult={status} />}
+		</p>
+	)
+}