add theme$ to UpdateButton

elastic · Jan 5, 2022 · f3cc956 · f3cc956
1 parent 5d87462
commit f3cc956
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 4 deletions.
diff --git a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/index.tsx b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/index.tsx
@@ -596,7 +596,7 @@ export function Detail() {
             <OverviewPage packageInfo={packageInfo} integrationInfo={integrationInfo} />
           </Route>
           <Route path={INTEGRATIONS_ROUTING_PATHS.integration_details_settings}>
-            <SettingsPage packageInfo={packageInfo} />
+            <SettingsPage packageInfo={packageInfo} theme$={services.theme.theme$} />
           </Route>
           <Route path={INTEGRATIONS_ROUTING_PATHS.integration_details_assets}>
             <AssetsPage packageInfo={packageInfo} />

diff --git a/.../fleet/public/applications/integrations/sections/epm/screens/detail/settings/settings.tsx b/.../fleet/public/applications/integrations/sections/epm/screens/detail/settings/settings.tsx
@@ -22,6 +22,9 @@ import {
 
 import { i18n } from '@kbn/i18n';
 
+import type { Observable } from 'rxjs';
+import type { CoreTheme } from 'kibana/public';
+
 import type { PackageInfo, UpgradePackagePolicyDryRunResponse } from '../../../../../types';
 import { InstallStatus } from '../../../../../types';
 import {
@@ -90,9 +93,10 @@ const LatestVersionLink = ({ name, version }: { name: string; version: string })
 
 interface Props {
   packageInfo: PackageInfo;
+  theme$: Observable<CoreTheme>;
 }
 
-export const SettingsPage: React.FC<Props> = memo(({ packageInfo }: Props) => {
+export const SettingsPage: React.FC<Props> = memo(({ packageInfo, theme$ }: Props) => {
   const { name, title, removable, latestVersion, version, keepPoliciesUpToDate } = packageInfo;
   const [dryRunData, setDryRunData] = useState<UpgradePackagePolicyDryRunResponse | null>();
   const [isUpgradingPackagePolicies, setIsUpgradingPackagePolicies] = useState<boolean>(false);
@@ -291,6 +295,7 @@ export const SettingsPage: React.FC<Props> = memo(({ packageInfo }: Props) => {
                       dryRunData={dryRunData}
                       isUpgradingPackagePolicies={isUpgradingPackagePolicies}
                       setIsUpgradingPackagePolicies={setIsUpgradingPackagePolicies}
+                      theme$={theme$}
                     />
                   </p>
                 </>

diff --git a/...t/public/applications/integrations/sections/epm/screens/detail/settings/update_button.tsx b/...t/public/applications/integrations/sections/epm/screens/detail/settings/update_button.tsx
@@ -18,6 +18,8 @@ import {
   EuiConfirmModal,
   EuiSpacer,
 } from '@elastic/eui';
+import type { Observable } from 'rxjs';
+import type { CoreTheme } from 'kibana/public';
 
 import type {
   GetAgentPoliciesResponse,
@@ -43,6 +45,7 @@ interface UpdateButtonProps extends Pick<PackageInfo, 'name' | 'title' | 'versio
   packagePolicyIds?: string[];
   isUpgradingPackagePolicies?: boolean;
   setIsUpgradingPackagePolicies?: React.Dispatch<React.SetStateAction<boolean>>;
+  theme$: Observable<CoreTheme>;
 }
 
 /*
@@ -73,6 +76,7 @@ export const UpdateButton: React.FunctionComponent<UpdateButtonProps> = ({
   setIsUpgradingPackagePolicies = () => {},
   title,
   version,
+  theme$,
 }) => {
   const history = useHistory();
   const { getPath } = useLink();
@@ -174,14 +178,16 @@ export const UpdateButton: React.FunctionComponent<UpdateButtonProps> = ({
           id="xpack.fleet.integrations.packageUpdateSuccessTitle"
           defaultMessage="Updated {title} and upgraded policies"
           values={{ title }}
-        />
+        />,
+        { theme$ }
       ),
       text: toMountPoint(
         <FormattedMessage
           id="xpack.fleet.integrations.packageUpdateSuccessDescription"
           defaultMessage="Successfully updated {title} and upgraded policies"
           values={{ title }}
-        />
+        />,
+        { theme$ }
       ),
     });
 
@@ -197,6 +203,7 @@ export const UpdateButton: React.FunctionComponent<UpdateButtonProps> = ({
     setIsUpgradingPackagePolicies,
     title,
     version,
+    theme$,
   ]);
 
   const updateModal = (