Add breadcrumbs for upgrade package policy page (#110468)

Adds distinct breadcrumbs for both "upgrade package policy" paths:
1. From the fleet agent policies list page
2. From the integrations package policie slist page

Closes #110434

x-pack/plugins/fleet/public/applications/fleet/hooks/use_breadcrumbs.tsx

@@ -113,6 +113,24 @@ const breadcrumbGetters: {
       }),
     },
   ],
+  upgrade_package_policy: ({ policyName, policyId }) => [
+    BASE_BREADCRUMB,
+    {
+      href: pagePathGetters.policies()[1],
+      text: i18n.translate('xpack.fleet.breadcrumbs.policiesPageTitle', {
+        defaultMessage: 'Agent policies',
+      }),
+    },
+    {
+      href: pagePathGetters.policy_details({ policyId })[1],
+      text: policyName,
+    },
+    {
+      text: i18n.translate('xpack.fleet.breadcrumbs.upgradePacagePolicyPageTitle', {
+        defaultMessage: 'Upgrade integration ',
+      }),
+    },
+  ],
   agent_list: () => [
     BASE_BREADCRUMB,
     {

x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/edit_package_policy_page/index.tsx

@@ -525,15 +525,14 @@ export const EditPackagePolicyForm = memo<{
         />
       ) : (
         <>
-          {from === 'package' || from === 'package-edit' ? (
-            <IntegrationsBreadcrumb
-              pkgkey={pkgKeyFromPackageInfo(packageInfo)}
-              pkgTitle={packageInfo.title}
-              policyName={packagePolicy.name}
-            />
-          ) : (
-            <PoliciesBreadcrumb policyName={agentPolicy.name} policyId={policyId} />
-          )}
+          <Breadcrumb
+            agentPolicyName={agentPolicy.name}
+            from={from}
+            packagePolicyName={packagePolicy.name}
+            pkgkey={pkgKeyFromPackageInfo(packageInfo)}
+            pkgTitle={packageInfo.title}
+            policyId={policyId}
+          />
           {formState === 'CONFIRM' && (
             <ConfirmDeployAgentPolicyModal
               agentCount={agentCount}
@@ -542,20 +541,16 @@ export const EditPackagePolicyForm = memo<{
               onCancel={() => setFormState('VALID')}
             />
           )}
-
           {isUpgrade && dryRunData && (
             <>
               <UpgradeStatusCallout dryRunData={dryRunData} />
               <EuiSpacer size="xxl" />
             </>
           )}
-
           {configurePackage}
-
           {/* Extra space to accomodate the EuiBottomBar height */}
           <EuiSpacer size="xxl" />
           <EuiSpacer size="xxl" />
-
           <EuiBottomBar>
             <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
               <EuiFlexItem grow={false}>
@@ -602,14 +597,56 @@ export const EditPackagePolicyForm = memo<{
   );
 });
 
-const PoliciesBreadcrumb: React.FunctionComponent<{ policyName: string; policyId: string }> = ({
-  policyName,
-  policyId,
-}) => {
+const Breadcrumb = memo<{
+  agentPolicyName: string;
+  from: EditPackagePolicyFrom;
+  packagePolicyName: string;
+  pkgkey: string;
+  pkgTitle: string;
+  policyId: string;
+}>(({ agentPolicyName, from, packagePolicyName, pkgkey, pkgTitle, policyId }) => {
+  let breadcrumb = <PoliciesBreadcrumb policyName={agentPolicyName} policyId={policyId} />;
+
+  if (
+    from === 'package' ||
+    from === 'package-edit' ||
+    from === 'upgrade-from-integrations-policy-list'
+  ) {
+    breadcrumb = (
+      <IntegrationsBreadcrumb pkgkey={pkgkey} pkgTitle={pkgTitle} policyName={packagePolicyName} />
+    );
+  } else if (from === 'upgrade-from-fleet-policy-list') {
+    breadcrumb = <UpgradeBreadcrumb policyName={agentPolicyName} policyId={policyId} />;
+  }
+
+  return breadcrumb;
+});
+
+const IntegrationsBreadcrumb = memo<{
+  pkgTitle: string;
+  policyName: string;
+  pkgkey: string;
+}>(({ pkgTitle, policyName, pkgkey }) => {
+  useIntegrationsBreadcrumbs('integration_policy_edit', { policyName, pkgTitle, pkgkey });
+  return null;
+});
+
+const PoliciesBreadcrumb: React.FunctionComponent<{
+  policyName: string;
+  policyId: string;
+}> = ({ policyName, policyId }) => {
   useBreadcrumbs('edit_integration', { policyName, policyId });
   return null;
 };
 
+const UpgradeBreadcrumb: React.FunctionComponent<{
+  policyName: string;
+  policyId: string;
+}> = ({ policyName, policyId }) => {
+  useBreadcrumbs('upgrade_package_policy', { policyName, policyId });
+  return null;
+};
+
 const UpgradeStatusCallout: React.FunctionComponent<{
   dryRunData: UpgradePackagePolicyDryRunResponse;
 }> = ({ dryRunData }) => {
@@ -704,12 +741,3 @@ const UpgradeStatusCallout: React.FunctionComponent<{
     </>
   );
 };
-
-const IntegrationsBreadcrumb = memo<{
-  pkgTitle: string;
-  policyName: string;
-  pkgkey: string;
-}>(({ pkgTitle, policyName, pkgkey }) => {
-  useIntegrationsBreadcrumbs('integration_policy_edit', { policyName, pkgTitle, pkgkey });
-  return null;
-});