openshift / console

OpenShift Cluster Console UI
https://www.openshift.org
Apache License 2.0
399 stars 607 forks source link

question: best practice for generating LazyActionMenu list actions #12244

Open mikaello opened 1 year ago

mikaello commented 1 year ago

I have a CRD that currently only have a details page, from where I can open an actions menu with edit and delete actions. Example:

image

I have created a dynamic plugin to be able to list all of my CRDs in a project, and where I want to have the action menu for each row. It seems to me that the LazyActionMenu component is perfect fit for this, and is simple to add:

+ import LazyActionMenu from "@openshift-console/dynamic-plugin-sdk-internal";

+ const modelToRef = (model: ExtensionK8sModel) => `${model.group}~${model.version}~${model.kind}`;

  const columns: TableColumn<ApplicationK8sResource>[] = [
    { title: "Name", transforms: [sortable], sort: "metadata.name", id: "name", },
    { title: "Status", id: "status", },
+   { title: "", id: "menuActions", },
  ];

  const ApplicationRow: React.FC<RowProps<ApplicationK8sResource>> = ({ obj, activeColumnIDs, }) => {
    return (
      <>
        <TableData ...>...</TableData>
        <TableData ...>...</TableData>
+       <TableData id={columns[2].id} activeColumnIDs={activeColumnIDs}>
+         <LazyActionMenu
+           context={{ [modelToRef(applicationGvk)]: obj }}
+         />
+       </TableData>
      </>
    );
  };

This results only in an empty action menu (i.e., it found no actions):

image

That is because I need to add a console.action/resource-provider. The documentation for this is sparse, and there are no examples in the dynamic-demo-plugin. And when browsing resource providers and action creators in console/frontend/packages/console-app, I notice that some building blocks (components and helper functions) are not exposed trough your published NPM packages. For example, the modals (e.g., the delete-modal).

I then wonder if you got some examples or tip on best practices for developing (or reusing) functionality for resource-providers?

And it would be very helpful if you could publish more of the functionality/components that you use internally, e.g., the modals and reusable actions (like common-factory.ts).

openshift-bot commented 1 year ago

Issues go stale after 90d of inactivity.

Mark the issue as fresh by commenting /remove-lifecycle stale. Stale issues rot after an additional 30d of inactivity and eventually close. Exclude this issue from closing by commenting /lifecycle frozen.

If this issue is safe to close now please do so with /close.

/lifecycle stale

mikaello commented 1 year ago

/lifecycle frozen

mikaello commented 1 year ago

The request for exposing modals are partly addressed in https://github.com/openshift/console/pull/12785

omkar-trilio commented 1 year ago

I'm running into the same issue. Trying to build a page to list my CRDs and I need the same actions that we see on the details page - Edit, Delete, Edit Labels, and Edit Annotations. In the console-app, a lot of components simply use the LazyActionMenu component which I'm assuming provides all the above (common) actions out of the box (like it does on the details page). Yet, I'm seeing an empty menu. Am I missing something?