Reordering cluster popup action buttons - ArcGIS API for Javascript / ArcGIS Maps SDK for JavaScript

In a code like this one is there any possiblity to reorder the action buttons like in the image below ?

Image - Cluster popup reordered action buttons

I tried with the code below but it does not work. Actions get duplicated every time a popup is opened.

reactiveUtils.when(
  () => view.popup?.viewModel?.active,
  //() => view.popup?.viewModel?.visible,
  () => {
    if (view.popup.selectedFeature.isAggregate) {
                
      const allActions = view.popup.viewModel.allActions.clone();
                
      const browseAction = allActions.at(4);
      allActions.reorder(browseAction, 0);
                
      const convexHullAction = allActions.at(2);
      allActions.reorder(convexHullAction, 4);
                
      const statisticsAction = allActions.at(1);
      allActions.reorder(statisticsAction, 2);
                
      //allActions.forEach((action) => console.log(action.id));

      view.popup.actions.removeAll(); // DOES NOT WORK BECAUSE actions PROPERTY IS ALREADY EMPTY
      //view.popup.selectedFeature.layer.popupTemplate.actions.removeAll();
                
      //view.popup.viewModel.overwriteActions = true;
      //view.popup.viewModel.includeDefaultActions = false;
                
      view.popup.actions = allActions; // ACTIONS GET DUPLICATED.
      // WHAT IS WORSE IS THAT THEY DUPLICATE EVERY TIME POPUP IS ACTIVATED BECAUSE OF reactiveUtils.when(() => view.popup?.viewModel?.active, ...)
      //view.popup.selectedFeature.layer.popupTemplate.actions = allActions;
    }
  }
);

Could you please help me ?

Solution

Instead of adding the reactiveUtils.when(() => view.popup?.viewModel?.active, ...) method to reorder the actions, perhaps you could just set the actions you want in the popup Template:

The sample you linked to is creating a FeatureReductionCluster and applying it to the feature layer when it calls layer.featureReduction. This, I believe, is essentially defining how to create the aggregate features, and it also sets the popup template for those aggregate features. You could try the following:

Remove that reactiveUtils.when(() => view.popup?.viewModel?.active, ...) method, then

Find this code...

popupTemplate.actions = [
    {
      title: "Statistics",
      id: "statistics",
      className: "esri-icon-line-chart"
    },
    {
      title: "Convex hull",
      id: "convex-hull",
      className: "esri-icon-polygon"
    },
    {
      title: "Show features",
      id: "show-features",
      className: "esri-icon-maps"
    }
];

... and replace it with this code, and see if it gives you what you want:

popupTemplate.actions = [
    {
      title: "Browse features",
      id: "browse-clustered-features",
      className: "esri-icon-table"
    },
    {
      title: "Show features",
      id: "show-features",
      className: "esri-icon-maps"
    },
    {
      title: "Statistics",
      id: "statistics",
      className: "esri-icon-line-chart"
    },
    {
      title: "Zoom to",
      id: "zoom-to-clustered-features",
      className: "esri-icon-zoom-in-magnifying-glass"
    },
    {
      title: "Convex hull",
      id: "convex-hull",
      className: "esri-icon-polygon"
    }
  ];
  // Note this line is added to prevent adding 
  // the default actions, as you want to place
  // those yourself in the order you want.
  popupTemplate.overwriteActions = true;