diff --git a/.changeset/curvy-rabbits-arrive.md b/.changeset/curvy-rabbits-arrive.md new file mode 100644 index 000000000..0f08b72b5 --- /dev/null +++ b/.changeset/curvy-rabbits-arrive.md @@ -0,0 +1,5 @@ +--- +'@orchestrator-ui/orchestrator-ui-components': minor +--- + +Refactor WfoSubscriptionGeneral, use WfoSubscriptionDetailSection in forms diff --git a/apps/wfo-ui b/apps/wfo-ui index cb71397c9..0246f0f78 160000 --- a/apps/wfo-ui +++ b/apps/wfo-ui @@ -1 +1 @@ -Subproject commit cb71397c9fd7d654397dafe521bc249d88a3e434 +Subproject commit 0246f0f78f7a58741868714a32ed9432582204ff diff --git a/package-lock.json b/package-lock.json index 20da9a624..53f49a2a0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -35,7 +35,7 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-no-ssr": "^1.1.0", - "react-redux": "^9.1.2", + "react-redux": "^8.1.3", "use-query-params": "2.2.1" }, "devDependencies": { @@ -53,7 +53,7 @@ } }, "apps/wfo-ui-surf": { - "version": "1.3.1", + "version": "1.7.1", "dependencies": { "@elastic/datemath": "^5.0.3", "@elastic/eui": "^95.1.0", @@ -72,7 +72,7 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-no-ssr": "^1.1.0", - "react-redux": "^9.1.2", + "react-redux": "^8.1.3", "use-query-params": "2.2.1" }, "devDependencies": { @@ -28008,13 +28008,14 @@ }, "packages/orchestrator-ui-components": { "name": "@orchestrator-ui/orchestrator-ui-components", - "version": "1.29.1", + "version": "1.38.2", "license": "Apache-2.0", "dependencies": { "@elastic/eui": "^95.1.0", "@emotion/css": "^11.11.2", "@emotion/react": "^11.11.4", "@rtk-query/graphql-request-base-query": "^2.3.1", + "graphql-request": "^6.1.0", "invariant": "^2.2.4", "lodash": "^4.17.21", "moment": "^2.29.4", diff --git a/packages/orchestrator-ui-components/src/components/WfoForms/formFields/SubscriptionSummaryField.tsx b/packages/orchestrator-ui-components/src/components/WfoForms/formFields/SubscriptionSummaryField.tsx index 5ae9c9b0f..744c44174 100644 --- a/packages/orchestrator-ui-components/src/components/WfoForms/formFields/SubscriptionSummaryField.tsx +++ b/packages/orchestrator-ui-components/src/components/WfoForms/formFields/SubscriptionSummaryField.tsx @@ -1,5 +1,5 @@ /* - * Copyright 2019-2023 SURF. + * Copyright 2019-2024 SURF. * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at @@ -18,7 +18,7 @@ import { connectField, filterDOMProps } from 'uniforms'; import { EuiFormRow, EuiText } from '@elastic/eui'; -import { WfoLoading, WfoSubscriptionGeneral } from '@/components'; +import { WfoLoading, WfoSubscriptionDetailSection } from '@/components'; import { useGetSubscriptionDetailQuery } from '@/rtk'; import { FieldProps } from './types'; @@ -35,14 +35,15 @@ const SubscriptionSummaryDisplay = ({ const { data, isFetching } = useGetSubscriptionDetailQuery({ subscriptionId, }); + const subscriptionDetail = data?.subscription; - if (!data) { + if (!subscriptionDetail) { return ; } return ( - ); diff --git a/packages/orchestrator-ui-components/src/components/WfoSubscription/WfoSubscriptionGeneral.tsx b/packages/orchestrator-ui-components/src/components/WfoSubscription/WfoSubscriptionGeneral.tsx index 8fa42325b..d90f9f806 100644 --- a/packages/orchestrator-ui-components/src/components/WfoSubscription/WfoSubscriptionGeneral.tsx +++ b/packages/orchestrator-ui-components/src/components/WfoSubscription/WfoSubscriptionGeneral.tsx @@ -1,23 +1,17 @@ import React from 'react'; -import { useTranslations } from 'next-intl'; - import { EuiFlexGrid, EuiFlexItem } from '@elastic/eui'; -import { WfoJsonCodeBlock } from '@/components'; -import { WfoCustomerDescriptionsField } from '@/components/WfoSubscription/WfoCustomerDescriptionsField'; -import { useSubscriptionDetailGeneralSectionConfigurationOverride } from '@/components/WfoSubscription/overrides/useSubscriptionDetailGeneralSectionConfigurationOverride'; +import { + WfoSubscriptionDetailSection, + WfoSubscriptionFixedInputSection, + WfoSubscriptionMetadataSection, + WfoSubscriptionProductInfoSection, + useSubscriptionDetailGeneralSectionConfigurationOverride, +} from '@/components'; import { WfoSubscriptionDetailGeneralConfiguration } from '@/rtk'; import { SubscriptionDetail } from '@/types'; -import { camelToHuman, formatDate, toOptionalArrayEntry } from '@/utils'; - -import { - WfoProductStatusBadge, - WfoSubscriptionStatusBadge, -} from '../WfoBadges'; -import { WfoKeyValueTableDataType } from '../WfoKeyValueTable/WfoKeyValueTable'; -import { SubscriptionKeyValueBlock } from './SubscriptionKeyValueBlock'; -import { WfoInSyncField } from './WfoInSyncField'; +import { toOptionalArrayEntry } from '@/utils'; interface WfoSubscriptionGeneralProps { subscriptionDetail: SubscriptionDetail; @@ -35,154 +29,28 @@ export const WfoSubscriptionGeneral = ({ subscriptionDetail, isFetching, }: WfoSubscriptionGeneralProps) => { - const t = useTranslations('subscriptions.detail'); const { overrideSections } = useSubscriptionDetailGeneralSectionConfigurationOverride(); - const hasCustomerDescriptions = - subscriptionDetail.customerDescriptions.length > 0; + const { metadata, fixedInputs, product } = subscriptionDetail; - const getSubscriptionDetailBlockData = (): WfoKeyValueTableDataType[] => [ - { - key: t('subscriptionId'), - value: subscriptionDetail.subscriptionId, - textToCopy: subscriptionDetail.subscriptionId, - }, - { - key: t('productName'), - value: subscriptionDetail.product.name, - }, - { - key: t('description'), - value: subscriptionDetail.description, - }, - { - key: t('startDate'), - value: formatDate(subscriptionDetail.startDate), - }, - { - key: t('endDate'), - value: formatDate(subscriptionDetail.endDate), - }, - { - key: t('status'), - value: ( - - ), - }, - { - key: t('insync'), - value: ( - - ), - }, - { - key: t('customer'), - value: - subscriptionDetail && subscriptionDetail.customer - ? `${subscriptionDetail.customer?.fullname}` - : '-', - }, - { - key: t('customerUuid'), - value: - subscriptionDetail && subscriptionDetail.customer - ? `${subscriptionDetail.customer?.customerId}` - : '-', - textToCopy: subscriptionDetail.customer?.customerId, - }, - ...toOptionalArrayEntry( - { - key: t('customerDescriptions'), - value: ( - - ), - }, - hasCustomerDescriptions, - ), - { - key: t('note'), - value: (subscriptionDetail && subscriptionDetail.note) || '-', - }, - ]; - - const getMetadataBlockData = (): WfoKeyValueTableDataType[] => - Object.entries(subscriptionDetail.metadata).map(([key, value]) => ({ - key: camelToHuman(key), - value: , - })); - - const getFixedInputBlockData = (): WfoKeyValueTableDataType[] => - subscriptionDetail.fixedInputs.map((fixedInput) => ({ - key: fixedInput.field, - value: fixedInput.value, - })); - - const getProductInfoBlockData = (): WfoKeyValueTableDataType[] => { - const product = subscriptionDetail.product; - return [ - { - key: t('name'), - value: product.name, - }, - { - key: t('description'), - value: product.description, - }, - { - key: t('productType'), - value: product.productType, - }, - { - key: t('tag'), - value: product.tag, - }, - { - key: t('status'), - value: , - }, - { - key: t('created'), - value: formatDate(product.createdAt), - }, - { - key: t('endDate'), - value: formatDate(product.endDate), - }, - ]; - }; - - const hasMetadata = Object.entries(subscriptionDetail.metadata).length > 0; - const hasFixedInputs = subscriptionDetail.fixedInputs.length > 0; + const hasMetadata = Object.entries(metadata).length > 0; + const hasFixedInputs = fixedInputs.length > 0; const defaultConfiguration: WfoSubscriptionDetailGeneralConfiguration[] = [ { id: WfoSubscriptionGeneralSections.BLOCK_TITLE_SUBSCRIPTION_DETAILS, node: ( - ), }, ...toOptionalArrayEntry( { id: WfoSubscriptionGeneralSections.BLOCK_TITLE_METADATA, - node: ( - - ), + node: , }, hasMetadata, ), @@ -190,9 +58,8 @@ export const WfoSubscriptionGeneral = ({ { id: WfoSubscriptionGeneralSections.BLOCK_TITLE_FIXED_INPUTS, node: ( - ), }, @@ -200,12 +67,7 @@ export const WfoSubscriptionGeneral = ({ ), { id: WfoSubscriptionGeneralSections.BLOCK_TITLE_PRODUCT_INFO, - node: ( - - ), + node: , }, ]; diff --git a/packages/orchestrator-ui-components/src/components/WfoSubscription/WfoSubscriptionGeneralSections/WfoSubscriptionDetailSection.tsx b/packages/orchestrator-ui-components/src/components/WfoSubscription/WfoSubscriptionGeneralSections/WfoSubscriptionDetailSection.tsx new file mode 100644 index 000000000..091e117ce --- /dev/null +++ b/packages/orchestrator-ui-components/src/components/WfoSubscription/WfoSubscriptionGeneralSections/WfoSubscriptionDetailSection.tsx @@ -0,0 +1,113 @@ +import React from 'react'; + +import { useTranslations } from 'next-intl'; + +import { + SubscriptionKeyValueBlock, + WfoCustomerDescriptionsField, + WfoInSyncField, + WfoSubscriptionStatusBadge, +} from '@/components'; +import { SubscriptionDetail } from '@/types'; +import { formatDate, toOptionalArrayEntry } from '@/utils'; + +interface WfoSubscriptionDetailSectionProps { + isFetching: boolean; + subscriptionDetail: SubscriptionDetail; +} + +export const WfoSubscriptionDetailSection = ({ + isFetching, + subscriptionDetail, +}: WfoSubscriptionDetailSectionProps) => { + const t = useTranslations('subscriptions.detail'); + + const hasCustomerDescriptions = + subscriptionDetail.customerDescriptions.length > 0; + + const { + subscriptionId, + product, + description, + startDate, + endDate, + status, + customer, + customerDescriptions, + note, + } = subscriptionDetail; + + const subscriptionDetailBlockData = [ + { + key: t('subscriptionId'), + value: subscriptionId, + textToCopy: subscriptionId, + }, + { + key: t('productName'), + value: product.name, + }, + { + key: t('description'), + value: description, + }, + { + key: t('startDate'), + value: formatDate(startDate), + }, + { + key: t('endDate'), + value: formatDate(endDate), + }, + { + key: t('status'), + value: , + }, + { + key: t('insync'), + value: ( + + ), + }, + { + key: t('customer'), + value: + subscriptionDetail && subscriptionDetail.customer + ? `${customer?.fullname}` + : '-', + }, + { + key: t('customerUuid'), + value: + subscriptionDetail && customer + ? `${customer?.customerId}` + : '-', + textToCopy: customer?.customerId, + }, + ...toOptionalArrayEntry( + { + key: t('customerDescriptions'), + value: ( + + ), + }, + hasCustomerDescriptions, + ), + { + key: t('note'), + value: note || '-', + }, + ]; + + return ( + + ); +}; diff --git a/packages/orchestrator-ui-components/src/components/WfoSubscription/WfoSubscriptionGeneralSections/WfoSubscriptionFixedInputSection.tsx b/packages/orchestrator-ui-components/src/components/WfoSubscription/WfoSubscriptionGeneralSections/WfoSubscriptionFixedInputSection.tsx new file mode 100644 index 000000000..8b8dd3809 --- /dev/null +++ b/packages/orchestrator-ui-components/src/components/WfoSubscription/WfoSubscriptionGeneralSections/WfoSubscriptionFixedInputSection.tsx @@ -0,0 +1,28 @@ +import React from 'react'; + +import { useTranslations } from 'next-intl'; + +import { SubscriptionKeyValueBlock } from '@/components'; +import { SubscriptionDetail } from '@/types'; + +interface WfoSubscriptionFixedInputSectionProps { + fixedInputs: SubscriptionDetail['fixedInputs']; +} + +export const WfoSubscriptionFixedInputSection = ({ + fixedInputs, +}: WfoSubscriptionFixedInputSectionProps) => { + const t = useTranslations('subscriptions.detail'); + + const fixedInputBlockData = fixedInputs.map((fixedInput) => ({ + key: fixedInput.field, + value: fixedInput.value, + })); + + return ( + + ); +}; diff --git a/packages/orchestrator-ui-components/src/components/WfoSubscription/WfoSubscriptionGeneralSections/WfoSubscriptionMetadataSection.tsx b/packages/orchestrator-ui-components/src/components/WfoSubscription/WfoSubscriptionGeneralSections/WfoSubscriptionMetadataSection.tsx new file mode 100644 index 000000000..f15e4bfc0 --- /dev/null +++ b/packages/orchestrator-ui-components/src/components/WfoSubscription/WfoSubscriptionGeneralSections/WfoSubscriptionMetadataSection.tsx @@ -0,0 +1,29 @@ +import React from 'react'; + +import { useTranslations } from 'next-intl'; + +import { SubscriptionKeyValueBlock, WfoJsonCodeBlock } from '@/components'; +import { SubscriptionDetail } from '@/types'; +import { camelToHuman } from '@/utils'; + +interface WfoSubscriptionMetadataSectionProps { + metadata: SubscriptionDetail['metadata']; +} + +export const WfoSubscriptionMetadataSection = ({ + metadata, +}: WfoSubscriptionMetadataSectionProps) => { + const t = useTranslations('subscriptions.detail'); + + const metadataBlockData = Object.entries(metadata).map(([key, value]) => ({ + key: camelToHuman(key), + value: , + })); + + return ( + + ); +}; diff --git a/packages/orchestrator-ui-components/src/components/WfoSubscription/WfoSubscriptionGeneralSections/WfoSubscriptionProductInfoSection.tsx b/packages/orchestrator-ui-components/src/components/WfoSubscription/WfoSubscriptionGeneralSections/WfoSubscriptionProductInfoSection.tsx new file mode 100644 index 000000000..55af84314 --- /dev/null +++ b/packages/orchestrator-ui-components/src/components/WfoSubscription/WfoSubscriptionGeneralSections/WfoSubscriptionProductInfoSection.tsx @@ -0,0 +1,55 @@ +import React from 'react'; + +import { useTranslations } from 'next-intl'; + +import { SubscriptionKeyValueBlock, WfoProductStatusBadge } from '@/components'; +import { SubscriptionDetail } from '@/types'; +import { formatDate } from '@/utils'; + +interface WfoSubscriptionProductInfoSectionProps { + product: SubscriptionDetail['product']; +} + +export const WfoSubscriptionProductInfoSection = ({ + product, +}: WfoSubscriptionProductInfoSectionProps) => { + const t = useTranslations('subscriptions.detail'); + + const productInfoBlockData = [ + { + key: t('name'), + value: product.name, + }, + { + key: t('description'), + value: product.description, + }, + { + key: t('productType'), + value: product.productType, + }, + { + key: t('tag'), + value: product.tag, + }, + { + key: t('status'), + value: , + }, + { + key: t('created'), + value: formatDate(product.createdAt), + }, + { + key: t('endDate'), + value: formatDate(product.endDate), + }, + ]; + + return ( + + ); +}; diff --git a/packages/orchestrator-ui-components/src/components/WfoSubscription/WfoSubscriptionGeneralSections/index.ts b/packages/orchestrator-ui-components/src/components/WfoSubscription/WfoSubscriptionGeneralSections/index.ts new file mode 100644 index 000000000..e80e68f59 --- /dev/null +++ b/packages/orchestrator-ui-components/src/components/WfoSubscription/WfoSubscriptionGeneralSections/index.ts @@ -0,0 +1,4 @@ +export * from './WfoSubscriptionDetailSection'; +export * from './WfoSubscriptionFixedInputSection'; +export * from './WfoSubscriptionMetadataSection'; +export * from './WfoSubscriptionProductInfoSection'; diff --git a/packages/orchestrator-ui-components/src/components/WfoSubscription/index.ts b/packages/orchestrator-ui-components/src/components/WfoSubscription/index.ts index 51e17a96e..84712db0b 100644 --- a/packages/orchestrator-ui-components/src/components/WfoSubscription/index.ts +++ b/packages/orchestrator-ui-components/src/components/WfoSubscription/index.ts @@ -2,6 +2,8 @@ export * from './utils'; export * from './overrides'; +export * from './WfoSubscriptionGeneralSections'; + export * from './SubscriptionKeyValueBlock'; export * from './WfoInSyncField'; export * from './WfoProcessesTimeline'; @@ -11,3 +13,4 @@ export * from './WfoSubscriptionActions'; export * from './WfoSubscriptionProductBlock'; export * from './WfoSubscriptionDetailTree'; export * from './WfoSubscriptionGeneral'; +export * from './WfoCustomerDescriptionsField'; diff --git a/packages/orchestrator-ui-components/src/components/WfoSubscription/overrides/index.ts b/packages/orchestrator-ui-components/src/components/WfoSubscription/overrides/index.ts index 8eae92ffd..88da90fdf 100644 --- a/packages/orchestrator-ui-components/src/components/WfoSubscription/overrides/index.ts +++ b/packages/orchestrator-ui-components/src/components/WfoSubscription/overrides/index.ts @@ -1 +1,2 @@ export * from './useSubscriptionDetailValueOverride'; +export * from './useSubscriptionDetailGeneralSectionConfigurationOverride'; diff --git a/packages/orchestrator-ui-components/src/configuration/version.ts b/packages/orchestrator-ui-components/src/configuration/version.ts index 18613a50d..bfe0fa1e4 100644 --- a/packages/orchestrator-ui-components/src/configuration/version.ts +++ b/packages/orchestrator-ui-components/src/configuration/version.ts @@ -1 +1 @@ -export const ORCHESTRATOR_UI_LIBRARY_VERSION = '1.38.1'; +export const ORCHESTRATOR_UI_LIBRARY_VERSION = '1.38.2';