Plugins: Fix plugins count in update all plugins button (#93126)

* Plugins: Fix plugins count in update all plugins button

* Plugins: Fix new updates filter

* Plugins: Update tests

public/app/features/plugins/admin/components/UpdateAllModal.tsx

@@ -160,11 +160,12 @@ const ModalBody = ({ plugins, inProgress, selectedPlugins, onCheckboxChange, err
 
 type Props = {
   isOpen: boolean;
+  isLoading: boolean;
   onDismiss: () => void;
   plugins: CatalogPlugin[];
 };
 
-export const UpdateAllModal = ({ isOpen, onDismiss, plugins }: Props) => {
+export const UpdateAllModal = ({ isOpen, onDismiss, isLoading, plugins }: Props) => {
   const install = useInstall();
   const { error } = useInstallStatus();
   const [errorMap, setErrorMap] = useState(new Map<string, UpdateError>());
@@ -195,11 +196,11 @@ export const UpdateAllModal = ({ isOpen, onDismiss, plugins }: Props) => {
 
   // Initialize the component with all the plugins selected
   useEffect(() => {
-    if (selectedPlugins === undefined && plugins.length > 0) {
+    if (selectedPlugins === undefined && plugins.length > 0 && !isLoading) {
       const initialSelectedPlugins = new Set(plugins.map((plugin) => plugin.id));
       setSelectedPlugins(initialSelectedPlugins);
     }
-  }, [plugins, selectedPlugins]);
+  }, [isLoading, plugins, selectedPlugins]);
 
   // Updates the component state on every error that comes from the store
   useEffect(() => {
@@ -265,6 +266,8 @@ export const UpdateAllModal = ({ isOpen, onDismiss, plugins }: Props) => {
     }
   };
 
+  const pluginsSelected = selectedPlugins?.size || 0;
+
   return (
     <ConfirmModal
       isOpen={isOpen}
@@ -280,10 +283,10 @@ export const UpdateAllModal = ({ isOpen, onDismiss, plugins }: Props) => {
       }
       onConfirm={installsRemaining > 0 ? onConfirm : onDismissClick}
       onDismiss={onDismissClick}
-      disabled={selectedPlugins?.size === 0 || inProgress}
+      disabled={pluginsSelected === 0 || inProgress}
       confirmText={
         installsRemaining > 0
-          ? `${t('plugins.catalog.update-all.modal-confirmation', 'Update')} (${selectedPlugins?.size})`
+          ? `${t('plugins.catalog.update-all.modal-confirmation', 'Update')} (${pluginsSelected})`
           : t('plugins.catalog.update-all.modal-dismiss', 'Close')
       }
     />

public/app/features/plugins/admin/helpers.test.ts

@@ -203,6 +203,7 @@ describe('Plugins/Helpers', () => {
         isInstalled: false,
         isDeprecated: false,
         isPublished: true,
+        latestVersion: '4.1.5',
         isManaged: false,
         isPreinstalled: { found: false, withVersion: false },
         name: 'Zabbix',
@@ -335,6 +336,7 @@ describe('Plugins/Helpers', () => {
         isEnterprise: false,
         isInstalled: true,
         isPublished: true,
+        latestVersion: '4.1.5',
         isDeprecated: false,
         isManaged: false,
         isPreinstalled: { found: false, withVersion: false },

public/app/features/plugins/admin/helpers.ts

@@ -152,6 +152,7 @@ export function mapRemoteToCatalog(plugin: RemotePlugin, error?: PluginError): C
     error: error?.errorCode,
     angularDetected,
     isFullyInstalled: isDisabled,
+    latestVersion: plugin.version,
   };
 }
 
@@ -264,6 +265,7 @@ export function mapToCatalogPlugin(local?: LocalPlugin, remote?: RemotePlugin, e
     angularDetected: local?.angularDetected ?? remote?.angularDetected,
     isFullyInstalled: Boolean(local) || isDisabled,
     iam: local?.iam,
+    latestVersion: local?.latestVersion || remote?.version || '',
   };
 }
 

public/app/features/plugins/admin/pages/Browse.tsx

@@ -48,9 +48,9 @@ export default function Browse({ route }: GrafanaRouteComponentProps): ReactElem
     { value: 'has-update', label: 'New Updates' },
   ];
 
-  const updatablePlugins = useGetUpdatable();
+  const { isLoading: areUpdatesLoading, updatablePlugins } = useGetUpdatable();
   const [showUpdateModal, setShowUpdateModal] = useState(false);
-  const disableUpdateAllButton = updatablePlugins.length <= 0;
+  const disableUpdateAllButton = updatablePlugins.length <= 0 || areUpdatesLoading;
 
   const onSortByChange = (value: SelectableValue<string>) => {
     history.push({ query: { sortBy: value.value } });
@@ -90,7 +90,7 @@ export default function Browse({ route }: GrafanaRouteComponentProps): ReactElem
   const updateAll = (
     <Button disabled={disableUpdateAllButton} onClick={onUpdateAll}>
       <Trans i18nKey="plugins.catalog.update-all.button">Update all</Trans>
-      {!disableUpdateAllButton ? ` (${updatablePlugins.length})` : ''}
+      {disableUpdateAllButton ? '' : ` (${updatablePlugins.length})`}
     </Button>
   );
 
@@ -165,6 +165,7 @@ export default function Browse({ route }: GrafanaRouteComponentProps): ReactElem
         <RoadmapLinks />
         <UpdateAllModal
           isOpen={showUpdateModal}
+          isLoading={areUpdatesLoading}
           onDismiss={() => setShowUpdateModal(false)}
           plugins={updatablePlugins}
         />

public/app/features/plugins/admin/state/hooks.ts

@@ -35,8 +35,12 @@ export const useGetAll = (filters: PluginFilters, sortBy: Sorters = Sorters.name
 };
 
 export const useGetUpdatable = () => {
-  const { plugins: installed } = useGetAll({ isInstalled: true });
-  return installed.filter((p) => !p.isCore && !p.isManaged && !p.isProvisioned && p.hasUpdate && p.latestVersion);
+  const { isLoading } = useFetchStatus();
+  const updatablePlugins = useSelector(selectPlugins({ isInstalled: true, hasUpdate: true }));
+  return {
+    isLoading,
+    updatablePlugins,
+  };
 };
 
 export const useGetSingle = (id: string): CatalogPlugin | undefined => {

public/app/features/plugins/admin/state/selectors.ts

@@ -65,6 +65,16 @@ export const selectPlugins = (filters: PluginFilters) =>
         return false;
       }
 
+      // plugins not controlled by the user should not be shown as updatable
+      if (
+        filters.hasUpdate !== undefined &&
+        filters.hasUpdate &&
+        plugin.hasUpdate &&
+        (plugin.isCore || plugin.isManaged || plugin.isProvisioned || plugin.isUpdatingFromInstance)
+      ) {
+        return false;
+      }
+
       return true;
     });
   });