diff --git a/frontend/package.json b/frontend/package.json index 8ae3956441a..16a2ce8f677 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -214,7 +214,6 @@ "react-helmet-async": "^2.0.5", "react-i18next": "~15.1.4", "react-linkify": "^0.2.2", - "react-modal": "^3.16.3", "react-redux": "8.1.3", "react-router": "5.3.x", "react-router-dom": "5.3.x", diff --git a/frontend/packages/console-app/src/actions/creators/hpa-factory.ts b/frontend/packages/console-app/src/actions/creators/hpa-factory.ts index 4dc2224b4bf..16eaf393e42 100644 --- a/frontend/packages/console-app/src/actions/creators/hpa-factory.ts +++ b/frontend/packages/console-app/src/actions/creators/hpa-factory.ts @@ -111,7 +111,9 @@ export const useHPAActions = (kindObj: K8sKind, resource: K8sResourceKind) => { }, }, ]; - }, [kindObj, launchModal, relatedHPAs, resource, supportsHPA]); + // Missing launchModal dependency causes max depth exceeded error + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [kindObj, relatedHPAs, resource, supportsHPA]); const result = useMemo<[Action[], HorizontalPodAutoscalerKind[]]>(() => { return [actions, relatedHPAs]; diff --git a/frontend/packages/console-app/src/actions/hooks/useCommonActions.ts b/frontend/packages/console-app/src/actions/hooks/useCommonActions.ts index 7f8c45096b6..08ded488140 100644 --- a/frontend/packages/console-app/src/actions/hooks/useCommonActions.ts +++ b/frontend/packages/console-app/src/actions/hooks/useCommonActions.ts @@ -7,10 +7,10 @@ import { LazyAnnotationsModalOverlay, LazyDeleteModalOverlay, LazyLabelsModalOverlay, + LazyTaintsModalOverlay, LazyTolerationsModalOverlay, } from '@console/internal/components/modals'; import { useConfigureCountModal } from '@console/internal/components/modals/configure-count-modal'; -import { TaintsModalOverlay } from '@console/internal/components/modals/taints-modal'; import { asAccessReview } from '@console/internal/components/utils/rbac'; import { resourceObjPath } from '@console/internal/components/utils/resource-link'; import type { K8sModel, K8sResourceKind, NodeKind } from '@console/internal/module/k8s'; @@ -135,7 +135,6 @@ export const useCommonActions = ( launchModal(LazyTolerationsModalOverlay, { resourceKind: kind, resource, - modalClassName: 'modal-lg', }), accessReview: asAccessReview(kind as K8sModel, resource as K8sResourceKind, 'patch'), }), @@ -143,7 +142,7 @@ export const useCommonActions = ( id: 'edit-taints', label: t('console-app~Edit taints'), cta: () => - launchModal(TaintsModalOverlay, { + launchModal(LazyTaintsModalOverlay, { resourceKind: kind, resource: resource as NodeKind, }), diff --git a/frontend/packages/console-app/src/components/modals/add-group-users-modal.tsx b/frontend/packages/console-app/src/components/modals/add-group-users-modal.tsx index 8e045f1825a..42542491b63 100644 --- a/frontend/packages/console-app/src/components/modals/add-group-users-modal.tsx +++ b/frontend/packages/console-app/src/components/modals/add-group-users-modal.tsx @@ -15,7 +15,7 @@ import { k8sPatchResource } from '@console/dynamic-plugin-sdk/src/utils/k8s'; import { ListInput } from '@console/internal/components/utils/list-input'; import { GroupModel } from '@console/internal/models'; import type { GroupKind } from '@console/internal/module/k8s'; -import type { ModalComponentProps } from 'public/components/factory/modal'; +import type { ModalComponentProps } from '@console/shared/src/types/modal'; type AddGroupUsersModalProps = { group: GroupKind; diff --git a/frontend/packages/console-app/src/components/modals/clone/clone-pvc-modal.tsx b/frontend/packages/console-app/src/components/modals/clone/clone-pvc-modal.tsx index eef2bd9b2f1..ff72e66dcfd 100644 --- a/frontend/packages/console-app/src/components/modals/clone/clone-pvc-modal.tsx +++ b/frontend/packages/console-app/src/components/modals/clone/clone-pvc-modal.tsx @@ -22,7 +22,6 @@ import { import { useTranslation } from 'react-i18next'; import { useNavigate } from 'react-router-dom-v5-compat'; import type { OverlayComponent } from '@console/dynamic-plugin-sdk/src/app/modal-support/OverlayProvider'; -import type { ModalComponentProps } from '@console/internal/components/factory'; import type { DataPoint } from '@console/internal/components/graphs'; import { PrometheusEndpoint } from '@console/internal/components/graphs/helpers'; import { usePrometheusPoll } from '@console/internal/components/graphs/prometheus-poll-hook'; @@ -53,6 +52,7 @@ import { k8sCreate, referenceFor } from '@console/internal/module/k8s'; import { ModalFooterWithAlerts } from '@console/shared/src/components/modals/ModalFooterWithAlerts'; import { usePromiseHandler } from '@console/shared/src/hooks/promise-handler'; import { getName, getRequestedPVCSize, onlyPvcSCs } from '@console/shared/src/selectors'; +import type { ModalComponentProps } from '@console/shared/src/types/modal'; import { isCephProvisioner } from '@console/shared/src/utils/storage-utils'; import { getPVCAccessModes, AccessModeSelector } from '../../access-modes/access-mode'; diff --git a/frontend/packages/console-app/src/components/modals/resource-limits/ResourceLimitsModalLauncher.tsx b/frontend/packages/console-app/src/components/modals/resource-limits/ResourceLimitsModalLauncher.tsx index 5a35dc59b13..ecde01af4d4 100644 --- a/frontend/packages/console-app/src/components/modals/resource-limits/ResourceLimitsModalLauncher.tsx +++ b/frontend/packages/console-app/src/components/modals/resource-limits/ResourceLimitsModalLauncher.tsx @@ -7,10 +7,10 @@ import { useTranslation } from 'react-i18next'; import * as yup from 'yup'; import { limitsValidationSchema } from '@console/dev-console/src/components/import/validation-schema'; import type { OverlayComponent } from '@console/dynamic-plugin-sdk/src/app/modal-support/OverlayProvider'; -import type { ModalComponentProps } from '@console/internal/components/factory'; import type { K8sKind, K8sResourceKind } from '@console/internal/module/k8s'; import { k8sPatch } from '@console/internal/module/k8s'; import { getLimitsDataFromResource, getResourceLimitsData } from '@console/shared/src'; +import type { ModalComponentProps } from '@console/shared/src/types/modal'; import ResourceLimitsModal from './ResourceLimitsModal'; export type ResourceLimitsModalLauncherProps = { diff --git a/frontend/packages/console-app/src/components/modals/restore-pvc/restore-pvc-modal.tsx b/frontend/packages/console-app/src/components/modals/restore-pvc/restore-pvc-modal.tsx index 0dfcd92341d..23c6d38da8d 100644 --- a/frontend/packages/console-app/src/components/modals/restore-pvc/restore-pvc-modal.tsx +++ b/frontend/packages/console-app/src/components/modals/restore-pvc/restore-pvc-modal.tsx @@ -19,7 +19,6 @@ import { Trans, useTranslation } from 'react-i18next'; import { useNavigate } from 'react-router-dom-v5-compat'; import { VolumeModeSelector } from '@console/app/src/components/volume-modes/volume-mode'; import type { OverlayComponent } from '@console/dynamic-plugin-sdk/src/app/modal-support/OverlayProvider'; -import type { ModalComponentProps } from '@console/internal/components/factory'; import { dropdownUnits, snapshotPVCStorageClassAnnotation, @@ -54,6 +53,7 @@ import { Status } from '@console/shared/src/components/status/Status'; import { usePromiseHandler } from '@console/shared/src/hooks/promise-handler'; import { getName, getNamespace, getAnnotations } from '@console/shared/src/selectors/common'; import { onlyPvcSCs } from '@console/shared/src/selectors/storage'; +import type { ModalComponentProps } from '@console/shared/src/types/modal'; import { isCephProvisioner } from '@console/shared/src/utils/storage-utils'; import { AccessModeSelector } from '../../access-modes/access-mode'; diff --git a/frontend/packages/console-app/src/components/nodes/modals/ConfigureUnschedulableModal.tsx b/frontend/packages/console-app/src/components/nodes/modals/ConfigureUnschedulableModal.tsx index 50ed9d96086..3ecf80dc0a8 100644 --- a/frontend/packages/console-app/src/components/nodes/modals/ConfigureUnschedulableModal.tsx +++ b/frontend/packages/console-app/src/components/nodes/modals/ConfigureUnschedulableModal.tsx @@ -3,10 +3,10 @@ import { useState } from 'react'; import { Button, Modal, ModalBody, ModalHeader, ModalVariant } from '@patternfly/react-core'; import { useTranslation } from 'react-i18next'; import type { OverlayComponent } from '@console/dynamic-plugin-sdk/src/app/modal-support/OverlayProvider'; -import type { ModalComponentProps } from '@console/internal/components/factory/modal'; import type { NodeKind } from '@console/internal/module/k8s'; import { ModalFooterWithAlerts } from '@console/shared/src/components/modals/ModalFooterWithAlerts'; import { usePromiseHandler } from '@console/shared/src/hooks/promise-handler'; +import type { ModalComponentProps } from '@console/shared/src/types/modal'; import { makeNodeUnschedulable } from '../../../k8s/requests/nodes'; type ConfigureUnschedulableModalProps = { diff --git a/frontend/packages/console-app/src/components/oauth-config/IdentityProviders.tsx b/frontend/packages/console-app/src/components/oauth-config/IdentityProviders.tsx index bd385836176..9ae86232d2e 100644 --- a/frontend/packages/console-app/src/components/oauth-config/IdentityProviders.tsx +++ b/frontend/packages/console-app/src/components/oauth-config/IdentityProviders.tsx @@ -2,7 +2,7 @@ import type { FC } from 'react'; import { useCallback } from 'react'; import * as _ from 'lodash'; import { useTranslation } from 'react-i18next'; -import { useModal } from '@console/dynamic-plugin-sdk/src/app/modal-support/useModal'; +import { useOverlay } from '@console/dynamic-plugin-sdk/src/app/modal-support/useOverlay'; import { useK8sModel } from '@console/dynamic-plugin-sdk/src/utils/k8s/hooks/useK8sModel'; import { getGroupVersionKindForResource } from '@console/dynamic-plugin-sdk/src/utils/k8s/k8s-ref'; import type { RemoveIdentityProvider } from '@console/internal/components/modals/remove-idp-modal'; @@ -13,13 +13,13 @@ import type { IdentityProvider, OAuthKind } from '@console/internal/module/k8s'; export const IdentityProviders: FC = ({ identityProviders, obj }) => { const { t } = useTranslation(); - const launcher = useModal(); + const launchModal = useOverlay(); const groupVersionKind = getGroupVersionKindForResource(obj); const [model] = useK8sModel(groupVersionKind); - const launchModal = useCallback( + const openRemoveModal = useCallback( (index, name, type) => { if (obj && model) { - launcher(RemoveIdentityProviderModal, { + launchModal(RemoveIdentityProviderModal, { obj, model, index, @@ -28,7 +28,7 @@ export const IdentityProviders: FC = ({ identityProvider }); } }, - [launcher, model, obj], + [launchModal, model, obj], ); return _.isEmpty(identityProviders) ? ( @@ -60,7 +60,7 @@ export const IdentityProviders: FC = ({ identityProvider options={[ { label: t('console-app~Remove identity provider'), - callback: () => launchModal(index, idp.name, idp.type), + callback: () => openRemoveModal(index, idp.name, idp.type), }, ]} /> diff --git a/frontend/packages/console-app/src/components/pdb/modals/DeletePDBModal.tsx b/frontend/packages/console-app/src/components/pdb/modals/DeletePDBModal.tsx index 929abe10fda..b0ce5c443e1 100644 --- a/frontend/packages/console-app/src/components/pdb/modals/DeletePDBModal.tsx +++ b/frontend/packages/console-app/src/components/pdb/modals/DeletePDBModal.tsx @@ -3,11 +3,11 @@ import { useState } from 'react'; import { Button, Form, Modal, ModalBody, ModalHeader, ModalVariant } from '@patternfly/react-core'; import { useTranslation, Trans } from 'react-i18next'; import type { OverlayComponent } from '@console/dynamic-plugin-sdk/src/app/modal-support/OverlayProvider'; -import type { ModalComponentProps } from '@console/internal/components/factory/modal'; import { LoadingInline } from '@console/internal/components/utils/status-box'; import { k8sKill } from '@console/internal/module/k8s'; import { ModalFooterWithAlerts } from '@console/shared/src/components/modals/ModalFooterWithAlerts'; import { usePromiseHandler } from '@console/shared/src/hooks/promise-handler'; +import type { ModalComponentProps } from '@console/shared/src/types/modal'; import { PodDisruptionBudgetModel } from '../../../models'; import type { PodDisruptionBudgetKind } from '../types'; diff --git a/frontend/packages/console-dynamic-plugin-sdk/CHANGELOG-core.md b/frontend/packages/console-dynamic-plugin-sdk/CHANGELOG-core.md index 488fa25d1f5..dcfbfa78514 100644 --- a/frontend/packages/console-dynamic-plugin-sdk/CHANGELOG-core.md +++ b/frontend/packages/console-dynamic-plugin-sdk/CHANGELOG-core.md @@ -12,6 +12,7 @@ table in [Console dynamic plugins README](./README.md). ## 4.22.0-prerelease.2 - TBD +- **Breaking**: Changed `AlertAction` extension to use `LaunchOverlay` instead of `LaunchModal`. The `action` callback parameter is now typed as `LaunchOverlay`, which does not support the optional `id` parameter that `LaunchModal` had. Plugins implementing `console.alert-action` extensions must update their action callbacks accordingly. ([CONSOLE-4447]) - **Breaking**: Removed `pluginID` from the result in `useResolvedExtensions` hook ([CONSOLE-3769], [#15904]) - **Breaking**: Removed `AppInitSDK` and `useReduxStore` in `app` directory ([CONSOLE-5063], [#16019]) - **Deprecated**: `useUserSettings` hook has been renamed to `useUserPreference` for consistency ([OCPBUGS-44612], [#16057]) diff --git a/frontend/packages/console-dynamic-plugin-sdk/docs/console-extensions.md b/frontend/packages/console-dynamic-plugin-sdk/docs/console-extensions.md index 489fce50644..0abfdf1d136 100644 --- a/frontend/packages/console-dynamic-plugin-sdk/docs/console-extensions.md +++ b/frontend/packages/console-dynamic-plugin-sdk/docs/console-extensions.md @@ -158,7 +158,7 @@ This extension can be used to trigger a specific action when a specific Promethe | ---- | ---------- | -------- | ----------- | | `alert` | `string` | no | Alert name as defined by `alert.rule.name` property | | `text` | `string` | no | Action text | -| `action` | `CodeRef<(alert: Alert, launchModal: LaunchModal) => void>` | no | Function to perform side effect | +| `action` | `CodeRef<(alert: Alert, launchModal: LaunchOverlay) => void>` | no | Function to perform side effect | --- diff --git a/frontend/packages/console-dynamic-plugin-sdk/release-notes/4.22.md b/frontend/packages/console-dynamic-plugin-sdk/release-notes/4.22.md index 2210ccd28fd..119c3ad7389 100644 --- a/frontend/packages/console-dynamic-plugin-sdk/release-notes/4.22.md +++ b/frontend/packages/console-dynamic-plugin-sdk/release-notes/4.22.md @@ -18,6 +18,12 @@ Additional updates to these shared modules might occur before the 4.22 release i Support for PatternFly 5.x within Console is removed. Console now only uses PatternFly 6.x. +> [!WARNING] +> OpenShift web console does not support non-PatternFly CSS provided by Console in plugins. +> The following information is provided for reference only. + +OpenShift web console no longer applies styling to the following CSS classes: +- Removed CSS classes from Console core that were used for deprecated modal components. Plugins that reference these classes in their custom CSS should migrate to PatternFly v6 modal classes (e.g., `.pf-v6-c-modal-box__body`) or use data-test attributes. Removed classes: `.co-overlay`, `.modal-footer`, `.modal-paragraph`, `.modal-header`, `.modal-body`, `.modal-body-border`, `.modal-body-content`, `.modal-content`, `.modal-dialog`, `.co-modal-table`, `.modal__inline-resource-link`. ## Removal of `@openshift-console/plugin-shared` The `@openshift-console/plugin-shared` package has been removed from the Console codebase, and the diff --git a/frontend/packages/console-dynamic-plugin-sdk/src/extensions/notification-alert.ts b/frontend/packages/console-dynamic-plugin-sdk/src/extensions/notification-alert.ts index 028a65f891d..bee94266791 100644 --- a/frontend/packages/console-dynamic-plugin-sdk/src/extensions/notification-alert.ts +++ b/frontend/packages/console-dynamic-plugin-sdk/src/extensions/notification-alert.ts @@ -1,5 +1,5 @@ import type { Alert } from '../api/common-types'; -import type { LaunchModal } from '../app/modal-support/ModalProvider'; +import type { LaunchOverlay } from '../app/modal-support/OverlayProvider'; import type { Extension, CodeRef } from '../types'; /** This extension can be used to trigger a specific action when a specific Prometheus alert is observed by the Console based on its `rule.name` value. */ @@ -11,7 +11,7 @@ export type AlertAction = Extension< /** Action text */ text: string; /** Function to perform side effect */ - action: CodeRef<(alert: Alert, launchModal: LaunchModal) => void>; + action: CodeRef<(alert: Alert, launchModal: LaunchOverlay) => void>; } >; diff --git a/frontend/packages/console-shared/locales/en/console-shared.json b/frontend/packages/console-shared/locales/en/console-shared.json index 98dda309822..d7e135f9488 100644 --- a/frontend/packages/console-shared/locales/en/console-shared.json +++ b/frontend/packages/console-shared/locales/en/console-shared.json @@ -174,7 +174,6 @@ "Container {{containersName}} does not have health checks to ensure your Application is running correctly.": "Container {{containersName}} does not have health checks to ensure your Application is running correctly.", "Health checks": "Health checks", "Add health checks": "Add health checks", - "Unknown error removing {{hpaLabel}} {{hpaName}}.": "Unknown error removing {{hpaLabel}} {{hpaName}}.", "Remove {{label}}?": "Remove {{label}}?", "Are you sure you want to remove the {{hpaLabel}}": "Are you sure you want to remove the {{hpaLabel}}", "from": "from", @@ -205,7 +204,7 @@ "Description": "Description", "Delete": "Delete", "This action cannot be undone. All associated Deployments, Routes, Builds, Pipelines, Storage/PVCs, Secrets, and ConfigMaps will be deleted.": "This action cannot be undone. All associated Deployments, Routes, Builds, Pipelines, Storage/PVCs, Secrets, and ConfigMaps will be deleted.", - "Confirm deletion by typing <1>{{resourceName}} below:": "Confirm deletion by typing <1>{{resourceName}} below:", + "Confirm deletion by typing <2>{{resourceName}} below:": "Confirm deletion by typing <2>{{resourceName}} below:", "Description:": "Description:", "Component trace:": "Component trace:", "Stack trace:": "Stack trace:", diff --git a/frontend/packages/console-shared/src/components/dashboard/status-card/AlertItem.tsx b/frontend/packages/console-shared/src/components/dashboard/status-card/AlertItem.tsx index 549e9472f60..d2eae1c604b 100644 --- a/frontend/packages/console-shared/src/components/dashboard/status-card/AlertItem.tsx +++ b/frontend/packages/console-shared/src/components/dashboard/status-card/AlertItem.tsx @@ -6,7 +6,7 @@ import { Link, useNavigate } from 'react-router-dom-v5-compat'; import type { AlertAction } from '@console/dynamic-plugin-sdk'; import { isAlertAction, useResolvedExtensions } from '@console/dynamic-plugin-sdk'; import type { AlertItemProps } from '@console/dynamic-plugin-sdk/src/api/internal-types'; -import { useModal } from '@console/dynamic-plugin-sdk/src/lib-core'; +import { useOverlay } from '@console/dynamic-plugin-sdk/src/lib-core'; import { alertURL } from '@console/internal/components/monitoring/utils'; import { getAlertActions } from '@console/internal/components/notification-drawer'; import { LinkifyExternal } from '@console/internal/components/utils/link'; @@ -92,7 +92,7 @@ export const StatusItem: FC = ({ const AlertItem: FC = ({ alert, documentationLink }) => { const { t } = useTranslation(); - const launchModal = useModal(); + const launchModal = useOverlay(); const [actionExtensions] = useResolvedExtensions( useCallback( (e): e is AlertAction => isAlertAction(e) && e.properties.alert === alert.rule.name, diff --git a/frontend/packages/console-shared/src/components/hpa/DeleteHPAModal.tsx b/frontend/packages/console-shared/src/components/hpa/DeleteHPAModal.tsx index 8f26b444eee..b84f6f685ab 100644 --- a/frontend/packages/console-shared/src/components/hpa/DeleteHPAModal.tsx +++ b/frontend/packages/console-shared/src/components/hpa/DeleteHPAModal.tsx @@ -1,55 +1,43 @@ -import type { FC } from 'react'; import { useState } from 'react'; -import { Form } from '@patternfly/react-core'; -import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon'; -import { t_global_icon_color_status_warning_default as warningColor } from '@patternfly/react-tokens'; +import type { FC } from 'react'; +import { Button, Form, Modal, ModalBody, ModalHeader, ModalVariant } from '@patternfly/react-core'; import { useTranslation } from 'react-i18next'; import type { OverlayComponent } from '@console/dynamic-plugin-sdk/src/app/modal-support/OverlayProvider'; -import type { ModalComponentProps } from '@console/internal/components/factory/modal'; -import { - ModalBody, - ModalSubmitFooter, - ModalTitle, - ModalWrapper, -} from '@console/internal/components/factory/modal'; import { LoadingInline } from '@console/internal/components/utils/status-box'; import { HorizontalPodAutoscalerModel } from '@console/internal/models'; import type { HorizontalPodAutoscalerKind, K8sResourceCommon } from '@console/internal/module/k8s'; import { k8sKill } from '@console/internal/module/k8s'; +import type { ModalComponentProps } from '@console/shared/src/types/modal'; +import { usePromiseHandler } from '../../hooks/promise-handler'; +import { ModalFooterWithAlerts } from '../modals/ModalFooterWithAlerts'; + +type DeleteHPAModalProps = ModalComponentProps & { + hpa: HorizontalPodAutoscalerKind; + workload: K8sResourceCommon; +}; const DeleteHPAModal: FC = ({ close, cancel, hpa, workload }) => { - const [submitError, setSubmitError] = useState(null); - const [isSubmitting, setIsSubmitting] = useState(false); + const [handlePromise, inProgress, errorMessage] = usePromiseHandler(); const { t } = useTranslation(); const hpaName = hpa.metadata.name; const workloadName = workload.metadata.name; const handleSubmit = (e) => { e.preventDefault(); - setIsSubmitting(true); - k8sKill(HorizontalPodAutoscalerModel, hpa) - .then(() => { - close(); - }) - .catch((error) => { - setSubmitError( - error?.message || - t('console-shared~Unknown error removing {{hpaLabel}} {{hpaName}}.', { - hpaLabel: HorizontalPodAutoscalerModel.label, - hpaName, - }), - ); - }); + return handlePromise(k8sKill(HorizontalPodAutoscalerModel, hpa)).then(() => { + close(); + }); }; return ( -
-
- - {' '} - {t('console-shared~Remove {{label}}?', { label: HorizontalPodAutoscalerModel.label })} - - + <> + + + {hpaName ? ( <>

@@ -66,36 +54,57 @@ const DeleteHPAModal: FC = ({ close, cancel, hpa, workload

) : ( - !submitError && + !errorMessage && )} - - -
-
+ + + + + + + ); }; -export const DeleteHPAModalOverlay: OverlayComponent = (props) => { - return ( - +type DeleteHPAModalOverlayProps = { + hpa: HorizontalPodAutoscalerKind; + workload: K8sResourceCommon; +}; + +export const DeleteHPAModalOverlay: OverlayComponent = (props) => { + const [isOpen, setIsOpen] = useState(true); + const handleClose = () => { + setIsOpen(false); + props.closeOverlay(); + }; + + return isOpen ? ( + - - ); + + ) : null; }; -type DeleteHPAModalProps = ModalComponentProps & { - hpa: HorizontalPodAutoscalerKind; - workload: K8sResourceCommon; -}; +export default DeleteHPAModalOverlay; diff --git a/frontend/packages/console-shared/src/components/modals/ConsolePluginModal.tsx b/frontend/packages/console-shared/src/components/modals/ConsolePluginModal.tsx index c38aa4cde93..0c42f44f78b 100644 --- a/frontend/packages/console-shared/src/components/modals/ConsolePluginModal.tsx +++ b/frontend/packages/console-shared/src/components/modals/ConsolePluginModal.tsx @@ -1,13 +1,7 @@ import { useState } from 'react'; +import { Button, Form, Modal, ModalBody, ModalHeader, ModalVariant } from '@patternfly/react-core'; import { useTranslation } from 'react-i18next'; import type { OverlayComponent } from '@console/dynamic-plugin-sdk/src/app/modal-support/OverlayProvider'; -import type { ModalComponentProps } from '@console/internal/components/factory/modal'; -import { - ModalTitle, - ModalBody, - ModalSubmitFooter, - ModalWrapper, -} from '@console/internal/components/factory/modal'; import { ConsoleOperatorConfigModel } from '@console/internal/models'; import type { K8sResourceKind } from '@console/internal/module/k8s'; import { k8sPatch } from '@console/internal/module/k8s'; @@ -16,7 +10,9 @@ import { ConsolePluginWarning, } from '@console/shared/src/components/utils'; import { usePromiseHandler } from '@console/shared/src/hooks/promise-handler'; +import type { ModalComponentProps } from '@console/shared/src/types/modal'; import { getPluginPatch, isPluginEnabled } from '@console/shared/src/utils'; +import { ModalFooterWithAlerts } from './ModalFooterWithAlerts'; export const ConsolePluginModal = (props: ConsolePluginModalProps) => { const { cancel, close, consoleOperatorConfig, csvPluginsCount, pluginName, trusted } = props; @@ -34,60 +30,99 @@ export const ConsolePluginModal = (props: ConsolePluginModalProps) => { }; return ( -
- - {csvPluginsCount > 1 - ? t('console-shared~Console plugin enablement - {{plugin}}', { plugin: pluginName }) - : t('console-shared~Console plugin enablement')} - + <> + 1 + ? t('console-shared~Console plugin enablement - {{plugin}}', { plugin: pluginName }) + : t('console-shared~Console plugin enablement') + } + data-test-id="modal-title" + labelId="console-plugin-modal-title" + /> -

- {csvPluginsCount - ? t( - 'console-shared~This operator includes a console plugin which provides a custom interface that can be included in the console. Updating the enablement of this console plugin will prompt for the console to be refreshed once it has been updated. Make sure you trust this console plugin before enabling.', - ) - : t( - 'console-shared~This console plugin provides a custom interface that can be included in the console. Updating the enablement of this console plugin will prompt for the console to be refreshed once it has been updated. Make sure you trust this console plugin before enabling.', - )} -

- - + +

+ {csvPluginsCount + ? t( + 'console-shared~This operator includes a console plugin which provides a custom interface that can be included in the console. Updating the enablement of this console plugin will prompt for the console to be refreshed once it has been updated. Make sure you trust this console plugin before enabling.', + ) + : t( + 'console-shared~This console plugin provides a custom interface that can be included in the console. Updating the enablement of this console plugin will prompt for the console to be refreshed once it has been updated. Make sure you trust this console plugin before enabling.', + )} +

+ + + - - + + + + + ); }; -export const ConsolePluginModalOverlay: OverlayComponent = (props) => { - return ( - +type ConsolePluginModalProviderProps = { + consoleOperatorConfig: K8sResourceKind; + csvPluginsCount?: number; + pluginName: string; + trusted: boolean; +}; + +export const ConsolePluginModalOverlay: OverlayComponent = ( + props, +) => { + const [isOpen, setIsOpen] = useState(true); + const handleClose = () => { + setIsOpen(false); + props.closeOverlay(); + }; + + return isOpen ? ( + - - ); + + ) : null; }; +export default ConsolePluginModalOverlay; + export type ConsolePluginModalProps = { consoleOperatorConfig: K8sResourceKind; csvPluginsCount?: number; diff --git a/frontend/packages/console-shared/src/components/modals/CreateNamespaceModal.tsx b/frontend/packages/console-shared/src/components/modals/CreateNamespaceModal.tsx index d87252ece1e..791451a5ee9 100644 --- a/frontend/packages/console-shared/src/components/modals/CreateNamespaceModal.tsx +++ b/frontend/packages/console-shared/src/components/modals/CreateNamespaceModal.tsx @@ -3,25 +3,30 @@ import { useState } from 'react'; import type { MenuToggleElement, SelectProps } from '@patternfly/react-core'; import { Button, - Alert, + Content, + ContentVariants, + Form, + FormGroup, + MenuToggle, + Modal, + ModalBody, + ModalHeader, + ModalVariant, Select, SelectOption, SelectList, - MenuToggle, - Content, - ContentVariants, + TextInput, } from '@patternfly/react-core'; -import { Modal, ModalVariant } from '@patternfly/react-core/deprecated'; import { useTranslation } from 'react-i18next'; import { useNavigate } from 'react-router-dom-v5-compat'; import type { CreateProjectModalProps } from '@console/dynamic-plugin-sdk/src'; -import type { ModalComponent } from '@console/dynamic-plugin-sdk/src/app/modal-support/ModalProvider'; +import type { OverlayComponent } from '@console/dynamic-plugin-sdk/src/app/modal-support/OverlayProvider'; import { FieldLevelHelp } from '@console/internal/components/utils/field-level-help'; import { resourceObjPath } from '@console/internal/components/utils/resource-link'; import { SelectorInput } from '@console/internal/components/utils/selector-input'; -import { LoadingInline } from '@console/internal/components/utils/status-box'; import { NamespaceModel, NetworkPolicyModel } from '@console/internal/models'; import { k8sCreate, referenceFor } from '@console/internal/module/k8s'; +import { ModalFooterWithAlerts } from '@console/shared/src/components/modals/ModalFooterWithAlerts'; const allow = 'allow'; const deny = 'deny'; @@ -34,10 +39,11 @@ const defaultDeny = { }, }; -export const CreateNamespaceModal: ModalComponent = ({ - closeModal, +export const CreateNamespaceModal: OverlayComponent = ({ + closeOverlay, onSubmit, }) => { + const closeModal = closeOverlay; const { t } = useTranslation(); const navigate = useNavigate(); @@ -151,80 +157,58 @@ export const CreateNamespaceModal: ModalComponent = ({ return ( - {t('console-shared~Create')} - , - , - ...(inProgress ? [] : []), - ]} + aria-labelledby="create-namespace-modal-title" > -
-
- - - - {t( - "console-shared~A Namespace name must consist of lower case alphanumeric characters or '-', and must start and end with an alphanumeric character (e.g. 'my-name' or '123-abc').", - )} - - - {t( - "console-shared~You must create a Namespace to be able to create projects that begin with 'openshift-', 'kubernetes-', or 'kube-'.", - )} - - -
- - setName(e.target.value)} - value={name || ''} - required - /> - -
-
-
- -
+ + + + + + {t( + "console-shared~A Namespace name must consist of lower case alphanumeric characters or '-', and must start and end with an alphanumeric character (e.g. 'my-name' or '123-abc').", + )} + + + {t( + "console-shared~You must create a Namespace to be able to create projects that begin with 'openshift-', 'kubernetes-', or 'kube-'.", + )} + + + } + > + setName(value)} + value={name} + isRequired + /> + + setLabels(value)} tags={labels} /> -
-
-
- -
+ + -
-
- {errorMessage && ( - -
{errorMessage}
- - )} -
+ + + + + + + ); }; diff --git a/frontend/packages/console-shared/src/components/modals/CreateProjectModal.tsx b/frontend/packages/console-shared/src/components/modals/CreateProjectModal.tsx index ae2006f72d9..03e717fc1ec 100644 --- a/frontend/packages/console-shared/src/components/modals/CreateProjectModal.tsx +++ b/frontend/packages/console-shared/src/components/modals/CreateProjectModal.tsx @@ -1,6 +1,17 @@ import { useState, useCallback } from 'react'; -import { Button, Alert, ContentVariants, Content } from '@patternfly/react-core'; -import { Modal, ModalVariant } from '@patternfly/react-core/deprecated'; +import { + Button, + ContentVariants, + Content, + Form, + FormGroup, + Modal, + ModalBody, + ModalHeader, + ModalVariant, + TextArea, + TextInput, +} from '@patternfly/react-core'; import { useTranslation } from 'react-i18next'; import { useDispatch } from 'react-redux'; import { useNavigate } from 'react-router-dom-v5-compat'; @@ -9,6 +20,7 @@ import type { CreateProjectModalProps, } from '@console/dynamic-plugin-sdk/src'; import { isCreateProjectModal, useResolvedExtensions } from '@console/dynamic-plugin-sdk/src'; +import type { OverlayComponent } from '@console/dynamic-plugin-sdk/src/app/modal-support/OverlayProvider'; import { setFlag } from '@console/internal/actions/flags'; import { documentationURLs, @@ -20,13 +32,14 @@ import { resourceObjPath } from '@console/internal/components/utils/resource-lin import { ProjectRequestModel } from '@console/internal/models'; import { k8sCreate, referenceFor } from '@console/internal/module/k8s'; import { ExternalLink } from '@console/shared/src/components/links/ExternalLink'; +import { ModalFooterWithAlerts } from '@console/shared/src/components/modals/ModalFooterWithAlerts'; import { FLAGS } from '@console/shared/src/constants/common'; -import type { ModalComponent } from 'packages/console-dynamic-plugin-sdk/src/app/modal-support/ModalProvider'; -const DefaultCreateProjectModal: ModalComponent = ({ - closeModal, +const DefaultCreateProjectModal: OverlayComponent = ({ + closeOverlay, onSubmit, }) => { + const closeModal = closeOverlay; const navigate = useNavigate(); const dispatch = useDispatch(); const [inProgress, setInProgress] = useState(false); @@ -101,121 +114,104 @@ const DefaultCreateProjectModal: ModalComponent = ({ return ( + + + + {t( + 'console-shared~An OpenShift project is an alternative representation of a Kubernetes namespace.', + )} + + {!isManaged() && ( + + + {t('console-shared~Learn more about working with projects')} + + + )} +
+ + + {t( + "console-shared~A Project name must consist of lower case alphanumeric characters or '-', and must start and end with an alphanumeric character (e.g. 'my-name' or '123-abc').", + )} + + + {t( + "console-shared~You must create a Namespace to be able to create projects that begin with 'openshift-', 'kubernetes-', or 'kube-'.", + )} + + + } + > + setName(value)} + value={name} + isRequired + /> + + + setDisplayName(value)} + value={displayName} + /> + + +