[Fleet] Filter hosted policies from menu (#97380)

## Summary

 * 4C & 7C from #91906 about hiding hosted agent policy from select menus
 * Also changed reassign agent to new policy UI from flyout to modal as requested
<details><summary>Screenshots</summary>

<h3>Current</h3>
<img width="1090" alt="Screen Shot 2021-04-16 at 1 37 02 PM" src="https://user-images.githubusercontent.com/57655/115075124-9d9ea600-9ec8-11eb-8e88-d8f14f62613f.png">


<h3>PR</h3>
<img width="1092" alt="Screen Shot 2021-04-16 at 1 43 51 PM" src="https://user-images.githubusercontent.com/57655/115075127-9d9ea600-9ec8-11eb-8c47-c3b1fbeb96eb.png">

<h3>current</h3>
<img width="1112" alt="Screen Shot 2021-04-16 at 1 44 41 PM" src="https://user-images.githubusercontent.com/57655/115075129-9e373c80-9ec8-11eb-9f93-cac511c9d53d.png">

<h3>PR</h3>
<img width="1106" alt="Screen Shot 2021-04-16 at 1 50 28 PM" src="https://user-images.githubusercontent.com/57655/115075130-9e373c80-9ec8-11eb-93fb-0adfa5ae81ba.png">


<h3>current</h3>
<img width="1106" alt="Screen Shot 2021-04-16 at 1 35 48 PM" src="https://user-images.githubusercontent.com/57655/115075121-9d9ea600-9ec8-11eb-8605-89336371938b.png">

<h3>PR</h3>
<img width="1106" alt="Screen Shot 2021-04-16 at 2 35 15 PM" src="https://user-images.githubusercontent.com/57655/115075133-9ecfd300-9ec8-11eb-9458-0b7f9cf76c10.png">

<img width="2136" alt="Screen Shot 2021-04-16 at 3 24 16 PM" src="https://user-images.githubusercontent.com/57655/115075141-a0010000-9ec8-11eb-896c-efc4be4be5ac.png">

</details>

### Checklist
- [x] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/master/packages/kbn-i18n/README.md)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

x-pack/plugins/fleet/public/applications/fleet/components/package_icon.tsx

@@ -14,7 +14,18 @@ import { usePackageIconType } from '../hooks';
 
 export const PackageIcon: React.FunctionComponent<
   UsePackageIconType & Omit<EuiIconProps, 'type'>
-> = ({ packageName, version, icons, tryApi, ...euiIconProps }) => {
+> = ({ size = 's', packageName, version, icons, tryApi, ...euiIconProps }) => {
   const iconType = usePackageIconType({ packageName, version, icons, tryApi });
-  return <EuiIcon size="s" type={iconType} {...euiIconProps} />;
+  return (
+    <EuiIcon
+      // when a custom SVG is used the logo is rendered with <img class="euiIcon euiIcon--small">
+      // this collides with some EuiText (+img) CSS from the EuiIcon component
+      // which  makes the button large, wide, and poorly layed out
+      // override those styles until the bug is fixed or we find a better approach
+      style={{ margin: 'unset', width: 'unset' }}
+      size={size}
+      type={iconType}
+      {...euiIconProps}
+    />
+  );
 };

x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/step_select_agent_policy.tsx

@@ -94,7 +94,11 @@ export const StepSelectAgentPolicy: React.FunctionComponent<{
     sortOrder: 'asc',
     full: true,
   });
