Custom admin button not showing

Questions and Answers Strapi Admin
1
System Information
  • Strapi Version: ^4
  • Operating System: macos ventura
  • Database: mysql
  • Node Version: 18
  • NPM Version:
  • Yarn Version: 1.22.19

I want to extend the admin UI as described here Admin panel customization | Strapi Documentation in the second point. A Strapi user only needs to extend a specific instance of a Strapi application.

To do so I have created the file app.ts in src/admin as:

import FetchProducts from './extensions/components/fetchProducts/fetchProducts';

export default {
  bootstrap(app) {
    app.injectContentManagerComponent('listView', 'actions', {
      name: 'FetchProductsButton',
      Component: FetchProducts,
    });
  },
};

and I have created the file fetchProducts.tsx in src/admin/extensions/components/fetchProducts

// @ts-nocheck
import React from 'react';
import { Button } from '@strapi/design-system';
import Bell from '@strapi/icons';

const fetchProducts = () => {
  return (
    <Button
      variant="secondary"
      startIcon={<Bell />}
      onClick={() => alert('Hello World')}
    >
      Hello World
    </Button>
  );
};

export default fetchProducts;

It is supposed to show somewhere here:

image
image1830×122 2.32 KB

But I can’t make it work.

I don’t know what else can I be missing.

thanks in advance.