feat: use mask (*) instead of parameter names while matching rest operations during comparison (#53)

* feat: fetch all operations from version

* chore: update dependencies

* fix: hardcoded apiType

* "chore: update version to 2.10.2-feature-path-param-diff.0"

* feat(path-param-diff): Removed redundant fields in types

* feat(path param diff): Moved types for different packages changelog into version-changelog.ts as used only here

* feat(path param diff): Refactored types for changelog

* feat(path param diff): No internal info

* fix: replace parallel operations fetching with sequential

* feat(path param diff): Adapted for new types (without fixing navigation)

* feat(path param diff): Involved both operation keys into navigation URLs

* feat(ignore param name): fixed build

* feat(ignore param name while matching): Refactored types. Fixed imports

* feat(ignore param name while matching): Bump api-processor

* fix: small issues

* feat: Fixed API version. Bump api-processor

* fix: Added missed changes in GroupCompareContent (new contract supported)

* fix: Fixed type of changes summary in transformed changelog

* fix: Bump api-processor. Fix navigation link to operation(s) from API Changes tab

* fix: Crashing on compared operations from compared groups

* fix: Build

* fix: Fixed list of "unknown" on sidebar. Fixed crashing on expanding tag. Fixed "Please select an operation" on comparison. Extracted "isObject" utility to commons

* fix: useOperation stuck in "isLoading" state when was disabled. Some tidying code

* fix: Bump api-processor. Fixed stucking in "loading" (useOperation). Used new contract of OperationChanges. Fixed handling operation IDs in different cases.

* fix: Fixed provided operation keys on DifferentOperationVersionsComparisonPage

* fix: Collision in usages of search param "operation"

* fix: Bump ASV and ADV

* fix: Bump ASV (merged param and its schema diffs if both available)

* fix: Fixed minor bugs not related to the story

* fix: Critical issue with crashing app on comparing 2 package versions with added/deleted operation

* refactor: Removed type duplications for compared operations

* chore: update dependencies

---------

Co-authored-by: b41ex <[email protected]>
Co-authored-by: Sergei Komarov <[email protected]>

Author: 3 people

package-lock.json

@@ -17,7 +17,7 @@
 import type { FC } from 'react'
 import { memo } from 'react'
 import { OperationChangesSubTableWrapper } from './OperationChangesSubTableWrapper'
-import type { OperationChangeData } from '@netcracker/qubership-apihub-ui-shared/entities/version-changelog'
+import type { OperationChangeBase } from '@netcracker/qubership-apihub-ui-shared/entities/version-changelog'
 import type { Key } from '@netcracker/qubership-apihub-ui-shared/entities/keys'
 import type { FetchNextPage } from '@netcracker/qubership-apihub-ui-shared/widgets/ChangesViewWidget/components/ChangesViewTable'
 import { ChangesViewTable } from '@netcracker/qubership-apihub-ui-shared/widgets/ChangesViewWidget/components/ChangesViewTable'
@@ -30,7 +30,7 @@ import { isNotEmpty } from '@netcracker/qubership-apihub-ui-shared/utils/arrays'
 import type { ApiType } from '@netcracker/qubership-apihub-ui-shared/entities/api-types'
 
 export type ChangesViewWidgetProps = {
-  changes: ReadonlyArray<OperationChangeData>
+  changes: ReadonlyArray<OperationChangeBase>
   packageKey: Key
   versionKey: Key
   isLoading: boolean

packages/agents/src/widgets/ChangeViewDialog/ChangesViewWidget.tsx

@@ -32,7 +32,9 @@ export const OperationChangesSubTableWrapper: FC<OperationChangesSubTableWrapper
     packageKind,
   },
 ) => {
-  const { operationKey } = value.original.change
+  const { currentOperation, previousOperation } = value.original.change
+  const operationKey = currentOperation?.operationKey ?? previousOperation!.operationKey
+
   const [changes, isLoading] = useOperationChangelog({
     versionKey: versionKey!,
     packageKey: packageKey!,

packages/agents/src/widgets/ChangeViewDialog/OperationChangesSubTableWrapper.tsx

@@ -113,6 +113,7 @@ export type OperationsDetail = {
   versionKey: Key
   apiType: ApiType
   operationKey?: Key
+  previousOperationKey?: Key
   search?: {
     [MODE_SEARCH_PARAM]?: SearchParam
     [FILE_VIEW_MODE_PARAM_KEY]?: SearchParam
@@ -122,6 +123,7 @@ export type OperationsDetail = {
     [SEARCH_TEXT_PARAM_KEY]?: SearchParam
     [EXPAND_NAVIGATION_MENU_SEARCH_PARAM]?: SearchParam
     [OPERATIONS_VIEW_MODE_PARAM]?: SearchParam
+    [OPERATION_SEARCH_PARAM]?: SearchParam
   }
 }
 
@@ -159,20 +161,26 @@ export type DocumentPreviewDetail = {
   documentKey: Key
 } & DocumentsDetail
 
+export type OperationsComparisonSearchParams = {
+  [OPERATION_SEARCH_PARAM]?: SearchParam
+  [REF_SEARCH_PARAM]: SearchParam
+  [PACKAGE_SEARCH_PARAM]?: SearchParam
+  [VERSION_SEARCH_PARAM]?: SearchParam
+  [DOCUMENT_SEARCH_PARAM]?: SearchParam
+  [SEARCH_TEXT_PARAM_KEY]?: SearchParam
+  [FILTERS_SEARCH_PARAM]?: SearchParam
+}
+
 export type OperationsComparisonDetail = {
   packageKey: Key
   versionKey: Key
   apiType: ApiType
   operationKey: Key
-  search: {
-    [OPERATION_SEARCH_PARAM]?: SearchParam
-    [REF_SEARCH_PARAM]: SearchParam
-    [PACKAGE_SEARCH_PARAM]?: SearchParam
-    [VERSION_SEARCH_PARAM]?: SearchParam
-    [DOCUMENT_SEARCH_PARAM]?: SearchParam
-    [SEARCH_TEXT_PARAM_KEY]?: SearchParam
-    [FILTERS_SEARCH_PARAM]?: SearchParam
-  }
+  search: OperationsComparisonSearchParams
+}
+
+export type GroupsOperationsComparisonSearchParams = OperationsComparisonSearchParams & {
+  [GROUP_SEARCH_PARAM]?: SearchParam
 }
 
 export type GroupsOperationsComparisonDetail = {
@@ -181,16 +189,7 @@ export type GroupsOperationsComparisonDetail = {
   groupKey: Key
   apiType: ApiType
   operationKey: Key
-  search: {
-    [OPERATION_SEARCH_PARAM]?: SearchParam
-    [REF_SEARCH_PARAM]: SearchParam
-    [PACKAGE_SEARCH_PARAM]?: SearchParam
-    [VERSION_SEARCH_PARAM]?: SearchParam
-    [DOCUMENT_SEARCH_PARAM]?: SearchParam
-    [GROUP_SEARCH_PARAM]?: SearchParam
-    [SEARCH_TEXT_PARAM_KEY]?: SearchParam
-    [FILTERS_SEARCH_PARAM]?: SearchParam
-  }
+  search: GroupsOperationsComparisonSearchParams
 }
 
 export type FirstGroupOperationDetail = {

packages/portal/src/routes/NavigationProvider.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { Button, Typography } from '@mui/material'
+import { Box, Button, Typography } from '@mui/material'
 import type { FC } from 'react'
 import React, { memo, useCallback } from 'react'
 import { MainPageCard } from '../../MainPageCard'
@@ -39,18 +39,18 @@ export const PrivatePagePlaceholder: FC = memo(() => {
           invisible={false}
           area={CONTENT_PLACEHOLDER_AREA}
           message={
-            <>
+            <Box display='flex' flexDirection='column' alignItems='center'>
               <Typography component="div" variant="h3" color="#8F9EB4" display={'block'}>
                 Create your own workspace that will be available only to you.
               </Typography>
               <Button
                 sx={{ mt: 2 }}
-                variant={'contained'}
-                children={'Create Private Workspace'}
+                variant='contained'
+                children='Create Private Workspace'
                 onClick={onCreatePrivatePackage}
                 data-testid="CreatePrivateWorkspaceButton"
               />
-            </>
+            </Box>
           }
           testId="PrivateWorkspacePlaceholder"
         />

packages/portal/src/routes/root/MainPage/MainPageSubpages/PrivatePage/PrivatePagePlaceholder.tsx

@@ -14,21 +14,15 @@
  * limitations under the License.
  */
 
+import type { OperationData, OptionalOperationPair } from '@netcracker/qubership-apihub-ui-shared/entities/operations'
 import { createContext, useContext } from 'react'
-import type { OperationData } from '@netcracker/qubership-apihub-ui-shared/entities/operations'
 
-type ComparedOperationsPair = {
-  left: OperationData | undefined
-  right: OperationData | undefined
-  isLoading: boolean
-}
-
-export const ComparedOperationsContext = createContext<ComparedOperationsPair>({
-  left: undefined,
-  right: undefined,
+export const ComparedOperationsContext = createContext<OptionalOperationPair<OperationData>>({
+  previousOperation: undefined,
+  currentOperation: undefined,
   isLoading: true,
 })
 
-export function useComparedOperationsPair(): ComparedOperationsPair {
+export function useComparedOperationsPair(): OptionalOperationPair<OperationData> {
   return useContext(ComparedOperationsContext)
 }

packages/portal/src/routes/root/PortalPage/VersionPage/ComparedOperationsContext.ts

@@ -42,8 +42,8 @@ export const ComparisonOperationChangeSeverityFilters: FC<ComparisonOperationCha
   const { isChangelogAvailable } = props
 
   const {
-    left: originOperation,
-    right: changedOperation,
+    previousOperation: originOperation,
+    currentOperation: changedOperation,
     isLoading: isOperationsLoading,
   } = useComparedOperationsPair()
 

packages/portal/src/routes/root/PortalPage/VersionPage/ComparisonOperationChangeSeverityFilters.tsx

@@ -41,6 +41,7 @@ import { useSearchParam } from '@netcracker/qubership-apihub-ui-shared/hooks/sea
 import {
   FILTERS_SEARCH_PARAM,
   GROUP_SEARCH_PARAM,
+  OPERATION_SEARCH_PARAM,
   optionalSearchParams,
   PACKAGE_SEARCH_PARAM,
   REF_SEARCH_PARAM,
@@ -144,7 +145,7 @@ export const GroupCompareContent: FC<GroupCompareContentProps> = memo(({ groupCh
 
   if (changesLoadingStatus || isEmpty(groupChanges)) {
     return (
-      <LoadingIndicator/>
+      <LoadingIndicator />
     )
   }
 
@@ -173,31 +174,37 @@ export const GroupCompareContent: FC<GroupCompareContentProps> = memo(({ groupCh
               filteredGroupChanges.map((change) => {
                 const {
                   operationId,
+                  previousOperationId,
                   changeSummary,
                   metadata: metadataObject,
+                  previousMetadata: previousMetadataObject,
                   diffs,
                 } = change
 
                 const metadata = metadataObject as OperationChangesMetadata & Partial<RestChangesMetadata> & Partial<GraphQLChangesMetadata>
+                const previousMetadata = previousMetadataObject as OperationChangesMetadata & Partial<RestChangesMetadata> & Partial<GraphQLChangesMetadata>
 
                 const { action } = diffs?.[0] ?? {}
                 const operationAction = getActionForOperation(change, REPLACE_ACTION_TYPE)
                 const severity = getMajorSeverity(changeSummary!)
 
-                const isMetaDataPresent = !!(metadata?.title && metadata?.path && metadata?.method)
-                const previousMetadata = metadata?.previousOperationMetadata
+                const isMetaDataPresent = !!(
+                  metadata?.title && metadata?.path && metadata?.method ||
+                  previousMetadata?.title && previousMetadata?.path && previousMetadata?.method
+                )
 
                 const comparingSearchParams = optionalSearchParams({
                   [PACKAGE_SEARCH_PARAM]: { value: changedPackageKey === originPackageKey ? '' : encodeURIComponent(originPackageKey!) },
                   [VERSION_SEARCH_PARAM]: { value: originVersionKey! },
                   [REF_SEARCH_PARAM]: { value: refPackageKey },
                   [GROUP_SEARCH_PARAM]: { value: previousGroup },
                   [FILTERS_SEARCH_PARAM]: { value: [...CHANGE_SEVERITIES].join() },
+                  [OPERATION_SEARCH_PARAM]: { value: operationId ? previousOperationId : undefined },
                 })
 
                 return (
                   <Grid
-                    key={`group-compare-content-filtered-group-changes-grid-${operationId}`}
+                    key={`compare-group-${group}-operations-${operationId}-${previousOperationId}`}
                     component={NavLink}
                     container
                     spacing={0}
@@ -215,7 +222,7 @@ export const GroupCompareContent: FC<GroupCompareContentProps> = memo(({ groupCh
                         encodeURIComponent(changedVersionKey!),
                         encodeURIComponent(group!),
                         `${apiType}`,
-                        encodeURIComponent(operationId),
+                        encodeURIComponent(operationId ?? previousOperationId!),
                       ),
                       search: `${comparingSearchParams}`,
                     }}
@@ -252,7 +259,7 @@ export const GroupCompareContent: FC<GroupCompareContentProps> = memo(({ groupCh
                         <Spec
                           key={operationId}
                           value={isMetaDataPresent && action !== ADD_ACTION_TYPE && previousMetadata ||
-                          !previousMetadata && action === REMOVE_ACTION_TYPE ? {
+                            !previousMetadata && action === REMOVE_ACTION_TYPE ? {
                             title: previousMetadata?.title ?? metadata.title,
                             operationId: operationId,
                             method: previousMetadata?.method ?? metadata.method,
@@ -271,7 +278,7 @@ export const GroupCompareContent: FC<GroupCompareContentProps> = memo(({ groupCh
                       <Spec
                         key={`changed-${operationId}`}
                         value={isMetaDataPresent && action !== REMOVE_ACTION_TYPE && previousMetadata ||
-                        !previousMetadata && action === ADD_ACTION_TYPE ? {
+                          !previousMetadata && action === ADD_ACTION_TYPE ? {
                           title: metadata.title,
                           operationId: operationId,
                           method: metadata.method,
@@ -306,7 +313,7 @@ const Spec: FC<SpecProps> = memo<SpecProps>(({ value, changes }) => {
 
   const secondary = (
     <Box component="span" sx={{ display: 'flex', alignItems: 'center' }} data-testid="OperationPath">
-      {method && <CustomChip component="span" sx={{ mr: 1 }} value={method} variant={'outlined'}/>}
+      {method && <CustomChip component="span" sx={{ mr: 1 }} value={method} variant={'outlined'} />}
       {path && (
         <OverflowTooltip title={path}>
           <Typography component="span" noWrap variant="inherit">{path}</Typography>
@@ -335,7 +342,7 @@ const Spec: FC<SpecProps> = memo<SpecProps>(({ value, changes }) => {
         />
       </Box>
       {changes && (
-        <Changes value={changes}/>
+        <Changes value={changes} />
       )}
     </ListItem>
   )