-  const agentPolicies = useMemo(() => agentPoliciesData?.items || [], [agentPoliciesData?.items]);
+  const agentPolicies = useMemo(
+    () => agentPoliciesData?.items.filter((policy) => !policy.is_managed) || [],
+    [agentPoliciesData?.items]
+  );
+
   const agentPoliciesById = useMemo(() => {
     return agentPolicies.reduce((acc: { [key: string]: GetAgentPoliciesResponseItem }, policy) => {
       acc[policy.id] = policy;

x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/actions_menu.tsx

@@ -14,7 +14,7 @@ import { useCapabilities, useKibanaVersion } from '../../../../hooks';
 import { ContextMenuActions } from '../../../../components';
 import {
   AgentUnenrollAgentModal,
-  AgentReassignAgentPolicyFlyout,
+  AgentReassignAgentPolicyModal,
   AgentUpgradeAgentModal,
 } from '../../components';
 import { useAgentRefresh } from '../hooks';
@@ -45,7 +45,7 @@ export const AgentDetailsActionMenu: React.FunctionComponent<{
     <>
       {isReassignFlyoutOpen && (
         <EuiPortal>
-          <AgentReassignAgentPolicyFlyout agents={[agent]} onClose={onClose} />
+          <AgentReassignAgentPolicyModal agents={[agent]} onClose={onClose} />
         </EuiPortal>
       )}
       {isUnenrollModalOpen && (

x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/components/bulk_actions.tsx

@@ -22,7 +22,7 @@ import { FormattedMessage, FormattedNumber } from '@kbn/i18n/react';
 import { SO_SEARCH_LIMIT } from '../../../../constants';
 import type { Agent } from '../../../../types';
 import {
-  AgentReassignAgentPolicyFlyout,
+  AgentReassignAgentPolicyModal,
   AgentUnenrollAgentModal,
   AgentUpgradeAgentModal,
 } from '../../components';
@@ -161,7 +161,7 @@ export const AgentBulkActions: React.FunctionComponent<{
     <>
       {isReassignFlyoutOpen && (
         <EuiPortal>
-          <AgentReassignAgentPolicyFlyout
+          <AgentReassignAgentPolicyModal
             agents={agents}
             onClose={() => {
               setIsReassignFlyoutOpen(false);

x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/index.tsx

@@ -41,7 +41,7 @@ import { AgentPolicySummaryLine, ContextMenuActions } from '../../../components'
 import { AgentStatusKueryHelper, isAgentUpgradeable } from '../../../services';
 import { AGENT_SAVED_OBJECT_TYPE } from '../../../constants';
 import {
-  AgentReassignAgentPolicyFlyout,
+  AgentReassignAgentPolicyModal,
   AgentHealth,
   AgentUnenrollAgentModal,
   AgentUpgradeAgentModal,
@@ -379,7 +379,7 @@ export const AgentListPage: React.FunctionComponent<{}> = () => {
 
         return (
           <EuiFlexGroup gutterSize="s" alignItems="center" style={{ minWidth: 0 }}>
-            <AgentPolicySummaryLine policy={agentPolicy} />
+            {agentPolicy && <AgentPolicySummaryLine policy={agentPolicy} />}
             {showWarning && (
               <EuiFlexItem grow={false}>
                 <EuiText color="subdued" size="xs" className="eui-textNoWrap">
@@ -488,7 +488,7 @@ export const AgentListPage: React.FunctionComponent<{}> = () => {
       ) : null}
       {agentToReassign && (
         <EuiPortal>
-          <AgentReassignAgentPolicyFlyout
+          <AgentReassignAgentPolicyModal
             agents={[agentToReassign]}
             onClose={() => {
               setAgentToReassign(undefined);

x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/agent_enrollment_flyout/steps.tsx

@@ -53,13 +53,16 @@ export const AgentPolicySelectionStep = ({
   setSelectedAPIKeyId?: (key: string) => void;
   setSelectedPolicyId?: (policyId: string) => void;
 }) => {
+  const regularAgentPolicies = Array.isArray(agentPolicies)
+    ? agentPolicies.filter((policy) => policy && !policy.is_managed)
+    : [];
   return {
     title: i18n.translate('xpack.fleet.agentEnrollment.stepChooseAgentPolicyTitle', {
       defaultMessage: 'Choose an agent policy',
     }),
     children: (
       <EnrollmentStepAgentPolicy
-        agentPolicies={agentPolicies}
+        agentPolicies={regularAgentPolicies}
         withKeySelection={setSelectedAPIKeyId ? true : false}
         onKeyChange={setSelectedAPIKeyId}
         onAgentPolicyChange={setSelectedPolicyId}