CONSOLE-3565: Expose useAnnotationsModal hook in dynamic plugin SDK

- Factor out AnnotationsModal component from annotationsModal launcher
- Factor out ModalWrapper from createModalLauncher and export as internal API from SDK
- Move ModalWrapperProps, TagsModalProps, and AnnotationsModalProps to SDK internal types
- Implement useAnnotationsModal hook in dynamic plugin SDK and use in core details page component
- Improve SDK ModalComponent prop types
- Fix useModal hook example in SDK docs
- Address some minor tech debt issues in modal factory

Author: TheRealJon

frontend/packages/console-dynamic-plugin-sdk/docs/api.md

@@ -2051,7 +2051,7 @@ A hook to launch Modals.
 
 ```tsx
 const AppPage: React.FC = () => {
- const [launchModal] = useModal();
+ const launchModal = useModal();
  const onClick = () => launchModal(ModalComponent);
  return (
    <Button onClick={onClick}>Launch a Modal</Button>

frontend/packages/console-dynamic-plugin-sdk/src/api/internal-api.ts

@@ -21,6 +21,8 @@ import {
   QuickStartsLoaderProps,
   UseURLPoll,
   UseLastNamespace,
+  AnnotationsModalProps,
+  ModalWrapperProps,
 } from './internal-types';
 
 export const ActivityItem: React.FC<ActivityItemProps> = require('@console/shared/src/components/dashboard/activity-card/ActivityItem')
@@ -69,4 +71,7 @@ export const useURLPoll: UseURLPoll = require('@console/internal/components/util
   .useURLPoll;
 export const useLastNamespace: UseLastNamespace = require('@console/app/src/components/detect-namespace/useLastNamespace')
   .useLastNamespace;
-
+export const ModalWrapper: React.FC<ModalWrapperProps> = require('@console/internal/components/factory/modal')
+  .ModalWrapper;
+export const AnnotationsModal: React.FC<AnnotationsModalProps> = require('@console/internal/components/modals/tags')
+  .AnnotationsModal;

frontend/packages/console-dynamic-plugin-sdk/src/api/internal-types.ts

@@ -294,3 +294,21 @@ export type UseURLPoll = <R>(
   delay?: number,
   ...dependencies: any[]
 ) => [R, any, boolean];
+
+export type ModalWrapperProps = {
+  blocking?: boolean;
+  className?: string;
+  onClose?: (event?: React.SyntheticEvent) => void;
+};
+
+export type TagsModalProps = {
+  cancel?: () => void;
+  close?: () => void;
+  kind: K8sModel;
+  path: string;
+  resource: K8sResourceCommon;
+  tags?: { [key: string]: string };
+  titleKey: string;
+};
+
+export type AnnotationsModalProps = Omit<TagsModalProps, 'path' | 'tags' | 'titleKey'>;

frontend/packages/console-dynamic-plugin-sdk/src/app/components/modals/useAnnotationsModal.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { AnnotationsModalProps } from '../../../api/internal-types';
+import { K8sResourceCommon, getGroupVersionKindForResource, useK8sModel } from '../../../lib-core';
+import { AnnotationsModal, ModalWrapper } from '../../../lib-internal';
+import { ModalComponent } from '../../modal-support/ModalProvider';
+import { useModal } from '../../modal-support/useModal';
+
+type UseAnnotationsModal = (resource: K8sResourceCommon) => () => void;
+
+const AnnotationsModalComponent: ModalComponent<AnnotationsModalProps> = ({
+  closeModal,
+  kind,
+  resource,
+}) => {
+  return (
+    <ModalWrapper blocking onClose={closeModal}>
+      <AnnotationsModal cancel={closeModal} close={closeModal} kind={kind} resource={resource} />
+    </ModalWrapper>
+  );
+};
+
+/**
+ * A hook for launching a modal for editing a resource's annotations.
+ *
+ * @hook useAnnotationsModal
+ * @argument resource - The resource to edit annotations for.
+ * @returns a function which will launch a modal for editing a resource's annotations.
+ * @example
+ * const PodAnnotationsButton = ({ pod }) => {
+ *   const launchAnnotationsModal = useAnnotationsModal<PodKind>(pod);
+ *   return <button onClick={launchAnnotationsModal}>Edit Pod Annotations</button>
+ * }
+ */
+export const useAnnotationsModal: UseAnnotationsModal = (resource) => {
+  const launcher = useModal();
+  const groupVersionKind = getGroupVersionKindForResource(resource);
+  const [kind] = useK8sModel(groupVersionKind);
+  return React.useCallback(
+    () =>
+      resource &&
+      kind &&
+      launcher<AnnotationsModalProps>(AnnotationsModalComponent, { kind, resource }),
+    [launcher, kind, resource],
+  );
+};

frontend/packages/console-dynamic-plugin-sdk/src/app/modal-support/ModalProvider.tsx

@@ -1,43 +1,40 @@
 import * as React from 'react';
-import * as _ from 'lodash';
 
 type CloseModal = () => void;
 
-export type ModalComponent = React.FC<{
-  closeModal: CloseModal;
-  [key: string]: unknown;
-}>;
+type UnknownProps = { [key: string]: unknown };
+export type ModalComponent<P = UnknownProps> = React.FC<P & { closeModal: CloseModal }>;
 
-export type LaunchModal = (component: ModalComponent, extraProps: Record<string, unknown>) => void;
+export type LaunchModal = <P = UnknownProps>(component: ModalComponent<P>, extraProps: P) => void;
 
 type ModalContextValue = {
   launchModal: LaunchModal;
   closeModal: CloseModal;
 };
 
 export const ModalContext = React.createContext<ModalContextValue>({
-  launchModal: _.noop,
-  closeModal: _.noop,
+  launchModal: () => {},
+  closeModal: () => {},
 });
 
 export const ModalProvider: React.FC = ({ children }) => {
   const [isOpen, setOpen] = React.useState(false);
   const [Component, setComponent] = React.useState<ModalComponent>();
-  const [componentProps, setComponentProps] = React.useState<unknown>({});
+  const [componentProps, setComponentProps] = React.useState({});
 
-  const launchModal = React.useCallback(
-    (component: ModalComponent, compProps: unknown) => {
+  const launchModal = React.useCallback<LaunchModal>(
+    (component, compProps) => {
       setComponent(() => component);
       setComponentProps(compProps);
       setOpen(true);
     },
     [setOpen, setComponent, setComponentProps],
   );
-  const closeModal = React.useCallback(() => setOpen(false), [setOpen]);
+  const closeModal = React.useCallback<CloseModal>(() => setOpen(false), [setOpen]);
 
   return (
     <ModalContext.Provider value={{ launchModal, closeModal }}>
-      {isOpen && !!Component && <Component {...(componentProps as {})} closeModal={closeModal} />}
+      {isOpen && !!Component && <Component {...componentProps} closeModal={closeModal} />}
       {children}
     </ModalContext.Provider>
   );

frontend/packages/console-dynamic-plugin-sdk/src/app/modal-support/useModal.ts

@@ -8,7 +8,7 @@ type UseModalLauncher = () => LaunchModal;
  * @example
  *```tsx
  * const AppPage: React.FC = () => {
- *  const [launchModal] = useModal();
+ *  const launchModal = useModal();
  *  const onClick = () => launchModal(ModalComponent);
  *  return (
  *    <Button onClick={onClick}>Launch a Modal</Button>

frontend/public/components/factory/modal.tsx

@@ -1,75 +1,84 @@
+import * as classNames from 'classnames';
+import * as Modal from 'react-modal';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
-import * as Modal from 'react-modal';
 import { Router } from 'react-router-dom';
 import { CompatRouter } from 'react-router-dom-v5-compat';
-import * as classNames from 'classnames';
-import * as _ from 'lodash-es';
-import { ActionGroup, Button, Text, TextContent, TextVariants } from '@patternfly/react-core';
 import { useTranslation } from 'react-i18next';
-import i18next from 'i18next';
+import { ActionGroup, Button, Text, TextContent, TextVariants } from '@patternfly/react-core';
+import { ModalWrapperProps } from '@console/dynamic-plugin-sdk/src/api/internal-types';
 import CloseButton from '@console/shared/src/components/close-button';
-
 import store from '../../redux';
 import { ButtonBar } from '../utils/button-bar';
 import { history } from '../utils/router';
 
-export const createModal: CreateModal = (getModalContainer) => {
-  const modalContainer = document.getElementById('modal-container');
+export const createModal: CreateModal = (getModalElement) => {
+  const containerElement = document.getElementById('modal-container');
   const result = new Promise<void>((resolve) => {
     const closeModal = (e?: React.SyntheticEvent) => {
       if (e && e.stopPropagation) {
         e.stopPropagation();
       }
-      ReactDOM.unmountComponentAtNode(modalContainer);
+      ReactDOM.unmountComponentAtNode(containerElement);
       resolve();
     };
     Modal.setAppElement(document.getElementById('app-content'));
-    modalContainer && ReactDOM.render(getModalContainer(closeModal), modalContainer);
+    containerElement && ReactDOM.render(getModalElement(closeModal), containerElement);
   });
   return { result };
 };
 
-export const createModalLauncher: CreateModalLauncher = (Component, modalWrapper = true) => (
-  props,
-) => {
+export const ModalWrapper: React.FC<ModalWrapperProps> = ({
+  blocking,
+  className,
+  children,
+  onClose,
+}) => {
+  const { t } = useTranslation();
+  const parentSelector = React.useCallback(() => document.querySelector('#modal-container'), []);
+  return (
+    <Modal
+      className={classNames('modal-dialog', className)}
+      contentLabel={t('public~Modal')}
+      isOpen
+      onRequestClose={onClose}
+      overlayClassName="co-overlay"
+      parentSelector={parentSelector}
+      shouldCloseOnOverlayClick={!blocking}
+    >
+      {children}
+    </Modal>
+  );
+};
+
+export const createModalLauncher: CreateModalLauncher = (Component, modalWrapper = true) => ({
+  blocking,
+  modalClassName,
+  close,
+  cancel,
+  ...props
+}) => {
   const getModalContainer: GetModalContainer = (onClose) => {
-    const _handleClose = (e: React.SyntheticEvent) => {
-      onClose && onClose(e);
-      props.close && props.close();
+    const handleClose = (e: React.SyntheticEvent) => {
+      onClose?.(e);
+      close?.();
     };
-    const _handleCancel = (e: React.SyntheticEvent) => {
-      props.cancel && props.cancel();
-      _handleClose(e);
+    const handleCancel = (e: React.SyntheticEvent) => {
+      cancel?.();
+      handleClose(e);
     };
 
     return (
       <Provider store={store}>
         <Router {...{ history, basename: window.SERVER_FLAGS.basePath }}>
           <CompatRouter>
             {modalWrapper ? (
-              <Modal
-                isOpen={true}
-                contentLabel={i18next.t('public~Modal')}
-                onRequestClose={_handleClose}
-                className={classNames('modal-dialog', props.modalClassName)}
-                overlayClassName="co-overlay"
-                shouldCloseOnOverlayClick={!props.blocking}
-                parentSelector={() => document.getElementById('modal-container')}
-              >
-                <Component
-                  {...(_.omit(props, 'blocking', 'modalClassName') as any)}
-                  cancel={_handleCancel}
-                  close={_handleClose}
-                />
-              </Modal>
+              <ModalWrapper blocking={blocking} className={modalClassName} onClose={handleClose}>
+                <Component {...(props as any)} cancel={handleCancel} close={handleClose} />
+              </ModalWrapper>
             ) : (
-              <Component
-                {...(_.omit(props, 'blocking', 'modalClassName') as any)}
-                cancel={_handleCancel}
-                close={_handleClose}
-              />
+              <Component {...(props as any)} cancel={handleCancel} close={handleClose} />
             )}
           </CompatRouter>
         </Router>
@@ -79,7 +88,7 @@ export const createModalLauncher: CreateModalLauncher = (Component, modalWrapper
   return createModal(getModalContainer);
 };
 
-export const ModalTitle: React.SFC<ModalTitleProps> = ({
+export const ModalTitle: React.FC<ModalTitleProps> = ({
   children,
   className = 'modal-header',
   close,
@@ -102,13 +111,13 @@ export const ModalTitle: React.SFC<ModalTitleProps> = ({
   </div>
 );
 
-export const ModalBody: React.SFC<ModalBodyProps> = ({ children }) => (
+export const ModalBody: React.FC<ModalBodyProps> = ({ children }) => (
   <div className="modal-body">
     <div className="modal-body-content">{children}</div>
   </div>
 );
 
-export const ModalFooter: React.SFC<ModalFooterProps> = ({
+export const ModalFooter: React.FC<ModalFooterProps> = ({
   message,
   errorMessage,
   inProgress,
@@ -126,7 +135,7 @@ export const ModalFooter: React.SFC<ModalFooterProps> = ({
   );
 };
 
-export const ModalSubmitFooter: React.SFC<ModalSubmitFooterProps> = ({
+export const ModalSubmitFooter: React.FC<ModalSubmitFooterProps> = ({
   message,
   errorMessage,
   inProgress,
@@ -137,7 +146,7 @@ export const ModalSubmitFooter: React.SFC<ModalSubmitFooterProps> = ({
   submitDisabled,
   submitDanger,
   buttonAlignment = 'right',
-  resetText = i18next.t('public~Reset'),
+  resetText,
   reset,
 }) => {
   const { t } = useTranslation();
@@ -163,31 +172,21 @@ export const ModalSubmitFooter: React.SFC<ModalSubmitFooterProps> = ({
     </Button>
   );
 
-  const submitButton = submitDanger ? (
+  const submitButton = (
     <Button
-      type="submit"
-      variant="danger"
-      isDisabled={submitDisabled}
       data-test="confirm-action"
       id="confirm-action"
-    >
-      {submitText}
-    </Button>
-  ) : (
-    <Button
-      type="submit"
-      variant="primary"
       isDisabled={submitDisabled}
-      data-test="confirm-action"
-      id="confirm-action"
+      type="submit"
+      variant={submitDanger ? 'danger' : 'primary'}
     >
-      {submitText}
+      {submitText || t('public~Submit')}
     </Button>
   );
 
   const resetButton = (
     <Button variant="link" isInline onClick={onResetClick} id="reset-action">
-      {resetText}
+      {resetText || t('public~Reset')}
     </Button>
   );