openshift / openshift/console

question: best practice for generating LazyActionMenu list actions

Open
#12,244 4 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

lifecycle/frozen
Dominant language
TypeScript
Stars
460
Forks
756
Avg merge
4d 2h
Merged PRs (30d)
88

Description

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).

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the LazyActionMenu usage shown here, the console.action/resource-provider documentation, and the dynamic-demo-plugin, then compare the referenced delete-modal and common-factory.ts files. Done would require a concrete decision on examples or documentation for resource providers and which internal components or actions should be published.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
developer-experience, documentation
Issue type
Documentation
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
20/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.