about-dynamic-plug-ins.adoc

About dynamic plug-ins

A dynamic plug-in allows you to add custom pages and other extensions to your interface at runtime. The ConsolePlugin custom resource registers plug-ins with the console, and a cluster administrator enables plug-ins in the console-operator configuration.

Key features

A dynamic plug-in allows you to make the following customizations to the {product-title} experience:

• Add custom pages.

• Add perspectives and update navigation items.

• Add tabs and actions to resource pages.

PatternFly 4 guidelines

When creating your plug-in, follow these guidelines for using PatternFly:

• Use PatternFly4 components and PatternFly CSS variables. Core PatternFly components are available through the SDK. Using PatternFly components and variables will help your plug-in look consistent in future console versions.

• Make your plug-in accessible by following PatternFly’s accessibility fundamentals.

• Do not use other CSS libraries such as Bootstrap or Tailwind. They can conflict with PatternFly and will not match the console look and feel.

General guidelines

When creating your plug-in, follow these general guidelines:

• Prefix your CSS class names with your plug-in name to avoid collisions. For example, my-plugin__heading and my-plugin_\_icon.

• Maintain a consistent look, feel, and behavior with other console pages.

• Follow react-i18next localization guidelines when creating your plug-in. You can use the useTranslation hook like the one in the following example:

  conster Header: React.FC = () => {
    const { t } = useTranslation('plugin__console-demo-plugin');
    return <h1>{t('Hello, World!')}</h1>;
  };

• Do not use console CSS classes in your markup or override console CSS classes. These are not APIs and are subject to change. Using them might break your plug-in. Avoid selectors like element selectors that could affect markup outside of your plug-in’s components.