From fb0e74aa8895819c735daa0ebb26009304470785 Mon Sep 17 00:00:00 2001 From: Charles Thao Date: Thu, 10 Jul 2025 12:49:53 -0400 Subject: [PATCH 1/8] feat(ws): Add advanced pod configurations in Workspace Edit (#468) Signed-off-by: Charles Thao --- .../app/components/ValidationErrorAlert.tsx | 3 +- .../WorkspaceKinds/Form/EditableLabels.tsx | 22 +- .../WorkspaceKinds/Form/WorkspaceKindForm.tsx | 97 ++++++--- .../Form/WorkspaceKindFormPaginatedTable.tsx | 142 +++++++++++++ .../app/pages/WorkspaceKinds/Form/helpers.ts | 39 ++++ .../Form/image/WorkspaceKindFormImage.tsx | 86 ++------ .../image/WorkspaceKindFormImageModal.tsx | 2 +- .../Form/podConfig/ResourceInputWrapper.tsx | 81 +++++-- .../podConfig/WorkspaceKindFormPodConfig.tsx | 85 ++------ .../podConfig/WorkspaceKindFormResource.tsx | 1 + .../WorkspaceKindFormPodTemplate.tsx | 197 ++++++++++++++++++ .../pages/WorkspaceKinds/WorkspaceKinds.tsx | 11 +- .../WorkspaceFormPropertiesSecrets.tsx | 9 +- .../WorkspaceFormPropertiesVolumes.tsx | 7 +- workspaces/frontend/src/app/types.ts | 25 ++- .../frontend/src/shared/api/apiUtils.ts | 7 + .../frontend/src/shared/style/MUI-theme.scss | 24 ++- .../src/shared/utilities/valueUnits.ts | 7 + 18 files changed, 639 insertions(+), 206 deletions(-) create mode 100644 workspaces/frontend/src/app/pages/WorkspaceKinds/Form/WorkspaceKindFormPaginatedTable.tsx create mode 100644 workspaces/frontend/src/app/pages/WorkspaceKinds/Form/podTemplate/WorkspaceKindFormPodTemplate.tsx diff --git a/workspaces/frontend/src/app/components/ValidationErrorAlert.tsx b/workspaces/frontend/src/app/components/ValidationErrorAlert.tsx index e2691b2a..417969b9 100644 --- a/workspaces/frontend/src/app/components/ValidationErrorAlert.tsx +++ b/workspaces/frontend/src/app/components/ValidationErrorAlert.tsx @@ -1,10 +1,11 @@ import React from 'react'; import { Alert, List, ListItem } from '@patternfly/react-core'; import { ValidationError } from '~/shared/api/backendApiTypes'; +import { ErrorEnvelopeException } from '~/shared/api/apiUtils'; interface ValidationErrorAlertProps { title: string; - errors: ValidationError[]; + errors: (ValidationError | ErrorEnvelopeException)[]; } export const ValidationErrorAlert: React.FC = ({ title, errors }) => { diff --git a/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/EditableLabels.tsx b/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/EditableLabels.tsx index f738e956..98b1d4df 100644 --- a/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/EditableLabels.tsx +++ b/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/EditableLabels.tsx @@ -71,9 +71,18 @@ type ColumnNames = { [K in keyof T]: string }; interface EditableLabelsProps { rows: WorkspaceOptionLabel[]; setRows: (value: WorkspaceOptionLabel[]) => void; + title?: string; + description?: string; + buttonLabel?: string; } -export const EditableLabels: React.FC = ({ rows, setRows }) => { +export const EditableLabels: React.FC = ({ + rows, + setRows, + title = 'Labels', + description, + buttonLabel = 'Label', +}) => { const columnNames: ColumnNames = { key: 'Key', value: 'Value', @@ -86,12 +95,15 @@ export const EditableLabels: React.FC = ({ rows, setRows }) header={ -
Labels are key/value pairs that are attached to Kubernetes objects.
+
+ {description || + 'Labels are key/value pairs that are attached to Kubernetes objects.'} +
{rows.length} added
@@ -141,7 +153,7 @@ export const EditableLabels: React.FC = ({ rows, setRows }) ]); }} > - Add Label + {`Add ${buttonLabel}`} ); diff --git a/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/WorkspaceKindForm.tsx b/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/WorkspaceKindForm.tsx index feb1ba68..0972c68d 100644 --- a/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/WorkspaceKindForm.tsx +++ b/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/WorkspaceKindForm.tsx @@ -1,8 +1,10 @@ -import React, { useCallback, useMemo, useState } from 'react'; +import React, { useCallback, useEffect, useMemo, useState } from 'react'; import { Button, Content, ContentVariants, + EmptyState, + EmptyStateBody, Flex, FlexItem, PageGroup, @@ -11,18 +13,22 @@ import { StackItem, } from '@patternfly/react-core'; import { t_global_spacer_sm as SmallPadding } from '@patternfly/react-tokens'; +import { ExclamationCircleIcon } from '@patternfly/react-icons'; import { ValidationErrorAlert } from '~/app/components/ValidationErrorAlert'; -import { useTypedNavigate } from '~/app/routerHelper'; +import useWorkspaceKindByName from '~/app/hooks/useWorkspaceKindByName'; +import { WorkspaceKind, ValidationError } from '~/shared/api/backendApiTypes'; +import { useTypedNavigate, useTypedParams } from '~/app/routerHelper'; import { useCurrentRouteKey } from '~/app/hooks/useCurrentRouteKey'; import useGenericObjectState from '~/app/hooks/useGenericObjectState'; import { useNotebookAPI } from '~/app/hooks/useNotebookAPI'; import { WorkspaceKindFormData } from '~/app/types'; import { ErrorEnvelopeException } from '~/shared/api/apiUtils'; -import { ValidationError } from '~/shared/api/backendApiTypes'; import { WorkspaceKindFileUpload } from './fileUpload/WorkspaceKindFileUpload'; import { WorkspaceKindFormProperties } from './properties/WorkspaceKindFormProperties'; import { WorkspaceKindFormImage } from './image/WorkspaceKindFormImage'; import { WorkspaceKindFormPodConfig } from './podConfig/WorkspaceKindFormPodConfig'; +import { WorkspaceKindFormPodTemplate } from './podTemplate/WorkspaceKindFormPodTemplate'; +import { EMPTY_WORKSPACE_KIND_FORM_DATA } from './helpers'; export enum WorkspaceKindFormView { Form, @@ -30,6 +36,19 @@ export enum WorkspaceKindFormView { } export type ValidationStatus = 'success' | 'error' | 'default'; +export type FormMode = 'edit' | 'create'; + +const convertToFormData = (initialData: WorkspaceKind): WorkspaceKindFormData => { + const { podTemplate, ...properties } = initialData; + const { options, ...spec } = podTemplate; + const { podConfig, imageConfig } = options; + return { + properties, + podConfig, + imageConfig, + podTemplate: spec, + }; +}; export const WorkspaceKindForm: React.FC = () => { const navigate = useTypedNavigate(); @@ -38,28 +57,23 @@ export const WorkspaceKindForm: React.FC = () => { const [yamlValue, setYamlValue] = useState(''); const [isSubmitting, setIsSubmitting] = useState(false); const [validated, setValidated] = useState('default'); - const mode = useCurrentRouteKey() === 'workspaceKindCreate' ? 'create' : 'edit'; - const [specErrors, setSpecErrors] = useState([]); + const mode: FormMode = useCurrentRouteKey() === 'workspaceKindCreate' ? 'create' : 'edit'; + const [specErrors, setSpecErrors] = useState<(ValidationError | ErrorEnvelopeException)[]>([]); - const [data, setData, resetData] = useGenericObjectState({ - properties: { - displayName: '', - description: '', - deprecated: false, - deprecationMessage: '', - hidden: false, - icon: { url: '' }, - logo: { url: '' }, - }, - imageConfig: { - default: '', - values: [], - }, - podConfig: { - default: '', - values: [], - }, - }); + const { kind } = useTypedParams<'workspaceKindEdit'>(); + const [initialFormData, initialFormDataLoaded, initialFormDataError] = + useWorkspaceKindByName(kind); + + const [data, setData, resetData, replaceData] = useGenericObjectState( + initialFormData ? convertToFormData(initialFormData) : EMPTY_WORKSPACE_KIND_FORM_DATA, + ); + + useEffect(() => { + if (!initialFormDataLoaded || initialFormData === null || mode === 'create') { + return; + } + replaceData(convertToFormData(initialFormData)); + }, [initialFormData, initialFormDataLoaded, mode, replaceData]); const handleSubmit = useCallback(async () => { setIsSubmitting(true); @@ -71,14 +85,20 @@ export const WorkspaceKindForm: React.FC = () => { console.info('New workspace kind created:', JSON.stringify(newWorkspaceKind)); navigate('workspaceKinds'); } + // TODO: Finish when WSKind API is finalized + // const updatedWorkspace = await api.updateWorkspaceKind({}, kind, { data: {} }); + // console.info('Workspace Kind updated:', JSON.stringify(updatedWorkspace)); + // navigate('workspaceKinds'); } catch (err) { if (err instanceof ErrorEnvelopeException) { const validationErrors = err.envelope.error?.cause?.validation_errors; if (validationErrors && validationErrors.length > 0) { - setSpecErrors(validationErrors); + setSpecErrors((prev) => [...prev, ...validationErrors]); setValidated('error'); return; } + setSpecErrors((prev) => [...prev, err]); + setValidated('error'); } // TODO: alert user about error console.error(`Error ${mode === 'edit' ? 'editing' : 'creating'} workspace kind: ${err}`); @@ -88,14 +108,26 @@ export const WorkspaceKindForm: React.FC = () => { }, [navigate, mode, api, yamlValue]); const canSubmit = useMemo( - () => !isSubmitting && yamlValue.length > 0 && validated === 'success', - [yamlValue, isSubmitting, validated], + () => !isSubmitting && validated === 'success', + [isSubmitting, validated], ); const cancel = useCallback(() => { navigate('workspaceKinds'); }, [navigate]); + if (mode === 'edit' && initialFormDataError) { + return ( + + {initialFormDataError.message} + + ); + } return ( <> @@ -159,6 +191,12 @@ export const WorkspaceKindForm: React.FC = () => { setData('podConfig', podConfig); }} /> + { + setData('podTemplate', podTemplate); + }} + /> )} @@ -169,9 +207,10 @@ export const WorkspaceKindForm: React.FC = () => { variant="primary" ouiaId="Primary" onClick={handleSubmit} - isDisabled={!canSubmit} + // TODO: button is always disabled on edit mode. Need to modify when WorkspaceKind edit is finalized + isDisabled={!canSubmit || mode === 'edit'} > - {mode === 'create' ? 'Create' : 'Edit'} + {mode === 'create' ? 'Create' : 'Save'} diff --git a/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/WorkspaceKindFormPaginatedTable.tsx b/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/WorkspaceKindFormPaginatedTable.tsx new file mode 100644 index 00000000..d7887f2f --- /dev/null +++ b/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/WorkspaceKindFormPaginatedTable.tsx @@ -0,0 +1,142 @@ +import React, { useMemo, useState } from 'react'; +import { Table, Thead, Tr, Td, Tbody, Th } from '@patternfly/react-table'; +import { + Dropdown, + DropdownItem, + getUniqueId, + Label, + MenuToggle, + PageSection, + Pagination, + PaginationVariant, + Radio, +} from '@patternfly/react-core'; +import { EllipsisVIcon } from '@patternfly/react-icons'; + +import { WorkspaceKindImageConfigValue } from '~/app/types'; +import { WorkspacePodConfigValue } from '~/shared/api/backendApiTypes'; + +interface PaginatedTableProps { + rows: WorkspaceKindImageConfigValue[] | WorkspacePodConfigValue[]; + defaultId: string; + setDefaultId: (id: string) => void; + handleEdit: (index: number) => void; + openDeleteModal: (index: number) => void; + ariaLabel: string; +} + +export const WorkspaceKindFormPaginatedTable: React.FC = ({ + rows, + defaultId, + setDefaultId, + handleEdit, + openDeleteModal, + ariaLabel, +}) => { + const [dropdownOpen, setDropdownOpen] = useState(null); + const [page, setPage] = useState(1); + const [perPage, setPerPage] = useState(10); + const rowPages = useMemo(() => { + const pages = []; + for (let i = 0; i < rows.length; i += perPage) { + pages.push(rows.slice(i, i + perPage)); + } + return pages; + }, [perPage, rows]); + + const onSetPage = ( + _event: React.MouseEvent | React.KeyboardEvent | MouseEvent, + newPage: number, + ) => { + setPage(newPage); + }; + + const onPerPageSelect = ( + _event: React.MouseEvent | React.KeyboardEvent | MouseEvent, + newPerPage: number, + newPage: number, + ) => { + setPerPage(newPerPage); + setPage(newPage); + }; + return ( + + + + + + + + + + + + {rowPages[page - 1].map((row, index) => ( + + + + + + + + ))} + +
Display NameIDDefaultLabels +
{row.displayName}{row.id} + { + console.log(row.id); + setDefaultId(row.id); + }} + aria-label={`Select ${row.id} as default`} + /> + + {row.labels.length > 0 && + row.labels.map((label) => ( + + ))} + + ( + setDropdownOpen(dropdownOpen === index ? null : index)} + variant="plain" + aria-label="plain kebab" + > + + + )} + isOpen={dropdownOpen === index} + onSelect={() => setDropdownOpen(null)} + popperProps={{ position: 'right' }} + > + handleEdit(perPage * (page - 1) + index)}> + Edit + + openDeleteModal(perPage * (page - 1) + index)}> + Remove + + +
+ + + ); +}; diff --git a/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/helpers.ts b/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/helpers.ts index aad5f622..786670e7 100644 --- a/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/helpers.ts +++ b/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/helpers.ts @@ -104,6 +104,45 @@ export const emptyPodConfig: WorkspacePodConfigValue = { to: '', }, }; + +export const EMPTY_WORKSPACE_KIND_FORM_DATA = { + properties: { + displayName: '', + description: '', + deprecated: false, + deprecationMessage: '', + hidden: false, + icon: { url: '' }, + logo: { url: '' }, + }, + imageConfig: { + default: '', + values: [], + }, + podConfig: { + default: '', + values: [], + }, + podTemplate: { + podMetadata: { + labels: {}, + annotations: {}, + }, + volumeMounts: { + home: '', + }, + extraVolumeMounts: [], + culling: { + enabled: false, + maxInactiveSeconds: 86400, + activityProbe: { + jupyter: { + lastActivity: true, + }, + }, + }, + }, +}; // convert from k8s resource object {limits: {}, requests{}} to array of {type: '', limit: '', request: ''} for each type of resource (e.g. CPU, memory, nvidia.com/gpu) export const getResources = (currConfig: WorkspaceKindPodConfigValue): PodResourceEntry[] => { const grouped = new Map([ diff --git a/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/image/WorkspaceKindFormImage.tsx b/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/image/WorkspaceKindFormImage.tsx index ca625585..9f50e5a0 100644 --- a/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/image/WorkspaceKindFormImage.tsx +++ b/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/image/WorkspaceKindFormImage.tsx @@ -2,9 +2,6 @@ import React, { useCallback, useState } from 'react'; import { Button, Content, - Dropdown, - MenuToggle, - DropdownItem, Modal, ModalHeader, ModalFooter, @@ -13,14 +10,13 @@ import { EmptyStateFooter, EmptyStateActions, EmptyStateBody, - Label, - getUniqueId, ExpandableSection, } from '@patternfly/react-core'; -import { Table, Thead, Tbody, Tr, Th, Td } from '@patternfly/react-table'; -import { PlusCircleIcon, EllipsisVIcon, CubesIcon } from '@patternfly/react-icons'; +import { PlusCircleIcon, CubesIcon } from '@patternfly/react-icons'; import { WorkspaceKindImageConfigData, WorkspaceKindImageConfigValue } from '~/app/types'; import { emptyImage } from '~/app/pages/WorkspaceKinds/Form/helpers'; +import { WorkspaceKindFormPaginatedTable } from '~/app/pages/WorkspaceKinds/Form/WorkspaceKindFormPaginatedTable'; + import { WorkspaceKindFormImageModal } from './WorkspaceKindFormImageModal'; interface WorkspaceKindFormImageProps { @@ -38,7 +34,6 @@ export const WorkspaceKindFormImage: React.FC = ({ const [defaultId, setDefaultId] = useState(imageConfig.default || ''); const [isModalOpen, setIsModalOpen] = useState(false); const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false); - const [dropdownOpen, setDropdownOpen] = useState(null); const [editIndex, setEditIndex] = useState(null); const [deleteIndex, setDeleteIndex] = useState(null); const [image, setImage] = useState({ ...emptyImage }); @@ -125,70 +120,17 @@ export const WorkspaceKindFormImage: React.FC = ({ )} {imageConfig.values.length > 0 && (
- - - - - - - - - - - - {imageConfig.values.map((img, index) => ( - - - - - - - - - - ))} - -
Display NameIDDefaultHiddenLabels -
{img.displayName}{img.id} - { - setDefaultId(img.id); - updateImageConfig({ ...imageConfig, default: img.id }); - }} - aria-label={`Select ${img.id} as default`} - /> - {img.hidden ? 'Yes' : 'No'} - {img.labels.length > 0 && - img.labels.map((label) => ( - - ))} - - ( - setDropdownOpen(dropdownOpen === index ? null : index)} - variant="plain" - aria-label="plain kebab" - > - - - )} - isOpen={dropdownOpen === index} - onSelect={() => setDropdownOpen(null)} - popperProps={{ position: 'right' }} - > - handleEdit(index)}>Edit - openDeleteModal(index)}>Remove - -
+ { + updateImageConfig({ ...imageConfig, default: id }); + setDefaultId(id); + }} + handleEdit={handleEdit} + openDeleteModal={openDeleteModal} + /> {addImageBtn}
)} diff --git a/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/image/WorkspaceKindFormImageModal.tsx b/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/image/WorkspaceKindFormImageModal.tsx index 99a7a22b..607d3aad 100644 --- a/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/image/WorkspaceKindFormImageModal.tsx +++ b/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/image/WorkspaceKindFormImageModal.tsx @@ -138,7 +138,7 @@ export const WorkspaceKindFormImageModal: React.FC setImage({ ...image, ports })} /> {mode === 'edit' && ( diff --git a/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/podConfig/ResourceInputWrapper.tsx b/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/podConfig/ResourceInputWrapper.tsx index 3c8ab7bb..5c0371b3 100644 --- a/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/podConfig/ResourceInputWrapper.tsx +++ b/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/podConfig/ResourceInputWrapper.tsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect, useCallback, useMemo } from 'react'; +import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react'; import { FormSelect, FormSelectOption, @@ -6,13 +6,18 @@ import { Split, SplitItem, } from '@patternfly/react-core'; -import { CPU_UNITS, MEMORY_UNITS_FOR_SELECTION, UnitOption } from '~/shared/utilities/valueUnits'; +import { + CPU_UNITS, + MEMORY_UNITS_FOR_SELECTION, + TIME_UNIT_FOR_SELECTION, + UnitOption, +} from '~/shared/utilities/valueUnits'; import { parseResourceValue } from '~/shared/utilities/WorkspaceUtils'; interface ResourceInputWrapperProps { value: string; onChange: (value: string) => void; - type: 'cpu' | 'memory' | 'custom'; + type: 'cpu' | 'memory' | 'time' | 'custom'; min?: number; max?: number; step?: number; @@ -26,6 +31,7 @@ const unitMap: { } = { memory: MEMORY_UNITS_FOR_SELECTION, cpu: CPU_UNITS, + time: TIME_UNIT_FOR_SELECTION, }; const DEFAULT_STEP = 1; @@ -34,7 +40,6 @@ const DEFAULT_UNITS = { memory: 'Mi', cpu: '', }; - export const ResourceInputWrapper: React.FC = ({ value, onChange, @@ -48,22 +53,47 @@ export const ResourceInputWrapper: React.FC = ({ }) => { const [inputValue, setInputValue] = useState(value); const [unit, setUnit] = useState(''); + const isTimeInitialized = useRef(false); useEffect(() => { - if (type === 'custom') { - setInputValue(value); - return; + if (type === 'time') { + // Initialize time only once + if (!isTimeInitialized.current) { + const seconds = parseFloat(value) || 0; + let defaultUnit = 60; // Default to minutes + if (seconds >= 86400) { + defaultUnit = 86400; // Days + } else if (seconds >= 3600) { + defaultUnit = 3600; // Hours + } else if (seconds >= 60) { + defaultUnit = 60; // Minutes + } else { + defaultUnit = 1; // Seconds + } + setUnit(defaultUnit.toString()); + setInputValue((seconds / defaultUnit).toString()); + isTimeInitialized.current = true; + } + } else { + if (type === 'custom') { + setInputValue(value); + return; + } + const [numericValue, extractedUnit] = parseResourceValue(value, type); + setInputValue(String(numericValue || '')); + setUnit(extractedUnit?.unit || DEFAULT_UNITS[type]); } - const [numericValue, extractedUnit] = parseResourceValue(value, type); - setInputValue(String(numericValue || '')); - setUnit(extractedUnit?.unit || DEFAULT_UNITS[type]); - }, [value, type]); + }, [type, value]); const handleInputChange = useCallback( (newValue: string) => { setInputValue(newValue); if (type === 'custom') { onChange(newValue); + } else if (type === 'time') { + const numericValue = parseFloat(newValue) || 0; + const unitMultiplier = parseFloat(unit) || 1; + onChange(String(numericValue * unitMultiplier)); } else { onChange(newValue ? `${newValue}${unit}` : ''); } @@ -73,12 +103,24 @@ export const ResourceInputWrapper: React.FC = ({ const handleUnitChange = useCallback( (newUnit: string) => { - setUnit(newUnit); - if (inputValue) { - onChange(`${inputValue}${newUnit}`); + if (type === 'time') { + const currentValue = parseFloat(inputValue) || 0; + const oldUnitMultiplier = parseFloat(unit) || 1; + const newUnitMultiplier = parseFloat(newUnit) || 1; + // Convert the current value to the new unit + const valueInSeconds = currentValue * oldUnitMultiplier; + const valueInNewUnit = valueInSeconds / newUnitMultiplier; + setUnit(newUnit); + setInputValue(valueInNewUnit.toString()); + onChange(String(valueInSeconds)); + } else { + setUnit(newUnit); + if (inputValue) { + onChange(`${inputValue}${newUnit}`); + } } }, - [inputValue, onChange], + [inputValue, onChange, type, unit], ); const handleIncrement = useCallback(() => { @@ -104,7 +146,13 @@ export const ResourceInputWrapper: React.FC = ({ const unitOptions = useMemo( () => type !== 'custom' - ? unitMap[type].map((u) => ) + ? unitMap[type].map((u) => ( + + )) : [], [type], ); @@ -136,6 +184,7 @@ export const ResourceInputWrapper: React.FC = ({ onChange={(_, v) => handleUnitChange(v)} id={`${ariaLabel}-unit-select`} isDisabled={isDisabled} + className="workspace-kind-unit-select" > {unitOptions} diff --git a/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/podConfig/WorkspaceKindFormPodConfig.tsx b/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/podConfig/WorkspaceKindFormPodConfig.tsx index 400d1da0..5f18678f 100644 --- a/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/podConfig/WorkspaceKindFormPodConfig.tsx +++ b/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/podConfig/WorkspaceKindFormPodConfig.tsx @@ -2,9 +2,6 @@ import React, { useCallback, useState } from 'react'; import { Button, Content, - Dropdown, - MenuToggle, - DropdownItem, Modal, ModalHeader, ModalFooter, @@ -14,14 +11,11 @@ import { EmptyStateActions, ExpandableSection, EmptyStateBody, - Label, - getUniqueId, } from '@patternfly/react-core'; -import { Table, Thead, Tbody, Tr, Th, Td } from '@patternfly/react-table'; -import { PlusCircleIcon, EllipsisVIcon, CubesIcon } from '@patternfly/react-icons'; +import { PlusCircleIcon, CubesIcon } from '@patternfly/react-icons'; import { emptyPodConfig } from '~/app/pages/WorkspaceKinds/Form/helpers'; import { WorkspaceKindPodConfigValue, WorkspaceKindPodConfigData } from '~/app/types'; - +import { WorkspaceKindFormPaginatedTable } from '~/app/pages/WorkspaceKinds/Form/WorkspaceKindFormPaginatedTable'; import { WorkspaceKindFormPodConfigModal } from './WorkspaceKindFormPodConfigModal'; interface WorkspaceKindFormPodConfigProps { @@ -37,7 +31,6 @@ export const WorkspaceKindFormPodConfig: React.FC(null); const [editIndex, setEditIndex] = useState(null); const [deleteIndex, setDeleteIndex] = useState(null); const [currConfig, setCurrConfig] = useState({ ...emptyPodConfig }); @@ -128,69 +121,17 @@ export const WorkspaceKindFormPodConfig: React.FC 0 && ( <> - - - - - - - - - - - - {podConfig.values.map((config, index) => ( - - - - - - - - - ))} - -
Display NameIDDefaultHiddenLabels -
{config.displayName}{config.id} - { - setDefaultId(config.id); - updatePodConfig({ ...podConfig, default: config.id }); - }} - aria-label={`Select ${config.id} as default`} - /> - {config.hidden ? 'Yes' : 'No'} - {config.labels.length > 0 && - config.labels.map((label) => ( - - ))} - - ( - setDropdownOpen(dropdownOpen === index ? null : index)} - variant="plain" - aria-label="plain kebab" - > - - - )} - isOpen={dropdownOpen === index} - onSelect={() => setDropdownOpen(null)} - popperProps={{ position: 'right' }} - > - handleEdit(index)}>Edit - openDeleteModal(index)}>Remove - -
+ { + updatePodConfig({ ...podConfig, default: id }); + setDefaultId(id); + }} + handleEdit={handleEdit} + openDeleteModal={openDeleteModal} + /> {addConfigBtn} )} diff --git a/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/podConfig/WorkspaceKindFormResource.tsx b/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/podConfig/WorkspaceKindFormResource.tsx index 8127f3c4..08106117 100644 --- a/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/podConfig/WorkspaceKindFormResource.tsx +++ b/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/podConfig/WorkspaceKindFormResource.tsx @@ -312,6 +312,7 @@ export const WorkspaceKindFormResource: React.FC onChange={(_event, value) => handleChange(res.id, 'type', value)} /> + diff --git a/workspaces/frontend/src/app/pages/Workspaces/Form/properties/WorkspaceFormPropertiesVolumes.tsx b/workspaces/frontend/src/app/pages/Workspaces/Form/properties/WorkspaceFormPropertiesVolumes.tsx index 9feb7374..7fb0b118 100644 --- a/workspaces/frontend/src/app/pages/Workspaces/Form/properties/WorkspaceFormPropertiesVolumes.tsx +++ b/workspaces/frontend/src/app/pages/Workspaces/Form/properties/WorkspaceFormPropertiesVolumes.tsx @@ -14,7 +14,7 @@ import { Switch, TextInput, } from '@patternfly/react-core'; -import { EllipsisVIcon } from '@patternfly/react-icons'; +import { EllipsisVIcon, PlusCircleIcon } from '@patternfly/react-icons'; import { Table, TableVariant, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table'; import { WorkspacePodVolumeMount } from '~/shared/api/backendApiTypes'; @@ -126,9 +126,10 @@ export const WorkspaceFormPropertiesVolumes: React.FC )} - - ))} - - ); -}; +}) => ( + ({ + id: image.id, + displayName: image.displayName, + kindName: workspaceKind.name, + workspaceCountRouteState: { + imageId: image.id, + }, + workspaceCount: + // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition + workspaceCountPerKind[workspaceKind.name] + ? workspaceCountPerKind[workspaceKind.name].countByImage[image.id] ?? 0 + : 0, + }))} + tableKind="image" + /> +); diff --git a/workspaces/frontend/src/app/pages/WorkspaceKinds/details/WorkspaceKindDetailsNamespaces.tsx b/workspaces/frontend/src/app/pages/WorkspaceKinds/details/WorkspaceKindDetailsNamespaces.tsx index 7929fdef..ca6c76fb 100644 --- a/workspaces/frontend/src/app/pages/WorkspaceKinds/details/WorkspaceKindDetailsNamespaces.tsx +++ b/workspaces/frontend/src/app/pages/WorkspaceKinds/details/WorkspaceKindDetailsNamespaces.tsx @@ -1,8 +1,7 @@ import React from 'react'; -import { Button, List, ListItem } from '@patternfly/react-core'; import { WorkspaceKind } from '~/shared/api/backendApiTypes'; import { WorkspaceCountPerKind } from '~/app/hooks/useWorkspaceCountPerKind'; -import { useTypedNavigate } from '~/app/routerHelper'; +import { WorkspaceKindDetailsTable } from './WorkspaceKindDetailsTable'; type WorkspaceDetailsNamespacesProps = { workspaceKind: WorkspaceKind; @@ -11,42 +10,25 @@ type WorkspaceDetailsNamespacesProps = { export const WorkspaceKindDetailsNamespaces: React.FunctionComponent< WorkspaceDetailsNamespacesProps -> = ({ workspaceKind, workspaceCountPerKind }) => { - const navigate = useTypedNavigate(); - - return ( - - {Object.keys( - // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition - workspaceCountPerKind[workspaceKind.name] - ? workspaceCountPerKind[workspaceKind.name].countByNamespace - : [], - ).map((namespace, rowIndex) => ( - - {namespace}:{' '} - - - ))} - - ); -}; +> = ({ workspaceKind, workspaceCountPerKind }) => ( + ({ + id: String(rowIndex), + displayName: namespace, + kindName: workspaceKind.name, + // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition + workspaceCount: workspaceCountPerKind[workspaceKind.name] + ? workspaceCountPerKind[workspaceKind.name].countByNamespace[namespace] + : 0, + workspaceCountRouteState: { + namespace, + }, + }))} + tableKind="namespace" + /> +); diff --git a/workspaces/frontend/src/app/pages/WorkspaceKinds/details/WorkspaceKindDetailsPodConfigs.tsx b/workspaces/frontend/src/app/pages/WorkspaceKinds/details/WorkspaceKindDetailsPodConfigs.tsx index a461e76a..7ca13f4b 100644 --- a/workspaces/frontend/src/app/pages/WorkspaceKinds/details/WorkspaceKindDetailsPodConfigs.tsx +++ b/workspaces/frontend/src/app/pages/WorkspaceKinds/details/WorkspaceKindDetailsPodConfigs.tsx @@ -1,8 +1,7 @@ import React from 'react'; -import { Button, List, ListItem } from '@patternfly/react-core'; import { WorkspaceKind } from '~/shared/api/backendApiTypes'; import { WorkspaceCountPerKind } from '~/app/hooks/useWorkspaceCountPerKind'; -import { useTypedNavigate } from '~/app/routerHelper'; +import { WorkspaceKindDetailsTable } from './WorkspaceKindDetailsTable'; type WorkspaceDetailsPodConfigsProps = { workspaceKind: WorkspaceKind; @@ -11,37 +10,20 @@ type WorkspaceDetailsPodConfigsProps = { export const WorkspaceKindDetailsPodConfigs: React.FunctionComponent< WorkspaceDetailsPodConfigsProps -> = ({ workspaceKind, workspaceCountPerKind }) => { - const navigate = useTypedNavigate(); - - return ( - - {workspaceKind.podTemplate.options.podConfig.values.map((podConfig, rowIndex) => ( - - {podConfig.displayName}:{' '} - - - ))} - - ); -}; +> = ({ workspaceKind, workspaceCountPerKind }) => ( + ({ + id: podConfig.id, + displayName: podConfig.displayName, + kindName: workspaceKind.name, + // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition + workspaceCount: workspaceCountPerKind[workspaceKind.name] + ? workspaceCountPerKind[workspaceKind.name].countByPodConfig[podConfig.id] ?? 0 + : 0, + workspaceCountRouteState: { + podConfigId: podConfig.id, + }, + }))} + tableKind="podConfig" + /> +); diff --git a/workspaces/frontend/src/app/pages/WorkspaceKinds/details/WorkspaceKindDetailsTable.tsx b/workspaces/frontend/src/app/pages/WorkspaceKinds/details/WorkspaceKindDetailsTable.tsx new file mode 100644 index 00000000..12b3b597 --- /dev/null +++ b/workspaces/frontend/src/app/pages/WorkspaceKinds/details/WorkspaceKindDetailsTable.tsx @@ -0,0 +1,95 @@ +import React, { useMemo, useState } from 'react'; +import { Table, Thead, Tr, Td, Tbody, Th } from '@patternfly/react-table'; +import { Button, Content, Pagination, PaginationVariant } from '@patternfly/react-core'; +import { useTypedNavigate } from '~/app/routerHelper'; +import { RouteStateMap } from '~/app/routes'; + +export interface WorkspaceKindDetailsTableRow { + id: string; + displayName: string; + kindName: string; + workspaceCount: number; + workspaceCountRouteState: RouteStateMap['workspaceKindSummary']; +} + +interface WorkspaceKindDetailsTableProps { + rows: WorkspaceKindDetailsTableRow[]; + tableKind: 'image' | 'podConfig' | 'namespace'; +} + +export const WorkspaceKindDetailsTable: React.FC = ({ + rows, + tableKind, +}) => { + const navigate = useTypedNavigate(); + + const [page, setPage] = useState(1); + const [perPage, setPerPage] = useState(10); + const rowPages = useMemo(() => { + const pages = []; + for (let i = 0; i < rows.length; i += perPage) { + pages.push(rows.slice(i, i + perPage)); + } + return pages; + }, [perPage, rows]); + + const onSetPage = ( + _event: React.MouseEvent | React.KeyboardEvent | MouseEvent, + newPage: number, + ) => { + setPage(newPage); + }; + + const onPerPageSelect = ( + _event: React.MouseEvent | React.KeyboardEvent | MouseEvent, + newPerPage: number, + newPage: number, + ) => { + setPerPage(newPerPage); + setPage(newPage); + }; + return ( + + + + + + + + + + {rowPages[page - 1].map((row) => ( + + + + + ))} + +
NameWorkspaces
{row.displayName} + +
+ + + ); +}; From 3542f848de776b3be6631e98f00f974036c49ac5 Mon Sep 17 00:00:00 2001 From: Jenny <32821331+jenny-s51@users.noreply.github.com> Date: Mon, 21 Jul 2025 11:08:58 -0400 Subject: [PATCH 5/8] fix(ws): Implement dual scrolling for workspace kind wizard (#484) Signed-off-by: Jenny <32821331+jenny-s51@users.noreply.github.com> fix(ws): remove extra DrawerPanelBody remove unused file Signed-off-by: Jenny <32821331+jenny-s51@users.noreply.github.com> fix(ws): remove comment and hide drawer on previousStep callback Signed-off-by: Jenny <32821331+jenny-s51@users.noreply.github.com> fix(ws): when navigating between wizard steps, show drawer for steps that have drawer content --- .../pages/Workspaces/Form/WorkspaceForm.tsx | 414 +++++++++++------- .../Form/image/WorkspaceFormImageDetails.tsx | 4 +- .../image/WorkspaceFormImageSelection.tsx | 59 +-- .../Form/kind/WorkspaceFormKindDetails.tsx | 4 +- .../Form/kind/WorkspaceFormKindSelection.tsx | 47 +- .../WorkspaceFormPodConfigDetails.tsx | 6 +- .../WorkspaceFormPodConfigSelection.tsx | 59 +-- 7 files changed, 301 insertions(+), 292 deletions(-) diff --git a/workspaces/frontend/src/app/pages/Workspaces/Form/WorkspaceForm.tsx b/workspaces/frontend/src/app/pages/Workspaces/Form/WorkspaceForm.tsx index 89a29825..78d4d709 100644 --- a/workspaces/frontend/src/app/pages/Workspaces/Form/WorkspaceForm.tsx +++ b/workspaces/frontend/src/app/pages/Workspaces/Form/WorkspaceForm.tsx @@ -2,14 +2,21 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react'; import { Button, Content, + Drawer, + DrawerContent, + DrawerContentBody, + DrawerPanelContent, + DrawerHead, + DrawerActions, + DrawerCloseButton, + DrawerPanelBody, Flex, FlexItem, - PageGroup, PageSection, ProgressStep, ProgressStepper, Stack, - StackItem, + Title, } from '@patternfly/react-core'; import useGenericObjectState from '~/app/hooks/useGenericObjectState'; import { useNotebookAPI } from '~/app/hooks/useNotebookAPI'; @@ -18,10 +25,18 @@ import { WorkspaceFormKindSelection } from '~/app/pages/Workspaces/Form/kind/Wor import { WorkspaceFormPodConfigSelection } from '~/app/pages/Workspaces/Form/podConfig/WorkspaceFormPodConfigSelection'; import { WorkspaceFormPropertiesSelection } from '~/app/pages/Workspaces/Form/properties/WorkspaceFormPropertiesSelection'; import { WorkspaceFormData } from '~/app/types'; -import { WorkspaceCreate } from '~/shared/api/backendApiTypes'; +import { + WorkspaceCreate, + WorkspaceKind, + WorkspaceImageConfigValue, + WorkspacePodConfigValue, +} from '~/shared/api/backendApiTypes'; import useWorkspaceFormData from '~/app/hooks/useWorkspaceFormData'; import { useTypedNavigate } from '~/app/routerHelper'; import { useWorkspaceFormLocationData } from '~/app/hooks/useWorkspaceFormLocationData'; +import { WorkspaceFormKindDetails } from '~/app/pages/Workspaces/Form/kind/WorkspaceFormKindDetails'; +import { WorkspaceFormImageDetails } from '~/app/pages/Workspaces/Form/image/WorkspaceFormImageDetails'; +import { WorkspaceFormPodConfigDetails } from '~/app/pages/Workspaces/Form/podConfig/WorkspaceFormPodConfigDetails'; enum WorkspaceFormSteps { KindSelection, @@ -52,6 +67,7 @@ const WorkspaceForm: React.FC = () => { const [isSubmitting, setIsSubmitting] = useState(false); const [currentStep, setCurrentStep] = useState(WorkspaceFormSteps.KindSelection); + const [drawerExpanded, setDrawerExpanded] = useState(false); const [data, setData, resetData, replaceData] = useGenericObjectState(initialFormData); @@ -76,30 +92,46 @@ const WorkspaceForm: React.FC = () => { [currentStep], ); + const isStepValid = useCallback( + (step: WorkspaceFormSteps) => { + switch (step) { + case WorkspaceFormSteps.KindSelection: + return !!data.kind; + case WorkspaceFormSteps.ImageSelection: + return !!data.image; + case WorkspaceFormSteps.PodConfigSelection: + return !!data.podConfig; + case WorkspaceFormSteps.Properties: + return !!data.properties.workspaceName.trim(); + default: + return false; + } + }, + [data.kind, data.image, data.podConfig, data.properties.workspaceName], + ); + + const showDrawer = useCallback( + (step: WorkspaceFormSteps) => + // Only show drawer for steps that have drawer content + step !== WorkspaceFormSteps.Properties && isStepValid(step), + [isStepValid], + ); + const previousStep = useCallback(() => { - setCurrentStep(currentStep - 1); - }, [currentStep]); + const newStep = currentStep - 1; + setCurrentStep(newStep); + setDrawerExpanded(showDrawer(newStep)); + }, [currentStep, showDrawer]); const nextStep = useCallback(() => { - setCurrentStep(currentStep + 1); - }, [currentStep]); + const newStep = currentStep + 1; + setCurrentStep(newStep); + setDrawerExpanded(showDrawer(newStep)); + }, [currentStep, showDrawer]); const canGoToPreviousStep = useMemo(() => currentStep > 0, [currentStep]); - const isCurrentStepValid = useMemo(() => { - switch (currentStep) { - case WorkspaceFormSteps.KindSelection: - return !!data.kind; - case WorkspaceFormSteps.ImageSelection: - return !!data.image; - case WorkspaceFormSteps.PodConfigSelection: - return !!data.podConfig; - case WorkspaceFormSteps.Properties: - return !!data.properties.workspaceName.trim(); - default: - return false; - } - }, [currentStep, data]); + const isCurrentStepValid = useMemo(() => isStepValid(currentStep), [isStepValid, currentStep]); const canGoToNextStep = useMemo( () => currentStep < Object.keys(WorkspaceFormSteps).length / 2 - 1, @@ -168,6 +200,63 @@ const WorkspaceForm: React.FC = () => { navigate('workspaces'); }, [navigate]); + const handleKindSelect = useCallback( + (kind: WorkspaceKind | undefined) => { + if (kind) { + resetData(); + setData('kind', kind); + setDrawerExpanded(true); + } + }, + [resetData, setData], + ); + + const handleImageSelect = useCallback( + (image: WorkspaceImageConfigValue | undefined) => { + if (image) { + setData('image', image); + setDrawerExpanded(true); + } + }, + [setData], + ); + + const handlePodConfigSelect = useCallback( + (podConfig: WorkspacePodConfigValue | undefined) => { + if (podConfig) { + setData('podConfig', podConfig); + setDrawerExpanded(true); + } + }, + [setData], + ); + + const getDrawerContent = () => { + switch (currentStep) { + case WorkspaceFormSteps.KindSelection: + return ; + case WorkspaceFormSteps.ImageSelection: + return ; + case WorkspaceFormSteps.PodConfigSelection: + return ; + default: + return null; + } + }; + + const getDrawerTitle = () => { + switch (currentStep) { + case WorkspaceFormSteps.KindSelection: + return 'Workspace Kind'; + case WorkspaceFormSteps.ImageSelection: + return 'Image'; + case WorkspaceFormSteps.PodConfigSelection: + return 'Pod Config'; + default: + return ''; + } + }; + if (initialFormDataError) { return

Error loading workspace data: {initialFormDataError.message}

; // TODO: UX for error state } @@ -176,137 +265,160 @@ const WorkspaceForm: React.FC = () => { return

Loading...

; // TODO: UX for loading state } + const panelContent = ( + + + {getDrawerTitle()} + + setDrawerExpanded(false)} /> + + + + {getDrawerContent()} + + + ); + return ( - <> - - - - - - -

{`${mode === 'create' ? 'Create' : 'Edit'} workspace`}

- - - - - - Workspace Kind - - - Image - - - Pod Config - - - Properties - - - - - -

{stepDescriptions[currentStep]}

- - - - - - {currentStep === WorkspaceFormSteps.KindSelection && ( - { - resetData(); - setData('kind', kind); - }} - /> - )} - {currentStep === WorkspaceFormSteps.ImageSelection && ( - setData('image', image)} - images={data.kind?.podTemplate.options.imageConfig.values ?? []} - /> - )} - {currentStep === WorkspaceFormSteps.PodConfigSelection && ( - setData('podConfig', podConfig)} - podConfigs={data.kind?.podTemplate.options.podConfig.values ?? []} - /> - )} - {currentStep === WorkspaceFormSteps.Properties && ( - setData('properties', properties)} - selectedImage={data.image} - /> - )} - - - - - - - - {canGoToNextStep ? ( - - ) : ( - - )} - - - - - - - + + + + + + + + + + +

{`${mode === 'create' ? 'Create' : 'Edit'} workspace`}

+

{stepDescriptions[currentStep]}

+ + + + + + Workspace Kind + + + Image + + + Pod Config + + + Properties + + + + + + + + + + {currentStep === WorkspaceFormSteps.KindSelection && ( + + )} + {currentStep === WorkspaceFormSteps.ImageSelection && ( + + )} + {currentStep === WorkspaceFormSteps.PodConfigSelection && ( + + )} + {currentStep === WorkspaceFormSteps.Properties && ( + setData('properties', properties)} + selectedImage={data.image} + /> + )} + + + + + + + + + + {canGoToNextStep ? ( + + ) : ( + + )} + + + + + + + + + + + ); }; diff --git a/workspaces/frontend/src/app/pages/Workspaces/Form/image/WorkspaceFormImageDetails.tsx b/workspaces/frontend/src/app/pages/Workspaces/Form/image/WorkspaceFormImageDetails.tsx index 26221492..1b6eb14d 100644 --- a/workspaces/frontend/src/app/pages/Workspaces/Form/image/WorkspaceFormImageDetails.tsx +++ b/workspaces/frontend/src/app/pages/Workspaces/Form/image/WorkspaceFormImageDetails.tsx @@ -16,7 +16,7 @@ type WorkspaceFormImageDetailsProps = { export const WorkspaceFormImageDetails: React.FunctionComponent = ({ workspaceImage, }) => ( -
+ <> {workspaceImage && ( <> {workspaceImage.displayName} @@ -38,5 +38,5 @@ export const WorkspaceFormImageDetails: React.FunctionComponent )} -
+ ); diff --git a/workspaces/frontend/src/app/pages/Workspaces/Form/image/WorkspaceFormImageSelection.tsx b/workspaces/frontend/src/app/pages/Workspaces/Form/image/WorkspaceFormImageSelection.tsx index 83ac839a..02fc9556 100644 --- a/workspaces/frontend/src/app/pages/Workspaces/Form/image/WorkspaceFormImageSelection.tsx +++ b/workspaces/frontend/src/app/pages/Workspaces/Form/image/WorkspaceFormImageSelection.tsx @@ -1,10 +1,8 @@ -import React, { useCallback, useMemo, useRef, useState } from 'react'; +import React, { useMemo, useState } from 'react'; import { Content, Split, SplitItem } from '@patternfly/react-core'; -import { WorkspaceFormImageDetails } from '~/app/pages/Workspaces/Form/image/WorkspaceFormImageDetails'; import { WorkspaceFormImageList } from '~/app/pages/Workspaces/Form/image/WorkspaceFormImageList'; import { FilterByLabels } from '~/app/pages/Workspaces/Form/labelFilter/FilterByLabels'; import { WorkspaceImageConfigValue } from '~/shared/api/backendApiTypes'; -import { WorkspaceFormDrawer } from '~/app/pages/Workspaces/Form/WorkspaceFormDrawer'; interface WorkspaceFormImageSelectionProps { images: WorkspaceImageConfigValue[]; @@ -18,26 +16,6 @@ const WorkspaceFormImageSelection: React.FunctionComponent { const [selectedLabels, setSelectedLabels] = useState>>(new Map()); - const [isExpanded, setIsExpanded] = useState(false); - const drawerRef = useRef(undefined); - - const onExpand = useCallback(() => { - if (drawerRef.current) { - drawerRef.current.focus(); - } - }, []); - - const onClick = useCallback( - (image?: WorkspaceImageConfigValue) => { - setIsExpanded(true); - onSelect(image); - }, - [onSelect], - ); - - const onCloseClick = useCallback(() => { - setIsExpanded(false); - }, []); const imageFilterContent = useMemo( () => ( @@ -50,32 +28,19 @@ const WorkspaceFormImageSelection: React.FunctionComponent , - [selectedImage], - ); - return ( - - - {imageFilterContent} - - - - - + + {imageFilterContent} + + + + ); }; diff --git a/workspaces/frontend/src/app/pages/Workspaces/Form/kind/WorkspaceFormKindDetails.tsx b/workspaces/frontend/src/app/pages/Workspaces/Form/kind/WorkspaceFormKindDetails.tsx index 6edbf7b0..105a4890 100644 --- a/workspaces/frontend/src/app/pages/Workspaces/Form/kind/WorkspaceFormKindDetails.tsx +++ b/workspaces/frontend/src/app/pages/Workspaces/Form/kind/WorkspaceFormKindDetails.tsx @@ -9,12 +9,12 @@ type WorkspaceFormKindDetailsProps = { export const WorkspaceFormKindDetails: React.FunctionComponent = ({ workspaceKind, }) => ( -
+ <> {workspaceKind && ( <> {workspaceKind.displayName}

{workspaceKind.description}

)} -
+ ); diff --git a/workspaces/frontend/src/app/pages/Workspaces/Form/kind/WorkspaceFormKindSelection.tsx b/workspaces/frontend/src/app/pages/Workspaces/Form/kind/WorkspaceFormKindSelection.tsx index 342a4825..17bf4dd8 100644 --- a/workspaces/frontend/src/app/pages/Workspaces/Form/kind/WorkspaceFormKindSelection.tsx +++ b/workspaces/frontend/src/app/pages/Workspaces/Form/kind/WorkspaceFormKindSelection.tsx @@ -1,10 +1,8 @@ -import React, { useCallback, useMemo, useRef, useState } from 'react'; +import React from 'react'; import { Content } from '@patternfly/react-core'; import { WorkspaceKind } from '~/shared/api/backendApiTypes'; import useWorkspaceKinds from '~/app/hooks/useWorkspaceKinds'; -import { WorkspaceFormKindDetails } from '~/app/pages/Workspaces/Form/kind/WorkspaceFormKindDetails'; import { WorkspaceFormKindList } from '~/app/pages/Workspaces/Form/kind/WorkspaceFormKindList'; -import { WorkspaceFormDrawer } from '~/app/pages/Workspaces/Form/WorkspaceFormDrawer'; interface WorkspaceFormKindSelectionProps { selectedKind: WorkspaceKind | undefined; @@ -16,31 +14,6 @@ const WorkspaceFormKindSelection: React.FunctionComponent { const [workspaceKinds, loaded, error] = useWorkspaceKinds(); - const [isExpanded, setIsExpanded] = useState(false); - const drawerRef = useRef(undefined); - - const onExpand = useCallback(() => { - if (drawerRef.current) { - drawerRef.current.focus(); - } - }, []); - - const onClick = useCallback( - (kind?: WorkspaceKind) => { - setIsExpanded(true); - onSelect(kind); - }, - [onSelect], - ); - - const onCloseClick = useCallback(() => { - setIsExpanded(false); - }, []); - - const kindDetailsContent = useMemo( - () => , - [selectedKind], - ); if (error) { return

Error loading workspace kinds: {error.message}

; // TODO: UX for error state @@ -52,19 +25,11 @@ const WorkspaceFormKindSelection: React.FunctionComponent - - - + ); }; diff --git a/workspaces/frontend/src/app/pages/Workspaces/Form/podConfig/WorkspaceFormPodConfigDetails.tsx b/workspaces/frontend/src/app/pages/Workspaces/Form/podConfig/WorkspaceFormPodConfigDetails.tsx index dee1dd20..bf7f3fb5 100644 --- a/workspaces/frontend/src/app/pages/Workspaces/Form/podConfig/WorkspaceFormPodConfigDetails.tsx +++ b/workspaces/frontend/src/app/pages/Workspaces/Form/podConfig/WorkspaceFormPodConfigDetails.tsx @@ -19,10 +19,12 @@ export const WorkspaceFormPodConfigDetails: React.FunctionComponent< > = ({ workspacePodConfig }) => ( <> {workspacePodConfig && ( -
+ <> {workspacePodConfig.displayName}{' '}

{workspacePodConfig.description}

+
+
{workspacePodConfig.labels.map((label) => ( ))} -
+ )} ); diff --git a/workspaces/frontend/src/app/pages/Workspaces/Form/podConfig/WorkspaceFormPodConfigSelection.tsx b/workspaces/frontend/src/app/pages/Workspaces/Form/podConfig/WorkspaceFormPodConfigSelection.tsx index d3c04744..2aac1cff 100644 --- a/workspaces/frontend/src/app/pages/Workspaces/Form/podConfig/WorkspaceFormPodConfigSelection.tsx +++ b/workspaces/frontend/src/app/pages/Workspaces/Form/podConfig/WorkspaceFormPodConfigSelection.tsx @@ -1,9 +1,7 @@ -import React, { useCallback, useMemo, useRef, useState } from 'react'; +import React, { useMemo, useState } from 'react'; import { Content, Split, SplitItem } from '@patternfly/react-core'; -import { WorkspaceFormPodConfigDetails } from '~/app/pages/Workspaces/Form/podConfig/WorkspaceFormPodConfigDetails'; import { WorkspaceFormPodConfigList } from '~/app/pages/Workspaces/Form/podConfig/WorkspaceFormPodConfigList'; import { FilterByLabels } from '~/app/pages/Workspaces/Form/labelFilter/FilterByLabels'; -import { WorkspaceFormDrawer } from '~/app/pages/Workspaces/Form/WorkspaceFormDrawer'; import { WorkspacePodConfigValue } from '~/shared/api/backendApiTypes'; interface WorkspaceFormPodConfigSelectionProps { @@ -16,26 +14,6 @@ const WorkspaceFormPodConfigSelection: React.FunctionComponent< WorkspaceFormPodConfigSelectionProps > = ({ podConfigs, selectedPodConfig, onSelect }) => { const [selectedLabels, setSelectedLabels] = useState>>(new Map()); - const [isExpanded, setIsExpanded] = useState(false); - const drawerRef = useRef(undefined); - - const onExpand = useCallback(() => { - if (drawerRef.current) { - drawerRef.current.focus(); - } - }, []); - - const onClick = useCallback( - (podConfig?: WorkspacePodConfigValue) => { - setIsExpanded(true); - onSelect(podConfig); - }, - [onSelect], - ); - - const onCloseClick = useCallback(() => { - setIsExpanded(false); - }, []); const podConfigFilterContent = useMemo( () => ( @@ -48,32 +26,19 @@ const WorkspaceFormPodConfigSelection: React.FunctionComponent< [podConfigs, selectedLabels, setSelectedLabels], ); - const podConfigDetailsContent = useMemo( - () => , - [selectedPodConfig], - ); - return ( - - - {podConfigFilterContent} - - - - - + + {podConfigFilterContent} + + + + ); }; From 345481885e1865e49049aab22b0f453e1d3b7296 Mon Sep 17 00:00:00 2001 From: Paulo Rego <832830+paulovmr@users.noreply.github.com> Date: Mon, 21 Jul 2025 16:26:58 -0300 Subject: [PATCH 6/8] chore(ws): enforce component specific imports (#475) Signed-off-by: paulovmr <832830+paulovmr@users.noreply.github.com> --- workspaces/frontend/.eslintrc.js | 22 ++++++++++++ workspaces/frontend/src/app/App.tsx | 13 ++++--- .../src/app/EnsureAPIAvailability.tsx | 3 +- workspaces/frontend/src/app/NavSidebar.tsx | 7 ++-- .../frontend/src/app/components/LoadError.tsx | 3 +- .../src/app/components/LoadingSpinner.tsx | 3 +- .../app/components/ThemeAwareSearchInput.tsx | 6 +++- .../app/components/ValidationErrorAlert.tsx | 3 +- .../src/app/components/WorkspaceTable.tsx | 32 ++++++++--------- .../app/context/WorkspaceActionsContext.tsx | 6 +++- .../frontend/src/app/error/ErrorBoundary.tsx | 6 ++-- .../frontend/src/app/error/ErrorDetails.tsx | 6 ++-- .../frontend/src/app/error/UpdateState.tsx | 12 +++---- .../src/app/hooks/useWorkspaceRowActions.ts | 2 +- .../frontend/src/app/pages/Debug/Debug.tsx | 10 +++--- .../WorkspaceKinds/Form/EditableLabels.tsx | 11 +++--- .../WorkspaceKinds/Form/WorkspaceKindForm.tsx | 21 ++++-------- .../Form/WorkspaceKindFormPaginatedTable.tsx | 19 +++++------ .../fileUpload/WorkspaceKindFileUpload.tsx | 11 +++--- .../Form/image/WorkspaceKindFormImage.tsx | 16 +++++---- .../image/WorkspaceKindFormImageModal.tsx | 15 ++++---- .../Form/image/WorkspaceKindFormImagePort.tsx | 9 +++-- .../image/WorkspaceKindFormImageRedirect.tsx | 8 +++-- .../Form/podConfig/ResourceInputWrapper.tsx | 7 ++-- .../podConfig/WorkspaceKindFormPodConfig.tsx | 15 ++++---- .../WorkspaceKindFormPodConfigModal.tsx | 13 ++++--- .../podConfig/WorkspaceKindFormResource.tsx | 19 +++++------ .../WorkspaceKindFormPodTemplate.tsx | 11 +++--- .../WorkspaceKindFormProperties.tsx | 15 ++++---- .../pages/WorkspaceKinds/WorkspaceKinds.tsx | 32 +++++++++-------- .../details/WorkspaceKindDetails.tsx | 8 +++-- .../details/WorkspaceKindDetailsOverview.tsx | 4 +-- .../details/WorkspaceKindDetailsTable.tsx | 9 +++-- .../summary/WorkspaceKindSummary.tsx | 14 +++----- .../WorkspaceKindSummaryExpandableCard.tsx | 19 +++++------ .../app/pages/Workspaces/DataVolumesList.tsx | 17 +++++----- .../Workspaces/Details/WorkspaceDetails.tsx | 8 +++-- .../Details/WorkspaceDetailsActions.tsx | 9 +++-- .../Details/WorkspaceDetailsActivity.tsx | 6 ++-- .../Details/WorkspaceDetailsOverview.tsx | 4 +-- .../pages/Workspaces/ExpandedWorkspaceRow.tsx | 2 +- .../pages/Workspaces/Form/WorkspaceForm.tsx | 33 +++++++++--------- .../Workspaces/Form/WorkspaceFormDrawer.tsx | 4 +-- .../Form/image/WorkspaceFormImageDetails.tsx | 4 +-- .../Form/image/WorkspaceFormImageList.tsx | 9 +++-- .../image/WorkspaceFormImageSelection.tsx | 3 +- .../Form/kind/WorkspaceFormKindDetails.tsx | 2 +- .../Form/kind/WorkspaceFormKindList.tsx | 9 +++-- .../Form/kind/WorkspaceFormKindSelection.tsx | 2 +- .../WorkspaceFormPodConfigDetails.tsx | 6 ++-- .../podConfig/WorkspaceFormPodConfigList.tsx | 9 +++-- .../WorkspaceFormPodConfigSelection.tsx | 3 +- .../WorkspaceFormPropertiesSecrets.tsx | 34 +++++++++++-------- .../WorkspaceFormPropertiesSelection.tsx | 18 ++++------ .../WorkspaceFormPropertiesVolumes.tsx | 29 ++++++++++------ .../Workspaces/WorkspaceConfigDetails.tsx | 2 +- .../Workspaces/WorkspaceConnectAction.tsx | 4 ++- .../Workspaces/WorkspacePackageDetails.tsx | 5 ++- .../app/pages/Workspaces/WorkspaceStorage.tsx | 2 +- .../src/app/pages/Workspaces/Workspaces.tsx | 4 ++- .../WorkspaceRedirectInformationView.tsx | 13 +++---- .../WorkspaceRestartActionModal.tsx | 8 ++--- .../WorkspaceStartActionModal.tsx | 6 ++-- .../WorkspaceStopActionModal.tsx | 8 ++--- .../src/app/pages/notFound/NotFound.tsx | 8 ++--- .../src/shared/components/ActionButton.tsx | 2 +- .../shared/components/CustomEmptyState.tsx | 6 ++-- .../src/shared/components/DeleteModal.tsx | 14 ++++---- .../frontend/src/shared/components/Filter.tsx | 12 ++++--- .../src/shared/components/ImageFallback.tsx | 6 ++-- .../shared/components/NamespaceSelector.tsx | 17 ++++------ .../src/shared/components/WithValidImage.tsx | 2 +- 72 files changed, 394 insertions(+), 346 deletions(-) diff --git a/workspaces/frontend/.eslintrc.js b/workspaces/frontend/.eslintrc.js index 29f4f8bb..b44290b0 100644 --- a/workspaces/frontend/.eslintrc.js +++ b/workspaces/frontend/.eslintrc.js @@ -208,6 +208,28 @@ module.exports = { name: 'react-router', message: 'Use react-router-dom instead.', }, + { + name: '@patternfly/react-core', + message: + 'Use specific component imports: @patternfly/react-core/dist/esm/components/ComponentName', + }, + { + name: '@patternfly/react-table', + message: + 'Use specific component imports: @patternfly/react-table/dist/esm/components/ComponentName', + }, + { + name: '@patternfly/react-icons', + message: 'Use specific icon imports: @patternfly/react-icons/dist/esm/icons/IconName', + }, + { + name: 'date-fns', + message: 'Use specific function imports: date-fns/functionName', + }, + { + name: 'lodash', + message: 'Use specific function imports: lodash/functionName', + }, ], }, ], diff --git a/workspaces/frontend/src/app/App.tsx b/workspaces/frontend/src/app/App.tsx index 3ff011f6..239beb13 100644 --- a/workspaces/frontend/src/app/App.tsx +++ b/workspaces/frontend/src/app/App.tsx @@ -2,20 +2,19 @@ import React, { useEffect } from 'react'; import '@patternfly/patternfly/patternfly-addons.css'; import '@patternfly/react-core/dist/styles/base.css'; import './app.css'; +import { Brand } from '@patternfly/react-core/dist/esm/components/Brand'; +import { Flex } from '@patternfly/react-core/dist/esm/layouts/Flex'; import { - Brand, - Flex, Masthead, MastheadBrand, MastheadContent, MastheadLogo, MastheadMain, MastheadToggle, - Page, - PageToggleButton, - Title, -} from '@patternfly/react-core'; -import { BarsIcon } from '@patternfly/react-icons'; +} from '@patternfly/react-core/dist/esm/components/Masthead'; +import { Page, PageToggleButton } from '@patternfly/react-core/dist/esm/components/Page'; +import { Title } from '@patternfly/react-core/dist/esm/components/Title'; +import { BarsIcon } from '@patternfly/react-icons/dist/esm/icons/bars-icon'; import ErrorBoundary from '~/app/error/ErrorBoundary'; import NamespaceSelector from '~/shared/components/NamespaceSelector'; import logoDarkTheme from '~/images/logo-dark-theme.svg'; diff --git a/workspaces/frontend/src/app/EnsureAPIAvailability.tsx b/workspaces/frontend/src/app/EnsureAPIAvailability.tsx index 9fc3c24a..53d16a1e 100644 --- a/workspaces/frontend/src/app/EnsureAPIAvailability.tsx +++ b/workspaces/frontend/src/app/EnsureAPIAvailability.tsx @@ -1,5 +1,6 @@ import React from 'react'; -import { Bullseye, Spinner } from '@patternfly/react-core'; +import { Bullseye } from '@patternfly/react-core/dist/esm/layouts/Bullseye'; +import { Spinner } from '@patternfly/react-core/dist/esm/components/Spinner'; import { useNotebookAPI } from './hooks/useNotebookAPI'; interface EnsureAPIAvailabilityProps { diff --git a/workspaces/frontend/src/app/NavSidebar.tsx b/workspaces/frontend/src/app/NavSidebar.tsx index 0bd4ac81..bad77bd8 100644 --- a/workspaces/frontend/src/app/NavSidebar.tsx +++ b/workspaces/frontend/src/app/NavSidebar.tsx @@ -1,14 +1,13 @@ import React, { useState } from 'react'; import { NavLink } from 'react-router-dom'; +import { Brand } from '@patternfly/react-core/dist/esm/components/Brand'; import { - Brand, Nav, NavExpandable, NavItem, NavList, - PageSidebar, - PageSidebarBody, -} from '@patternfly/react-core'; +} from '@patternfly/react-core/dist/esm/components/Nav'; +import { PageSidebar, PageSidebarBody } from '@patternfly/react-core/dist/esm/components/Page'; import { useTypedLocation } from '~/app/routerHelper'; import { useNavData, isNavDataGroup, NavDataHref, NavDataGroup } from './AppRoutes'; import { isMUITheme, LOGO_LIGHT } from './const'; diff --git a/workspaces/frontend/src/app/components/LoadError.tsx b/workspaces/frontend/src/app/components/LoadError.tsx index 60114e99..2ca06b98 100644 --- a/workspaces/frontend/src/app/components/LoadError.tsx +++ b/workspaces/frontend/src/app/components/LoadError.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; -import { Alert, Bullseye } from '@patternfly/react-core'; +import { Alert } from '@patternfly/react-core/dist/esm/components/Alert'; +import { Bullseye } from '@patternfly/react-core/dist/esm/layouts/Bullseye'; interface LoadErrorProps { error: Error; diff --git a/workspaces/frontend/src/app/components/LoadingSpinner.tsx b/workspaces/frontend/src/app/components/LoadingSpinner.tsx index 9750a392..945bf967 100644 --- a/workspaces/frontend/src/app/components/LoadingSpinner.tsx +++ b/workspaces/frontend/src/app/components/LoadingSpinner.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; -import { Bullseye, Spinner } from '@patternfly/react-core'; +import { Bullseye } from '@patternfly/react-core/dist/esm/layouts/Bullseye'; +import { Spinner } from '@patternfly/react-core/dist/esm/components/Spinner'; // TODO: simple LoadingSpinner component -- we should improve this later diff --git a/workspaces/frontend/src/app/components/ThemeAwareSearchInput.tsx b/workspaces/frontend/src/app/components/ThemeAwareSearchInput.tsx index 967e2d9f..ce82341a 100644 --- a/workspaces/frontend/src/app/components/ThemeAwareSearchInput.tsx +++ b/workspaces/frontend/src/app/components/ThemeAwareSearchInput.tsx @@ -1,5 +1,9 @@ import React from 'react'; -import { SearchInput, SearchInputProps, TextInput } from '@patternfly/react-core'; +import { + SearchInput, + SearchInputProps, +} from '@patternfly/react-core/dist/esm/components/SearchInput'; +import { TextInput } from '@patternfly/react-core/dist/esm/components/TextInput'; import FormFieldset from 'app/components/FormFieldset'; import { isMUITheme } from 'app/const'; diff --git a/workspaces/frontend/src/app/components/ValidationErrorAlert.tsx b/workspaces/frontend/src/app/components/ValidationErrorAlert.tsx index 417969b9..44390859 100644 --- a/workspaces/frontend/src/app/components/ValidationErrorAlert.tsx +++ b/workspaces/frontend/src/app/components/ValidationErrorAlert.tsx @@ -1,5 +1,6 @@ import React from 'react'; -import { Alert, List, ListItem } from '@patternfly/react-core'; +import { Alert } from '@patternfly/react-core/dist/esm/components/Alert'; +import { List, ListItem } from '@patternfly/react-core/dist/esm/components/List'; import { ValidationError } from '~/shared/api/backendApiTypes'; import { ErrorEnvelopeException } from '~/shared/api/apiUtils'; diff --git a/workspaces/frontend/src/app/components/WorkspaceTable.tsx b/workspaces/frontend/src/app/components/WorkspaceTable.tsx index 6254ff1c..184e8408 100644 --- a/workspaces/frontend/src/app/components/WorkspaceTable.tsx +++ b/workspaces/frontend/src/app/components/WorkspaceTable.tsx @@ -1,17 +1,19 @@ import React, { useCallback, useImperativeHandle, useMemo, useRef, useState } from 'react'; +import { PageSection } from '@patternfly/react-core/dist/esm/components/Page'; import { - PageSection, TimestampTooltipVariant, Timestamp, - Label, +} from '@patternfly/react-core/dist/esm/components/Timestamp'; +import { Label } from '@patternfly/react-core/dist/esm/components/Label'; +import { PaginationVariant, Pagination, - Content, - Tooltip, - Bullseye, - Button, - Icon, -} from '@patternfly/react-core'; +} from '@patternfly/react-core/dist/esm/components/Pagination'; +import { Content } from '@patternfly/react-core/dist/esm/components/Content'; +import { Tooltip } from '@patternfly/react-core/dist/esm/components/Tooltip'; +import { Bullseye } from '@patternfly/react-core/dist/esm/layouts/Bullseye'; +import { Button } from '@patternfly/react-core/dist/esm/components/Button'; +import { Icon } from '@patternfly/react-core/dist/esm/components/Icon'; import { Table, Thead, @@ -22,14 +24,12 @@ import { ThProps, ActionsColumn, IActions, -} from '@patternfly/react-table'; -import { - InfoCircleIcon, - ExclamationTriangleIcon, - TimesCircleIcon, - QuestionCircleIcon, -} from '@patternfly/react-icons'; -import { formatDistanceToNow } from 'date-fns'; +} from '@patternfly/react-table/dist/esm/components/Table'; +import { InfoCircleIcon } from '@patternfly/react-icons/dist/esm/icons/info-circle-icon'; +import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon'; +import { TimesCircleIcon } from '@patternfly/react-icons/dist/esm/icons/times-circle-icon'; +import { QuestionCircleIcon } from '@patternfly/react-icons/dist/esm/icons/question-circle-icon'; +import { formatDistanceToNow } from 'date-fns/formatDistanceToNow'; import { Workspace, WorkspaceState } from '~/shared/api/backendApiTypes'; import { DataFieldKey, diff --git a/workspaces/frontend/src/app/context/WorkspaceActionsContext.tsx b/workspaces/frontend/src/app/context/WorkspaceActionsContext.tsx index 7a01737e..d9a70d54 100644 --- a/workspaces/frontend/src/app/context/WorkspaceActionsContext.tsx +++ b/workspaces/frontend/src/app/context/WorkspaceActionsContext.tsx @@ -1,5 +1,9 @@ import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react'; -import { Drawer, DrawerContent, DrawerContentBody } from '@patternfly/react-core'; +import { + Drawer, + DrawerContent, + DrawerContentBody, +} from '@patternfly/react-core/dist/esm/components/Drawer'; import { useNamespaceContext } from '~/app/context/NamespaceContextProvider'; import { useNotebookAPI } from '~/app/hooks/useNotebookAPI'; import { WorkspaceDetails } from '~/app/pages/Workspaces/Details/WorkspaceDetails'; diff --git a/workspaces/frontend/src/app/error/ErrorBoundary.tsx b/workspaces/frontend/src/app/error/ErrorBoundary.tsx index 29d8830c..e397abb9 100644 --- a/workspaces/frontend/src/app/error/ErrorBoundary.tsx +++ b/workspaces/frontend/src/app/error/ErrorBoundary.tsx @@ -1,7 +1,9 @@ import React from 'react'; import { Link } from 'react-router-dom'; -import { Button, Split, SplitItem, Title } from '@patternfly/react-core'; -import { TimesIcon } from '@patternfly/react-icons'; +import { Button } from '@patternfly/react-core/dist/esm/components/Button'; +import { Split, SplitItem } from '@patternfly/react-core/dist/esm/layouts/Split'; +import { Title } from '@patternfly/react-core/dist/esm/components/Title'; +import { TimesIcon } from '@patternfly/react-icons/dist/esm/icons/times-icon'; import { AppRoutePaths } from '~/app/routes'; import ErrorDetails from '~/app/error/ErrorDetails'; import UpdateState from '~/app/error/UpdateState'; diff --git a/workspaces/frontend/src/app/error/ErrorDetails.tsx b/workspaces/frontend/src/app/error/ErrorDetails.tsx index 61ac57a5..551c3767 100644 --- a/workspaces/frontend/src/app/error/ErrorDetails.tsx +++ b/workspaces/frontend/src/app/error/ErrorDetails.tsx @@ -2,12 +2,14 @@ import React from 'react'; import { ClipboardCopy, ClipboardCopyVariant, +} from '@patternfly/react-core/dist/esm/components/ClipboardCopy'; +import { DescriptionList, DescriptionListDescription, DescriptionListGroup, DescriptionListTerm, - Title, -} from '@patternfly/react-core'; +} from '@patternfly/react-core/dist/esm/components/DescriptionList'; +import { Title } from '@patternfly/react-core/dist/esm/components/Title'; type ErrorDetailsProps = { title: string; diff --git a/workspaces/frontend/src/app/error/UpdateState.tsx b/workspaces/frontend/src/app/error/UpdateState.tsx index ff19100b..d3cee49c 100644 --- a/workspaces/frontend/src/app/error/UpdateState.tsx +++ b/workspaces/frontend/src/app/error/UpdateState.tsx @@ -1,14 +1,14 @@ import React from 'react'; +import { Button } from '@patternfly/react-core/dist/esm/components/Button'; import { - Button, EmptyState, - EmptyStateActions, EmptyStateBody, - EmptyStateFooter, EmptyStateVariant, - PageSection, -} from '@patternfly/react-core'; -import { PathMissingIcon } from '@patternfly/react-icons'; + EmptyStateActions, + EmptyStateFooter, +} from '@patternfly/react-core/dist/esm/components/EmptyState'; +import { PageSection } from '@patternfly/react-core/dist/esm/components/Page'; +import { PathMissingIcon } from '@patternfly/react-icons/dist/esm/icons/path-missing-icon'; type Props = { onClose: () => void; diff --git a/workspaces/frontend/src/app/hooks/useWorkspaceRowActions.ts b/workspaces/frontend/src/app/hooks/useWorkspaceRowActions.ts index 06190656..4787107e 100644 --- a/workspaces/frontend/src/app/hooks/useWorkspaceRowActions.ts +++ b/workspaces/frontend/src/app/hooks/useWorkspaceRowActions.ts @@ -1,5 +1,5 @@ import { useCallback } from 'react'; -import { IActions } from '@patternfly/react-table'; +import { IActions } from '@patternfly/react-table/dist/esm/components/Table'; import { Workspace } from '~/shared/api/backendApiTypes'; import { useWorkspaceActionsContext, WorkspaceAction } from '~/app/context/WorkspaceActionsContext'; diff --git a/workspaces/frontend/src/app/pages/Debug/Debug.tsx b/workspaces/frontend/src/app/pages/Debug/Debug.tsx index 5c648316..3c59c3c7 100644 --- a/workspaces/frontend/src/app/pages/Debug/Debug.tsx +++ b/workspaces/frontend/src/app/pages/Debug/Debug.tsx @@ -1,13 +1,13 @@ import React from 'react'; -import { CubesIcon } from '@patternfly/react-icons'; +import { CubesIcon } from '@patternfly/react-icons/dist/esm/icons/cubes-icon'; +import { Button } from '@patternfly/react-core/dist/esm/components/Button'; import { - Button, EmptyState, EmptyStateBody, - EmptyStateFooter, EmptyStateVariant, - PageSection, -} from '@patternfly/react-core'; + EmptyStateFooter, +} from '@patternfly/react-core/dist/esm/components/EmptyState'; +import { PageSection } from '@patternfly/react-core/dist/esm/components/Page'; const Debug: React.FunctionComponent = () => ( diff --git a/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/EditableLabels.tsx b/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/EditableLabels.tsx index 98b1d4df..a9858f9c 100644 --- a/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/EditableLabels.tsx +++ b/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/EditableLabels.tsx @@ -1,15 +1,16 @@ /* eslint-disable @typescript-eslint/no-unused-expressions */ import React, { useRef } from 'react'; -import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table'; +import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table/dist/esm/components/Table'; +import { Button } from '@patternfly/react-core/dist/esm/components/Button'; import { - Button, FormFieldGroupExpandable, FormFieldGroupHeader, - TextInput, -} from '@patternfly/react-core'; +} from '@patternfly/react-core/dist/esm/components/Form'; +import { TextInput } from '@patternfly/react-core/dist/esm/components/TextInput'; import inlineEditStyles from '@patternfly/react-styles/css/components/InlineEdit/inline-edit'; import { css } from '@patternfly/react-styles'; -import { PlusCircleIcon, TrashAltIcon } from '@patternfly/react-icons'; +import { PlusCircleIcon } from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; +import { TrashAltIcon } from '@patternfly/react-icons/dist/esm/icons/trash-alt-icon'; import { WorkspaceOptionLabel } from '~/shared/api/backendApiTypes'; interface EditableRowInterface { diff --git a/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/WorkspaceKindForm.tsx b/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/WorkspaceKindForm.tsx index d99bdb8e..c17a78c2 100644 --- a/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/WorkspaceKindForm.tsx +++ b/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/WorkspaceKindForm.tsx @@ -1,19 +1,12 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react'; -import { - Button, - Content, - ContentVariants, - EmptyState, - EmptyStateBody, - Flex, - FlexItem, - PageGroup, - PageSection, - Stack, - StackItem, -} from '@patternfly/react-core'; +import { Button } from '@patternfly/react-core/dist/esm/components/Button'; +import { Content, ContentVariants } from '@patternfly/react-core/dist/esm/components/Content'; +import { Flex, FlexItem } from '@patternfly/react-core/dist/esm/layouts/Flex'; +import { PageGroup, PageSection } from '@patternfly/react-core/dist/esm/components/Page'; +import { Stack, StackItem } from '@patternfly/react-core/dist/esm/layouts/Stack'; import { t_global_spacer_sm as SmallPadding } from '@patternfly/react-tokens'; -import { ExclamationCircleIcon } from '@patternfly/react-icons'; +import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon'; +import { EmptyState, EmptyStateBody } from '@patternfly/react-core/dist/esm/components/EmptyState'; import { ValidationErrorAlert } from '~/app/components/ValidationErrorAlert'; import useWorkspaceKindByName from '~/app/hooks/useWorkspaceKindByName'; import { WorkspaceKind, ValidationError } from '~/shared/api/backendApiTypes'; diff --git a/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/WorkspaceKindFormPaginatedTable.tsx b/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/WorkspaceKindFormPaginatedTable.tsx index d7887f2f..c503c446 100644 --- a/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/WorkspaceKindFormPaginatedTable.tsx +++ b/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/WorkspaceKindFormPaginatedTable.tsx @@ -1,17 +1,16 @@ import React, { useMemo, useState } from 'react'; -import { Table, Thead, Tr, Td, Tbody, Th } from '@patternfly/react-table'; +import { Table, Thead, Tr, Td, Tbody, Th } from '@patternfly/react-table/dist/esm/components/Table'; +import { getUniqueId } from '@patternfly/react-core/helpers'; +import { Label } from '@patternfly/react-core/dist/esm/components/Label'; +import { MenuToggle } from '@patternfly/react-core/dist/esm/components/MenuToggle'; +import { PageSection } from '@patternfly/react-core/dist/esm/components/Page'; import { - Dropdown, - DropdownItem, - getUniqueId, - Label, - MenuToggle, - PageSection, Pagination, PaginationVariant, - Radio, -} from '@patternfly/react-core'; -import { EllipsisVIcon } from '@patternfly/react-icons'; +} from '@patternfly/react-core/dist/esm/components/Pagination'; +import { Radio } from '@patternfly/react-core/dist/esm/components/Radio'; +import { Dropdown, DropdownItem } from '@patternfly/react-core/dist/esm/components/Dropdown'; +import { EllipsisVIcon } from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; import { WorkspaceKindImageConfigValue } from '~/app/types'; import { WorkspacePodConfigValue } from '~/shared/api/backendApiTypes'; diff --git a/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/fileUpload/WorkspaceKindFileUpload.tsx b/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/fileUpload/WorkspaceKindFileUpload.tsx index bbd78ee2..bd0b5d1d 100644 --- a/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/fileUpload/WorkspaceKindFileUpload.tsx +++ b/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/fileUpload/WorkspaceKindFileUpload.tsx @@ -2,13 +2,12 @@ import React, { useCallback, useState } from 'react'; import yaml, { YAMLException } from 'js-yaml'; import { FileUpload, - DropEvent, - FileUploadHelperText, - HelperText, - HelperTextItem, - Content, DropzoneErrorCode, -} from '@patternfly/react-core'; + FileUploadHelperText, +} from '@patternfly/react-core/dist/esm/components/FileUpload'; +import { DropEvent } from '@patternfly/react-core/dist/esm/helpers/typeUtils'; +import { HelperText, HelperTextItem } from '@patternfly/react-core/dist/esm/components/HelperText'; +import { Content } from '@patternfly/react-core/dist/esm/components/Content'; import { isValidWorkspaceKindYaml } from '~/app/pages/WorkspaceKinds/Form/helpers'; import { ValidationStatus } from '~/app/pages/WorkspaceKinds/Form/WorkspaceKindForm'; diff --git a/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/image/WorkspaceKindFormImage.tsx b/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/image/WorkspaceKindFormImage.tsx index 9f50e5a0..05c4982f 100644 --- a/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/image/WorkspaceKindFormImage.tsx +++ b/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/image/WorkspaceKindFormImage.tsx @@ -1,22 +1,24 @@ import React, { useCallback, useState } from 'react'; +import { Button } from '@patternfly/react-core/dist/esm/components/Button'; +import { Content } from '@patternfly/react-core/dist/esm/components/Content'; import { - Button, - Content, Modal, ModalHeader, ModalFooter, ModalVariant, - EmptyState, +} from '@patternfly/react-core/dist/esm/components/Modal'; +import { EmptyStateFooter, EmptyStateActions, + EmptyState, EmptyStateBody, - ExpandableSection, -} from '@patternfly/react-core'; -import { PlusCircleIcon, CubesIcon } from '@patternfly/react-icons'; +} from '@patternfly/react-core/dist/esm/components/EmptyState'; +import { ExpandableSection } from '@patternfly/react-core/dist/esm/components/ExpandableSection'; +import { PlusCircleIcon } from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; +import { CubesIcon } from '@patternfly/react-icons/dist/esm/icons/cubes-icon'; import { WorkspaceKindImageConfigData, WorkspaceKindImageConfigValue } from '~/app/types'; import { emptyImage } from '~/app/pages/WorkspaceKinds/Form/helpers'; import { WorkspaceKindFormPaginatedTable } from '~/app/pages/WorkspaceKinds/Form/WorkspaceKindFormPaginatedTable'; - import { WorkspaceKindFormImageModal } from './WorkspaceKindFormImageModal'; interface WorkspaceKindFormImageProps { diff --git a/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/image/WorkspaceKindFormImageModal.tsx b/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/image/WorkspaceKindFormImageModal.tsx index 607d3aad..284b0fdb 100644 --- a/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/image/WorkspaceKindFormImageModal.tsx +++ b/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/image/WorkspaceKindFormImageModal.tsx @@ -4,15 +4,16 @@ import { ModalHeader, ModalBody, ModalFooter, - Button, - Form, - FormGroup, - TextInput, +} from '@patternfly/react-core/dist/esm/components/Modal'; +import { Button } from '@patternfly/react-core/dist/esm/components/Button'; +import { Form, FormGroup } from '@patternfly/react-core/dist/esm/components/Form'; +import { TextInput } from '@patternfly/react-core/dist/esm/components/TextInput'; +import { FormSelect, FormSelectOption, - Switch, - HelperText, -} from '@patternfly/react-core'; +} from '@patternfly/react-core/dist/esm/components/FormSelect'; +import { Switch } from '@patternfly/react-core/dist/esm/components/Switch'; +import { HelperText } from '@patternfly/react-core/dist/esm/components/HelperText'; import { WorkspaceKindImageConfigValue, ImagePullPolicy } from '~/app/types'; import { EditableLabels } from '~/app/pages/WorkspaceKinds/Form/EditableLabels'; import { emptyImage } from '~/app/pages/WorkspaceKinds/Form/helpers'; diff --git a/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/image/WorkspaceKindFormImagePort.tsx b/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/image/WorkspaceKindFormImagePort.tsx index 0b542fb7..2f810000 100644 --- a/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/image/WorkspaceKindFormImagePort.tsx +++ b/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/image/WorkspaceKindFormImagePort.tsx @@ -1,12 +1,11 @@ import React from 'react'; import { + FormGroup, FormFieldGroupExpandable, FormFieldGroupHeader, - FormGroup, - Grid, - GridItem, - TextInput, -} from '@patternfly/react-core'; +} from '@patternfly/react-core/dist/esm/components/Form'; +import { Grid, GridItem } from '@patternfly/react-core/dist/esm/layouts/Grid'; +import { TextInput } from '@patternfly/react-core/dist/esm/components/TextInput'; import { WorkspaceKindImagePort } from '~/app/types'; interface WorkspaceKindFormImagePortProps { diff --git a/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/image/WorkspaceKindFormImageRedirect.tsx b/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/image/WorkspaceKindFormImageRedirect.tsx index 1f456b7f..f250624f 100644 --- a/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/image/WorkspaceKindFormImageRedirect.tsx +++ b/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/image/WorkspaceKindFormImageRedirect.tsx @@ -1,12 +1,14 @@ import React from 'react'; import { + FormGroup, FormFieldGroupExpandable, FormFieldGroupHeader, - FormGroup, +} from '@patternfly/react-core/dist/esm/components/Form'; +import { FormSelect, FormSelectOption, - TextInput, -} from '@patternfly/react-core'; +} from '@patternfly/react-core/dist/esm/components/FormSelect'; +import { TextInput } from '@patternfly/react-core/dist/esm/components/TextInput'; import { WorkspaceOptionRedirect, WorkspaceRedirectMessageLevel, diff --git a/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/podConfig/ResourceInputWrapper.tsx b/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/podConfig/ResourceInputWrapper.tsx index 5c0371b3..715cb39b 100644 --- a/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/podConfig/ResourceInputWrapper.tsx +++ b/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/podConfig/ResourceInputWrapper.tsx @@ -2,10 +2,9 @@ import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react' import { FormSelect, FormSelectOption, - NumberInput, - Split, - SplitItem, -} from '@patternfly/react-core'; +} from '@patternfly/react-core/dist/esm/components/FormSelect'; +import { NumberInput } from '@patternfly/react-core/dist/esm/components/NumberInput'; +import { Split, SplitItem } from '@patternfly/react-core/dist/esm/layouts/Split'; import { CPU_UNITS, MEMORY_UNITS_FOR_SELECTION, diff --git a/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/podConfig/WorkspaceKindFormPodConfig.tsx b/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/podConfig/WorkspaceKindFormPodConfig.tsx index 5f18678f..8e70a3d9 100644 --- a/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/podConfig/WorkspaceKindFormPodConfig.tsx +++ b/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/podConfig/WorkspaceKindFormPodConfig.tsx @@ -1,18 +1,21 @@ import React, { useCallback, useState } from 'react'; +import { Button } from '@patternfly/react-core/dist/esm/components/Button'; +import { Content } from '@patternfly/react-core/dist/esm/components/Content'; import { - Button, - Content, Modal, ModalHeader, ModalFooter, ModalVariant, +} from '@patternfly/react-core/dist/esm/components/Modal'; +import { EmptyState, + EmptyStateBody, EmptyStateFooter, EmptyStateActions, - ExpandableSection, - EmptyStateBody, -} from '@patternfly/react-core'; -import { PlusCircleIcon, CubesIcon } from '@patternfly/react-icons'; +} from '@patternfly/react-core/dist/esm/components/EmptyState'; +import { ExpandableSection } from '@patternfly/react-core/dist/esm/components/ExpandableSection'; +import { PlusCircleIcon } from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; +import { CubesIcon } from '@patternfly/react-icons/dist/esm/icons/cubes-icon'; import { emptyPodConfig } from '~/app/pages/WorkspaceKinds/Form/helpers'; import { WorkspaceKindPodConfigValue, WorkspaceKindPodConfigData } from '~/app/types'; import { WorkspaceKindFormPaginatedTable } from '~/app/pages/WorkspaceKinds/Form/WorkspaceKindFormPaginatedTable'; diff --git a/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/podConfig/WorkspaceKindFormPodConfigModal.tsx b/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/podConfig/WorkspaceKindFormPodConfigModal.tsx index 4d7ca683..cd979a5c 100644 --- a/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/podConfig/WorkspaceKindFormPodConfigModal.tsx +++ b/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/podConfig/WorkspaceKindFormPodConfigModal.tsx @@ -4,13 +4,12 @@ import { ModalHeader, ModalBody, ModalFooter, - Button, - Form, - FormGroup, - TextInput, - Switch, - HelperText, -} from '@patternfly/react-core'; +} from '@patternfly/react-core/dist/esm/components/Modal'; +import { Button } from '@patternfly/react-core/dist/esm/components/Button'; +import { Form, FormGroup } from '@patternfly/react-core/dist/esm/components/Form'; +import { TextInput } from '@patternfly/react-core/dist/esm/components/TextInput'; +import { Switch } from '@patternfly/react-core/dist/esm/components/Switch'; +import { HelperText } from '@patternfly/react-core/dist/esm/components/HelperText'; import { WorkspaceKindPodConfigValue } from '~/app/types'; import { WorkspaceOptionLabel } from '~/shared/api/backendApiTypes'; import { EditableLabels } from '~/app/pages/WorkspaceKinds/Form/EditableLabels'; diff --git a/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/podConfig/WorkspaceKindFormResource.tsx b/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/podConfig/WorkspaceKindFormResource.tsx index 08106117..b4f224ba 100644 --- a/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/podConfig/WorkspaceKindFormResource.tsx +++ b/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/podConfig/WorkspaceKindFormResource.tsx @@ -1,17 +1,16 @@ import React, { useCallback, useEffect, useState, useMemo } from 'react'; +import { Button } from '@patternfly/react-core/dist/esm/components/Button'; +import { Grid, GridItem } from '@patternfly/react-core/dist/esm/layouts/Grid'; +import { Title } from '@patternfly/react-core/dist/esm/components/Title'; import { - Button, - Grid, - GridItem, - Title, FormFieldGroupExpandable, FormFieldGroupHeader, - TextInput, - Checkbox, - HelperText, - HelperTextItem, -} from '@patternfly/react-core'; -import { PlusCircleIcon, TrashAltIcon } from '@patternfly/react-icons'; +} from '@patternfly/react-core/dist/esm/components/Form'; +import { TextInput } from '@patternfly/react-core/dist/esm/components/TextInput'; +import { Checkbox } from '@patternfly/react-core/dist/esm/components/Checkbox'; +import { HelperText, HelperTextItem } from '@patternfly/react-core/dist/esm/components/HelperText'; +import { PlusCircleIcon } from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; +import { TrashAltIcon } from '@patternfly/react-icons/dist/esm/icons/trash-alt-icon'; import { generateUniqueId } from '~/app/pages/WorkspaceKinds/Form/helpers'; import { isMemoryLimitLarger } from '~/shared/utilities/valueUnits'; import { ResourceInputWrapper } from './ResourceInputWrapper'; diff --git a/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/podTemplate/WorkspaceKindFormPodTemplate.tsx b/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/podTemplate/WorkspaceKindFormPodTemplate.tsx index a0307077..a6c69821 100644 --- a/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/podTemplate/WorkspaceKindFormPodTemplate.tsx +++ b/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/podTemplate/WorkspaceKindFormPodTemplate.tsx @@ -1,14 +1,13 @@ +import React, { useCallback, useState } from 'react'; import { - ExpandableSection, Form, FormFieldGroup, FormFieldGroupHeader, FormGroup, - HelperText, - HelperTextItem, - Switch, -} from '@patternfly/react-core'; -import React, { useCallback, useState } from 'react'; +} from '@patternfly/react-core/dist/esm/components/Form'; +import { ExpandableSection } from '@patternfly/react-core/dist/esm/components/ExpandableSection'; +import { HelperText, HelperTextItem } from '@patternfly/react-core/dist/esm/components/HelperText'; +import { Switch } from '@patternfly/react-core/dist/esm/components/Switch'; import { WorkspaceKindPodTemplateData } from '~/app/types'; import { EditableLabels } from '~/app/pages/WorkspaceKinds/Form/EditableLabels'; import { WorkspacePodVolumeMount } from '~/shared/api/backendApiTypes'; diff --git a/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/properties/WorkspaceKindFormProperties.tsx b/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/properties/WorkspaceKindFormProperties.tsx index 6d3c9b93..652156a3 100644 --- a/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/properties/WorkspaceKindFormProperties.tsx +++ b/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/properties/WorkspaceKindFormProperties.tsx @@ -1,13 +1,10 @@ import React, { useState } from 'react'; -import { - Content, - ExpandableSection, - Form, - FormGroup, - HelperText, - Switch, - TextInput, -} from '@patternfly/react-core'; +import { Content } from '@patternfly/react-core/dist/esm/components/Content'; +import { ExpandableSection } from '@patternfly/react-core/dist/esm/components/ExpandableSection'; +import { Form, FormGroup } from '@patternfly/react-core/dist/esm/components/Form'; +import { HelperText } from '@patternfly/react-core/dist/esm/components/HelperText'; +import { Switch } from '@patternfly/react-core/dist/esm/components/Switch'; +import { TextInput } from '@patternfly/react-core/dist/esm/components/TextInput'; import { WorkspaceKindProperties } from '~/app/types'; interface WorkspaceKindFormPropertiesProps { diff --git a/workspaces/frontend/src/app/pages/WorkspaceKinds/WorkspaceKinds.tsx b/workspaces/frontend/src/app/pages/WorkspaceKinds/WorkspaceKinds.tsx index 56026914..daea4356 100644 --- a/workspaces/frontend/src/app/pages/WorkspaceKinds/WorkspaceKinds.tsx +++ b/workspaces/frontend/src/app/pages/WorkspaceKinds/WorkspaceKinds.tsx @@ -3,25 +3,29 @@ import { Drawer, DrawerContent, DrawerContentBody, - PageSection, - Content, - Tooltip, - Label, +} from '@patternfly/react-core/dist/esm/components/Drawer'; +import { PageSection } from '@patternfly/react-core/dist/esm/components/Page'; +import { Content } from '@patternfly/react-core/dist/esm/components/Content'; +import { Tooltip } from '@patternfly/react-core/dist/esm/components/Tooltip'; +import { Label } from '@patternfly/react-core/dist/esm/components/Label'; +import { Toolbar, ToolbarContent, ToolbarItem, + ToolbarGroup, + ToolbarFilter, + ToolbarToggleGroup, +} from '@patternfly/react-core/dist/esm/components/Toolbar'; +import { Menu, MenuContent, MenuList, MenuItem, - MenuToggle, - Popper, - ToolbarGroup, - ToolbarFilter, - ToolbarToggleGroup, - Bullseye, - Button, -} from '@patternfly/react-core'; +} from '@patternfly/react-core/dist/esm/components/Menu'; +import { MenuToggle } from '@patternfly/react-core/dist/esm/components/MenuToggle'; +import { Popper } from '@patternfly/react-core/helpers'; +import { Bullseye } from '@patternfly/react-core/dist/esm/layouts/Bullseye'; +import { Button } from '@patternfly/react-core/dist/esm/components/Button'; import { Table, Thead, @@ -32,8 +36,8 @@ import { ThProps, ActionsColumn, IActions, -} from '@patternfly/react-table'; -import { FilterIcon } from '@patternfly/react-icons'; +} from '@patternfly/react-table/dist/esm/components/Table'; +import { FilterIcon } from '@patternfly/react-icons/dist/esm/icons/filter-icon'; import { WorkspaceKind } from '~/shared/api/backendApiTypes'; import useWorkspaceKinds from '~/app/hooks/useWorkspaceKinds'; import { useWorkspaceCountPerKind } from '~/app/hooks/useWorkspaceCountPerKind'; diff --git a/workspaces/frontend/src/app/pages/WorkspaceKinds/details/WorkspaceKindDetails.tsx b/workspaces/frontend/src/app/pages/WorkspaceKinds/details/WorkspaceKindDetails.tsx index 7a73090f..ebaf0531 100644 --- a/workspaces/frontend/src/app/pages/WorkspaceKinds/details/WorkspaceKindDetails.tsx +++ b/workspaces/frontend/src/app/pages/WorkspaceKinds/details/WorkspaceKindDetails.tsx @@ -3,15 +3,17 @@ import { DrawerActions, DrawerCloseButton, DrawerHead, - DrawerPanelBody, DrawerPanelContent, + DrawerPanelBody, +} from '@patternfly/react-core/dist/esm/components/Drawer'; +import { Tabs, Tab, TabTitleText, - Title, TabContentBody, TabContent, -} from '@patternfly/react-core'; +} from '@patternfly/react-core/dist/esm/components/Tabs'; +import { Title } from '@patternfly/react-core/dist/esm/components/Title'; import { WorkspaceKind } from '~/shared/api/backendApiTypes'; import { WorkspaceCountPerKind } from '~/app/hooks/useWorkspaceCountPerKind'; import { WorkspaceKindDetailsNamespaces } from '~/app/pages/WorkspaceKinds/details/WorkspaceKindDetailsNamespaces'; diff --git a/workspaces/frontend/src/app/pages/WorkspaceKinds/details/WorkspaceKindDetailsOverview.tsx b/workspaces/frontend/src/app/pages/WorkspaceKinds/details/WorkspaceKindDetailsOverview.tsx index 02cca47c..d5aa3e8f 100644 --- a/workspaces/frontend/src/app/pages/WorkspaceKinds/details/WorkspaceKindDetailsOverview.tsx +++ b/workspaces/frontend/src/app/pages/WorkspaceKinds/details/WorkspaceKindDetailsOverview.tsx @@ -4,8 +4,8 @@ import { DescriptionListTerm, DescriptionListGroup, DescriptionListDescription, - Divider, -} from '@patternfly/react-core'; +} from '@patternfly/react-core/dist/esm/components/DescriptionList'; +import { Divider } from '@patternfly/react-core/dist/esm/components/Divider'; import { WorkspaceKind } from '~/shared/api/backendApiTypes'; import ImageFallback from '~/shared/components/ImageFallback'; import WithValidImage from '~/shared/components/WithValidImage'; diff --git a/workspaces/frontend/src/app/pages/WorkspaceKinds/details/WorkspaceKindDetailsTable.tsx b/workspaces/frontend/src/app/pages/WorkspaceKinds/details/WorkspaceKindDetailsTable.tsx index 12b3b597..5ee7bc16 100644 --- a/workspaces/frontend/src/app/pages/WorkspaceKinds/details/WorkspaceKindDetailsTable.tsx +++ b/workspaces/frontend/src/app/pages/WorkspaceKinds/details/WorkspaceKindDetailsTable.tsx @@ -1,6 +1,11 @@ import React, { useMemo, useState } from 'react'; -import { Table, Thead, Tr, Td, Tbody, Th } from '@patternfly/react-table'; -import { Button, Content, Pagination, PaginationVariant } from '@patternfly/react-core'; +import { Table, Thead, Tr, Td, Tbody, Th } from '@patternfly/react-table/dist/esm/components/Table'; +import { + Pagination, + PaginationVariant, +} from '@patternfly/react-core/dist/esm/components/Pagination'; +import { Content } from '@patternfly/react-core/dist/esm/components/Content'; +import { Button } from '@patternfly/react-core/dist/esm/components/Button'; import { useTypedNavigate } from '~/app/routerHelper'; import { RouteStateMap } from '~/app/routes'; diff --git a/workspaces/frontend/src/app/pages/WorkspaceKinds/summary/WorkspaceKindSummary.tsx b/workspaces/frontend/src/app/pages/WorkspaceKinds/summary/WorkspaceKindSummary.tsx index f09d1102..8a6e02dc 100644 --- a/workspaces/frontend/src/app/pages/WorkspaceKinds/summary/WorkspaceKindSummary.tsx +++ b/workspaces/frontend/src/app/pages/WorkspaceKinds/summary/WorkspaceKindSummary.tsx @@ -1,13 +1,9 @@ import React, { useCallback, useRef, useState } from 'react'; -import { - Button, - Content, - ContentVariants, - PageSection, - Stack, - StackItem, -} from '@patternfly/react-core'; -import { ArrowLeftIcon } from '@patternfly/react-icons'; +import { Button } from '@patternfly/react-core/dist/esm/components/Button'; +import { Content, ContentVariants } from '@patternfly/react-core/dist/esm/components/Content'; +import { PageSection } from '@patternfly/react-core/dist/esm/components/Page'; +import { Stack, StackItem } from '@patternfly/react-core/dist/esm/layouts/Stack'; +import { ArrowLeftIcon } from '@patternfly/react-icons/dist/esm/icons/arrow-left-icon'; import { useTypedLocation, useTypedNavigate, useTypedParams } from '~/app/routerHelper'; import WorkspaceTable, { WorkspaceTableFilteredColumn, diff --git a/workspaces/frontend/src/app/pages/WorkspaceKinds/summary/WorkspaceKindSummaryExpandableCard.tsx b/workspaces/frontend/src/app/pages/WorkspaceKinds/summary/WorkspaceKindSummaryExpandableCard.tsx index 4aa85d6c..a1c3bee8 100644 --- a/workspaces/frontend/src/app/pages/WorkspaceKinds/summary/WorkspaceKindSummaryExpandableCard.tsx +++ b/workspaces/frontend/src/app/pages/WorkspaceKinds/summary/WorkspaceKindSummaryExpandableCard.tsx @@ -1,20 +1,17 @@ import React, { useMemo } from 'react'; +import { Bullseye } from '@patternfly/react-core/dist/esm/layouts/Bullseye'; +import { Button } from '@patternfly/react-core/dist/esm/components/Button'; import { - Bullseye, - Button, Card, CardBody, - CardExpandableContent, CardHeader, CardTitle, - Content, - ContentVariants, - Divider, - Flex, - FlexItem, - Stack, - StackItem, -} from '@patternfly/react-core'; + CardExpandableContent, +} from '@patternfly/react-core/dist/esm/components/Card'; +import { Content, ContentVariants } from '@patternfly/react-core/dist/esm/components/Content'; +import { Divider } from '@patternfly/react-core/dist/esm/components/Divider'; +import { Flex, FlexItem } from '@patternfly/react-core/dist/esm/layouts/Flex'; +import { Stack, StackItem } from '@patternfly/react-core/dist/esm/layouts/Stack'; import { t_global_spacer_md as MediumPadding, t_global_font_size_4xl as LargeFontSize, diff --git a/workspaces/frontend/src/app/pages/Workspaces/DataVolumesList.tsx b/workspaces/frontend/src/app/pages/Workspaces/DataVolumesList.tsx index 9c2a87bf..d509e078 100644 --- a/workspaces/frontend/src/app/pages/Workspaces/DataVolumesList.tsx +++ b/workspaces/frontend/src/app/pages/Workspaces/DataVolumesList.tsx @@ -2,18 +2,19 @@ import React from 'react'; import { ClipboardCopy, ClipboardCopyVariant, - Content, +} from '@patternfly/react-core/dist/esm/components/ClipboardCopy'; +import { Content } from '@patternfly/react-core/dist/esm/components/Content'; +import { DescriptionList, DescriptionListGroup, DescriptionListTerm, DescriptionListDescription, - Flex, - FlexItem, - List, - ListItem, - Tooltip, -} from '@patternfly/react-core'; -import { DatabaseIcon, LockedIcon } from '@patternfly/react-icons'; +} from '@patternfly/react-core/dist/esm/components/DescriptionList'; +import { Flex, FlexItem } from '@patternfly/react-core/dist/esm/layouts/Flex'; +import { List, ListItem } from '@patternfly/react-core/dist/esm/components/List'; +import { Tooltip } from '@patternfly/react-core/dist/esm/components/Tooltip'; +import { DatabaseIcon } from '@patternfly/react-icons/dist/esm/icons/database-icon'; +import { LockedIcon } from '@patternfly/react-icons/dist/esm/icons/locked-icon'; import { Workspace } from '~/shared/api/backendApiTypes'; interface DataVolumesListProps { diff --git a/workspaces/frontend/src/app/pages/Workspaces/Details/WorkspaceDetails.tsx b/workspaces/frontend/src/app/pages/Workspaces/Details/WorkspaceDetails.tsx index 0a5f6052..226291c2 100644 --- a/workspaces/frontend/src/app/pages/Workspaces/Details/WorkspaceDetails.tsx +++ b/workspaces/frontend/src/app/pages/Workspaces/Details/WorkspaceDetails.tsx @@ -3,15 +3,17 @@ import { DrawerActions, DrawerCloseButton, DrawerHead, - DrawerPanelBody, DrawerPanelContent, + DrawerPanelBody, +} from '@patternfly/react-core/dist/esm/components/Drawer'; +import { Tabs, Tab, TabTitleText, - Title, TabContentBody, TabContent, -} from '@patternfly/react-core'; +} from '@patternfly/react-core/dist/esm/components/Tabs'; +import { Title } from '@patternfly/react-core/dist/esm/components/Title'; import { Workspace } from '~/shared/api/backendApiTypes'; import { WorkspaceDetailsOverview } from '~/app/pages/Workspaces/Details/WorkspaceDetailsOverview'; import { WorkspaceDetailsActions } from '~/app/pages/Workspaces/Details/WorkspaceDetailsActions'; diff --git a/workspaces/frontend/src/app/pages/Workspaces/Details/WorkspaceDetailsActions.tsx b/workspaces/frontend/src/app/pages/Workspaces/Details/WorkspaceDetailsActions.tsx index 6b67b349..1c770dca 100644 --- a/workspaces/frontend/src/app/pages/Workspaces/Details/WorkspaceDetailsActions.tsx +++ b/workspaces/frontend/src/app/pages/Workspaces/Details/WorkspaceDetailsActions.tsx @@ -1,12 +1,11 @@ import React, { useState } from 'react'; import { Dropdown, - DropdownList, - MenuToggle, DropdownItem, - Flex, - FlexItem, -} from '@patternfly/react-core'; + DropdownList, +} from '@patternfly/react-core/dist/esm/components/Dropdown'; +import { MenuToggle } from '@patternfly/react-core/dist/esm/components/MenuToggle'; +import { Flex, FlexItem } from '@patternfly/react-core/dist/esm/layouts/Flex'; interface WorkspaceDetailsActionsProps { // TODO: Uncomment when edit action is fully supported diff --git a/workspaces/frontend/src/app/pages/Workspaces/Details/WorkspaceDetailsActivity.tsx b/workspaces/frontend/src/app/pages/Workspaces/Details/WorkspaceDetailsActivity.tsx index befa43dc..30601dce 100644 --- a/workspaces/frontend/src/app/pages/Workspaces/Details/WorkspaceDetailsActivity.tsx +++ b/workspaces/frontend/src/app/pages/Workspaces/Details/WorkspaceDetailsActivity.tsx @@ -1,12 +1,12 @@ import React from 'react'; -import { format } from 'date-fns'; +import { format } from 'date-fns/format'; import { DescriptionList, DescriptionListTerm, DescriptionListGroup, DescriptionListDescription, - Divider, -} from '@patternfly/react-core'; +} from '@patternfly/react-core/dist/esm/components/DescriptionList'; +import { Divider } from '@patternfly/react-core/dist/esm/components/Divider'; import { Workspace } from '~/shared/api/backendApiTypes'; const DATE_FORMAT = 'PPpp'; diff --git a/workspaces/frontend/src/app/pages/Workspaces/Details/WorkspaceDetailsOverview.tsx b/workspaces/frontend/src/app/pages/Workspaces/Details/WorkspaceDetailsOverview.tsx index 6b00b383..55f5ae92 100644 --- a/workspaces/frontend/src/app/pages/Workspaces/Details/WorkspaceDetailsOverview.tsx +++ b/workspaces/frontend/src/app/pages/Workspaces/Details/WorkspaceDetailsOverview.tsx @@ -4,8 +4,8 @@ import { DescriptionListTerm, DescriptionListGroup, DescriptionListDescription, - Divider, -} from '@patternfly/react-core'; +} from '@patternfly/react-core/dist/esm/components/DescriptionList'; +import { Divider } from '@patternfly/react-core/dist/esm/components/Divider'; import { Workspace } from '~/shared/api/backendApiTypes'; type WorkspaceDetailsOverviewProps = { diff --git a/workspaces/frontend/src/app/pages/Workspaces/ExpandedWorkspaceRow.tsx b/workspaces/frontend/src/app/pages/Workspaces/ExpandedWorkspaceRow.tsx index bb122c4f..38c1b02a 100644 --- a/workspaces/frontend/src/app/pages/Workspaces/ExpandedWorkspaceRow.tsx +++ b/workspaces/frontend/src/app/pages/Workspaces/ExpandedWorkspaceRow.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Tr, Td, ExpandableRowContent } from '@patternfly/react-table'; +import { Tr, Td, ExpandableRowContent } from '@patternfly/react-table/dist/esm/components/Table'; import { Workspace } from '~/shared/api/backendApiTypes'; import { WorkspaceTableColumnKeys } from '~/app/components/WorkspaceTable'; import { WorkspaceStorage } from './WorkspaceStorage'; diff --git a/workspaces/frontend/src/app/pages/Workspaces/Form/WorkspaceForm.tsx b/workspaces/frontend/src/app/pages/Workspaces/Form/WorkspaceForm.tsx index 78d4d709..ae39ca00 100644 --- a/workspaces/frontend/src/app/pages/Workspaces/Form/WorkspaceForm.tsx +++ b/workspaces/frontend/src/app/pages/Workspaces/Form/WorkspaceForm.tsx @@ -1,23 +1,24 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react'; +import { Button } from '@patternfly/react-core/dist/esm/components/Button'; +import { Content } from '@patternfly/react-core/dist/esm/components/Content'; +import { Flex, FlexItem } from '@patternfly/react-core/dist/esm/layouts/Flex'; +import { PageSection } from '@patternfly/react-core/dist/esm/components/Page'; import { - Button, - Content, - Drawer, - DrawerContent, - DrawerContentBody, - DrawerPanelContent, - DrawerHead, - DrawerActions, - DrawerCloseButton, - DrawerPanelBody, - Flex, - FlexItem, - PageSection, ProgressStep, ProgressStepper, - Stack, - Title, -} from '@patternfly/react-core'; +} from '@patternfly/react-core/dist/esm/components/ProgressStepper'; +import { Stack } from '@patternfly/react-core/dist/esm/layouts/Stack'; +import { + Drawer, + DrawerActions, + DrawerCloseButton, + DrawerContent, + DrawerContentBody, + DrawerHead, + DrawerPanelBody, + DrawerPanelContent, +} from '@patternfly/react-core/dist/esm/components/Drawer'; +import { Title } from '@patternfly/react-core/dist/esm/components/Title'; import useGenericObjectState from '~/app/hooks/useGenericObjectState'; import { useNotebookAPI } from '~/app/hooks/useNotebookAPI'; import { WorkspaceFormImageSelection } from '~/app/pages/Workspaces/Form/image/WorkspaceFormImageSelection'; diff --git a/workspaces/frontend/src/app/pages/Workspaces/Form/WorkspaceFormDrawer.tsx b/workspaces/frontend/src/app/pages/Workspaces/Form/WorkspaceFormDrawer.tsx index 8338e981..46c58c62 100644 --- a/workspaces/frontend/src/app/pages/Workspaces/Form/WorkspaceFormDrawer.tsx +++ b/workspaces/frontend/src/app/pages/Workspaces/Form/WorkspaceFormDrawer.tsx @@ -7,8 +7,8 @@ import { DrawerHead, DrawerActions, DrawerCloseButton, - Title, -} from '@patternfly/react-core'; +} from '@patternfly/react-core/dist/esm/components/Drawer'; +import { Title } from '@patternfly/react-core/dist/esm/components/Title'; interface WorkspaceFormDrawerProps { children: React.ReactNode; diff --git a/workspaces/frontend/src/app/pages/Workspaces/Form/image/WorkspaceFormImageDetails.tsx b/workspaces/frontend/src/app/pages/Workspaces/Form/image/WorkspaceFormImageDetails.tsx index 1b6eb14d..d47a85d2 100644 --- a/workspaces/frontend/src/app/pages/Workspaces/Form/image/WorkspaceFormImageDetails.tsx +++ b/workspaces/frontend/src/app/pages/Workspaces/Form/image/WorkspaceFormImageDetails.tsx @@ -4,8 +4,8 @@ import { DescriptionListTerm, DescriptionListGroup, DescriptionListDescription, - Title, -} from '@patternfly/react-core'; +} from '@patternfly/react-core/dist/esm/components/DescriptionList'; +import { Title } from '@patternfly/react-core/dist/esm/components/Title'; import { WorkspacePodConfigValue } from '~/shared/api/backendApiTypes'; import { formatLabelKey } from '~/shared/utilities/WorkspaceUtils'; diff --git a/workspaces/frontend/src/app/pages/Workspaces/Form/image/WorkspaceFormImageList.tsx b/workspaces/frontend/src/app/pages/Workspaces/Form/image/WorkspaceFormImageList.tsx index bce20293..08e39205 100644 --- a/workspaces/frontend/src/app/pages/Workspaces/Form/image/WorkspaceFormImageList.tsx +++ b/workspaces/frontend/src/app/pages/Workspaces/Form/image/WorkspaceFormImageList.tsx @@ -1,14 +1,13 @@ import React, { useCallback, useMemo, useRef, useState } from 'react'; import { CardTitle, - Gallery, - PageSection, - Toolbar, - ToolbarContent, Card, CardHeader, CardBody, -} from '@patternfly/react-core'; +} from '@patternfly/react-core/dist/esm/components/Card'; +import { Gallery } from '@patternfly/react-core/dist/esm/layouts/Gallery'; +import { PageSection } from '@patternfly/react-core/dist/esm/components/Page'; +import { Toolbar, ToolbarContent } from '@patternfly/react-core/dist/esm/components/Toolbar'; import Filter, { FilteredColumn, FilterRef } from '~/shared/components/Filter'; import { WorkspaceImageConfigValue } from '~/shared/api/backendApiTypes'; import CustomEmptyState from '~/shared/components/CustomEmptyState'; diff --git a/workspaces/frontend/src/app/pages/Workspaces/Form/image/WorkspaceFormImageSelection.tsx b/workspaces/frontend/src/app/pages/Workspaces/Form/image/WorkspaceFormImageSelection.tsx index 02fc9556..aaf807c9 100644 --- a/workspaces/frontend/src/app/pages/Workspaces/Form/image/WorkspaceFormImageSelection.tsx +++ b/workspaces/frontend/src/app/pages/Workspaces/Form/image/WorkspaceFormImageSelection.tsx @@ -1,5 +1,6 @@ import React, { useMemo, useState } from 'react'; -import { Content, Split, SplitItem } from '@patternfly/react-core'; +import { Content } from '@patternfly/react-core/dist/esm/components/Content'; +import { Split, SplitItem } from '@patternfly/react-core/dist/esm/layouts/Split'; import { WorkspaceFormImageList } from '~/app/pages/Workspaces/Form/image/WorkspaceFormImageList'; import { FilterByLabels } from '~/app/pages/Workspaces/Form/labelFilter/FilterByLabels'; import { WorkspaceImageConfigValue } from '~/shared/api/backendApiTypes'; diff --git a/workspaces/frontend/src/app/pages/Workspaces/Form/kind/WorkspaceFormKindDetails.tsx b/workspaces/frontend/src/app/pages/Workspaces/Form/kind/WorkspaceFormKindDetails.tsx index 105a4890..2363bf97 100644 --- a/workspaces/frontend/src/app/pages/Workspaces/Form/kind/WorkspaceFormKindDetails.tsx +++ b/workspaces/frontend/src/app/pages/Workspaces/Form/kind/WorkspaceFormKindDetails.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Title } from '@patternfly/react-core'; +import { Title } from '@patternfly/react-core/dist/esm/components/Title'; import { WorkspaceKind } from '~/shared/api/backendApiTypes'; type WorkspaceFormKindDetailsProps = { diff --git a/workspaces/frontend/src/app/pages/Workspaces/Form/kind/WorkspaceFormKindList.tsx b/workspaces/frontend/src/app/pages/Workspaces/Form/kind/WorkspaceFormKindList.tsx index 30240e62..8530bcab 100644 --- a/workspaces/frontend/src/app/pages/Workspaces/Form/kind/WorkspaceFormKindList.tsx +++ b/workspaces/frontend/src/app/pages/Workspaces/Form/kind/WorkspaceFormKindList.tsx @@ -2,13 +2,12 @@ import React, { useCallback, useMemo, useRef, useState } from 'react'; import { CardBody, CardTitle, - Gallery, - PageSection, - Toolbar, - ToolbarContent, Card, CardHeader, -} from '@patternfly/react-core'; +} from '@patternfly/react-core/dist/esm/components/Card'; +import { Gallery } from '@patternfly/react-core/dist/esm/layouts/Gallery'; +import { PageSection } from '@patternfly/react-core/dist/esm/components/Page'; +import { Toolbar, ToolbarContent } from '@patternfly/react-core/dist/esm/components/Toolbar'; import { WorkspaceKind } from '~/shared/api/backendApiTypes'; import Filter, { FilteredColumn, FilterRef } from '~/shared/components/Filter'; import CustomEmptyState from '~/shared/components/CustomEmptyState'; diff --git a/workspaces/frontend/src/app/pages/Workspaces/Form/kind/WorkspaceFormKindSelection.tsx b/workspaces/frontend/src/app/pages/Workspaces/Form/kind/WorkspaceFormKindSelection.tsx index 17bf4dd8..9903abaf 100644 --- a/workspaces/frontend/src/app/pages/Workspaces/Form/kind/WorkspaceFormKindSelection.tsx +++ b/workspaces/frontend/src/app/pages/Workspaces/Form/kind/WorkspaceFormKindSelection.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Content } from '@patternfly/react-core'; +import { Content } from '@patternfly/react-core/dist/esm/components/Content'; import { WorkspaceKind } from '~/shared/api/backendApiTypes'; import useWorkspaceKinds from '~/app/hooks/useWorkspaceKinds'; import { WorkspaceFormKindList } from '~/app/pages/Workspaces/Form/kind/WorkspaceFormKindList'; diff --git a/workspaces/frontend/src/app/pages/Workspaces/Form/podConfig/WorkspaceFormPodConfigDetails.tsx b/workspaces/frontend/src/app/pages/Workspaces/Form/podConfig/WorkspaceFormPodConfigDetails.tsx index bf7f3fb5..d3a9ba8e 100644 --- a/workspaces/frontend/src/app/pages/Workspaces/Form/podConfig/WorkspaceFormPodConfigDetails.tsx +++ b/workspaces/frontend/src/app/pages/Workspaces/Form/podConfig/WorkspaceFormPodConfigDetails.tsx @@ -4,9 +4,9 @@ import { DescriptionListTerm, DescriptionListGroup, DescriptionListDescription, - Title, - Divider, -} from '@patternfly/react-core'; +} from '@patternfly/react-core/dist/esm/components/DescriptionList'; +import { Title } from '@patternfly/react-core/dist/esm/components/Title'; +import { Divider } from '@patternfly/react-core/dist/esm/components/Divider'; import { WorkspacePodConfigValue } from '~/shared/api/backendApiTypes'; import { formatLabelKey } from '~/shared/utilities/WorkspaceUtils'; diff --git a/workspaces/frontend/src/app/pages/Workspaces/Form/podConfig/WorkspaceFormPodConfigList.tsx b/workspaces/frontend/src/app/pages/Workspaces/Form/podConfig/WorkspaceFormPodConfigList.tsx index 810ac3dd..06b9aa8b 100644 --- a/workspaces/frontend/src/app/pages/Workspaces/Form/podConfig/WorkspaceFormPodConfigList.tsx +++ b/workspaces/frontend/src/app/pages/Workspaces/Form/podConfig/WorkspaceFormPodConfigList.tsx @@ -1,14 +1,13 @@ import React, { useCallback, useMemo, useRef, useState } from 'react'; import { CardTitle, - Gallery, - PageSection, - Toolbar, - ToolbarContent, Card, CardHeader, CardBody, -} from '@patternfly/react-core'; +} from '@patternfly/react-core/dist/esm/components/Card'; +import { Gallery } from '@patternfly/react-core/dist/esm/layouts/Gallery'; +import { PageSection } from '@patternfly/react-core/dist/esm/components/Page'; +import { Toolbar, ToolbarContent } from '@patternfly/react-core/dist/esm/components/Toolbar'; import { WorkspacePodConfigValue } from '~/shared/api/backendApiTypes'; import Filter, { FilteredColumn, FilterRef } from '~/shared/components/Filter'; import CustomEmptyState from '~/shared/components/CustomEmptyState'; diff --git a/workspaces/frontend/src/app/pages/Workspaces/Form/podConfig/WorkspaceFormPodConfigSelection.tsx b/workspaces/frontend/src/app/pages/Workspaces/Form/podConfig/WorkspaceFormPodConfigSelection.tsx index 2aac1cff..dfe4b843 100644 --- a/workspaces/frontend/src/app/pages/Workspaces/Form/podConfig/WorkspaceFormPodConfigSelection.tsx +++ b/workspaces/frontend/src/app/pages/Workspaces/Form/podConfig/WorkspaceFormPodConfigSelection.tsx @@ -1,5 +1,6 @@ import React, { useMemo, useState } from 'react'; -import { Content, Split, SplitItem } from '@patternfly/react-core'; +import { Content } from '@patternfly/react-core/dist/esm/components/Content'; +import { Split, SplitItem } from '@patternfly/react-core/dist/esm/layouts/Split'; import { WorkspaceFormPodConfigList } from '~/app/pages/Workspaces/Form/podConfig/WorkspaceFormPodConfigList'; import { FilterByLabels } from '~/app/pages/Workspaces/Form/labelFilter/FilterByLabels'; import { WorkspacePodConfigValue } from '~/shared/api/backendApiTypes'; diff --git a/workspaces/frontend/src/app/pages/Workspaces/Form/properties/WorkspaceFormPropertiesSecrets.tsx b/workspaces/frontend/src/app/pages/Workspaces/Form/properties/WorkspaceFormPropertiesSecrets.tsx index 4f667bdb..96f1db95 100644 --- a/workspaces/frontend/src/app/pages/Workspaces/Form/properties/WorkspaceFormPropertiesSecrets.tsx +++ b/workspaces/frontend/src/app/pages/Workspaces/Form/properties/WorkspaceFormPropertiesSecrets.tsx @@ -1,23 +1,29 @@ import React, { useCallback, useState } from 'react'; -import { EllipsisVIcon, PlusCircleIcon } from '@patternfly/react-icons'; -import { Table, Thead, Tbody, Tr, Th, Td, TableVariant } from '@patternfly/react-table'; +import { EllipsisVIcon } from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; +import { + Table, + Thead, + Tbody, + Tr, + Th, + Td, + TableVariant, +} from '@patternfly/react-table/dist/esm/components/Table'; +import { Button } from '@patternfly/react-core/dist/esm/components/Button'; import { - Button, Modal, - ModalVariant, - TextInput, - Dropdown, - DropdownItem, - MenuToggle, ModalBody, ModalFooter, - Form, - FormGroup, ModalHeader, - ValidatedOptions, - HelperText, - HelperTextItem, -} from '@patternfly/react-core'; + ModalVariant, +} from '@patternfly/react-core/dist/esm/components/Modal'; +import { ValidatedOptions } from '@patternfly/react-core/helpers'; +import { TextInput } from '@patternfly/react-core/dist/esm/components/TextInput'; +import { Dropdown, DropdownItem } from '@patternfly/react-core/dist/esm/components/Dropdown'; +import { MenuToggle } from '@patternfly/react-core/dist/esm/components/MenuToggle'; +import { Form, FormGroup } from '@patternfly/react-core/dist/esm/components/Form'; +import { HelperText, HelperTextItem } from '@patternfly/react-core/dist/esm/components/HelperText'; +import { PlusCircleIcon } from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; import { WorkspacePodSecretMount } from '~/shared/api/backendApiTypes'; interface WorkspaceFormPropertiesSecretsProps { diff --git a/workspaces/frontend/src/app/pages/Workspaces/Form/properties/WorkspaceFormPropertiesSelection.tsx b/workspaces/frontend/src/app/pages/Workspaces/Form/properties/WorkspaceFormPropertiesSelection.tsx index fcc03a1b..d3c64b83 100644 --- a/workspaces/frontend/src/app/pages/Workspaces/Form/properties/WorkspaceFormPropertiesSelection.tsx +++ b/workspaces/frontend/src/app/pages/Workspaces/Form/properties/WorkspaceFormPropertiesSelection.tsx @@ -1,15 +1,11 @@ import React, { useMemo, useState } from 'react'; -import { - Checkbox, - Content, - Divider, - ExpandableSection, - Form, - FormGroup, - Split, - SplitItem, - TextInput, -} from '@patternfly/react-core'; +import { Checkbox } from '@patternfly/react-core/dist/esm/components/Checkbox'; +import { Content } from '@patternfly/react-core/dist/esm/components/Content'; +import { Divider } from '@patternfly/react-core/dist/esm/components/Divider'; +import { ExpandableSection } from '@patternfly/react-core/dist/esm/components/ExpandableSection'; +import { Form, FormGroup } from '@patternfly/react-core/dist/esm/components/Form'; +import { Split, SplitItem } from '@patternfly/react-core/dist/esm/layouts/Split'; +import { TextInput } from '@patternfly/react-core/dist/esm/components/TextInput'; import { WorkspaceFormImageDetails } from '~/app/pages/Workspaces/Form/image/WorkspaceFormImageDetails'; import { WorkspaceFormPropertiesVolumes } from '~/app/pages/Workspaces/Form/properties/WorkspaceFormPropertiesVolumes'; import { WorkspaceFormProperties } from '~/app/types'; diff --git a/workspaces/frontend/src/app/pages/Workspaces/Form/properties/WorkspaceFormPropertiesVolumes.tsx b/workspaces/frontend/src/app/pages/Workspaces/Form/properties/WorkspaceFormPropertiesVolumes.tsx index 7fb0b118..780e4ca7 100644 --- a/workspaces/frontend/src/app/pages/Workspaces/Form/properties/WorkspaceFormPropertiesVolumes.tsx +++ b/workspaces/frontend/src/app/pages/Workspaces/Form/properties/WorkspaceFormPropertiesVolumes.tsx @@ -1,21 +1,28 @@ import React, { useCallback, useState } from 'react'; +import { Button } from '@patternfly/react-core/dist/esm/components/Button'; +import { Dropdown, DropdownItem } from '@patternfly/react-core/dist/esm/components/Dropdown'; +import { Form, FormGroup } from '@patternfly/react-core/dist/esm/components/Form'; +import { MenuToggle } from '@patternfly/react-core/dist/esm/components/MenuToggle'; import { - Button, - Dropdown, - DropdownItem, - Form, - FormGroup, - MenuToggle, Modal, ModalBody, ModalFooter, ModalHeader, ModalVariant, - Switch, - TextInput, -} from '@patternfly/react-core'; -import { EllipsisVIcon, PlusCircleIcon } from '@patternfly/react-icons'; -import { Table, TableVariant, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table'; +} from '@patternfly/react-core/dist/esm/components/Modal'; +import { Switch } from '@patternfly/react-core/dist/esm/components/Switch'; +import { TextInput } from '@patternfly/react-core/dist/esm/components/TextInput'; +import { EllipsisVIcon } from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; +import { + Table, + TableVariant, + Tbody, + Td, + Th, + Thead, + Tr, +} from '@patternfly/react-table/dist/esm/components/Table'; +import { PlusCircleIcon } from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; import { WorkspacePodVolumeMount } from '~/shared/api/backendApiTypes'; interface WorkspaceFormPropertiesVolumesProps { diff --git a/workspaces/frontend/src/app/pages/Workspaces/WorkspaceConfigDetails.tsx b/workspaces/frontend/src/app/pages/Workspaces/WorkspaceConfigDetails.tsx index b59873e2..1270943c 100644 --- a/workspaces/frontend/src/app/pages/Workspaces/WorkspaceConfigDetails.tsx +++ b/workspaces/frontend/src/app/pages/Workspaces/WorkspaceConfigDetails.tsx @@ -4,7 +4,7 @@ import { DescriptionListTerm, DescriptionListGroup, DescriptionListDescription, -} from '@patternfly/react-core'; +} from '@patternfly/react-core/dist/esm/components/DescriptionList'; import { Workspace } from '~/shared/api/backendApiTypes'; import { formatResourceFromWorkspace } from '~/shared/utilities/WorkspaceUtils'; diff --git a/workspaces/frontend/src/app/pages/Workspaces/WorkspaceConnectAction.tsx b/workspaces/frontend/src/app/pages/Workspaces/WorkspaceConnectAction.tsx index efc59fe7..4b231354 100644 --- a/workspaces/frontend/src/app/pages/Workspaces/WorkspaceConnectAction.tsx +++ b/workspaces/frontend/src/app/pages/Workspaces/WorkspaceConnectAction.tsx @@ -3,10 +3,12 @@ import { Dropdown, DropdownItem, DropdownList, +} from '@patternfly/react-core/dist/esm/components/Dropdown'; +import { MenuToggle, MenuToggleElement, MenuToggleAction, -} from '@patternfly/react-core'; +} from '@patternfly/react-core/dist/esm/components/MenuToggle'; import { Workspace, WorkspaceState } from '~/shared/api/backendApiTypes'; type WorkspaceConnectActionProps = { diff --git a/workspaces/frontend/src/app/pages/Workspaces/WorkspacePackageDetails.tsx b/workspaces/frontend/src/app/pages/Workspaces/WorkspacePackageDetails.tsx index 1eb96fee..48e187b8 100644 --- a/workspaces/frontend/src/app/pages/Workspaces/WorkspacePackageDetails.tsx +++ b/workspaces/frontend/src/app/pages/Workspaces/WorkspacePackageDetails.tsx @@ -3,10 +3,9 @@ import { DescriptionList, DescriptionListTerm, DescriptionListDescription, - ListItem, - List, DescriptionListGroup, -} from '@patternfly/react-core'; +} from '@patternfly/react-core/dist/esm/components/DescriptionList'; +import { ListItem, List } from '@patternfly/react-core/dist/esm/components/List'; import { Workspace } from '~/shared/api/backendApiTypes'; import { extractPackageLabels, formatLabelKey } from '~/shared/utilities/WorkspaceUtils'; diff --git a/workspaces/frontend/src/app/pages/Workspaces/WorkspaceStorage.tsx b/workspaces/frontend/src/app/pages/Workspaces/WorkspaceStorage.tsx index 9109bdf0..9f55940a 100644 --- a/workspaces/frontend/src/app/pages/Workspaces/WorkspaceStorage.tsx +++ b/workspaces/frontend/src/app/pages/Workspaces/WorkspaceStorage.tsx @@ -4,7 +4,7 @@ import { DescriptionListTerm, DescriptionListGroup, DescriptionListDescription, -} from '@patternfly/react-core'; +} from '@patternfly/react-core/dist/esm/components/DescriptionList'; import { Workspace } from '~/shared/api/backendApiTypes'; import { DataVolumesList } from '~/app/pages/Workspaces/DataVolumesList'; diff --git a/workspaces/frontend/src/app/pages/Workspaces/Workspaces.tsx b/workspaces/frontend/src/app/pages/Workspaces/Workspaces.tsx index cf611bfe..e7749751 100644 --- a/workspaces/frontend/src/app/pages/Workspaces/Workspaces.tsx +++ b/workspaces/frontend/src/app/pages/Workspaces/Workspaces.tsx @@ -1,5 +1,7 @@ import * as React from 'react'; -import { Content, ContentVariants, PageSection, Stack, StackItem } from '@patternfly/react-core'; +import { Content, ContentVariants } from '@patternfly/react-core/dist/esm/components/Content'; +import { PageSection } from '@patternfly/react-core/dist/esm/components/Page'; +import { Stack, StackItem } from '@patternfly/react-core/dist/esm/layouts/Stack'; import WorkspaceTable from '~/app/components/WorkspaceTable'; import { useNamespaceContext } from '~/app/context/NamespaceContextProvider'; import { useWorkspacesByNamespace } from '~/app/hooks/useWorkspaces'; diff --git a/workspaces/frontend/src/app/pages/Workspaces/workspaceActions/WorkspaceRedirectInformationView.tsx b/workspaces/frontend/src/app/pages/Workspaces/workspaceActions/WorkspaceRedirectInformationView.tsx index a50f6d24..e3086a2f 100644 --- a/workspaces/frontend/src/app/pages/Workspaces/workspaceActions/WorkspaceRedirectInformationView.tsx +++ b/workspaces/frontend/src/app/pages/Workspaces/workspaceActions/WorkspaceRedirectInformationView.tsx @@ -1,10 +1,11 @@ import React, { useEffect, useState } from 'react'; -import { ExpandableSection, Icon, Tab, Tabs, TabTitleText, Content } from '@patternfly/react-core'; -import { - ExclamationCircleIcon, - ExclamationTriangleIcon, - InfoCircleIcon, -} from '@patternfly/react-icons'; +import { ExpandableSection } from '@patternfly/react-core/dist/esm/components/ExpandableSection'; +import { Icon } from '@patternfly/react-core/dist/esm/components/Icon'; +import { Tab, Tabs, TabTitleText } from '@patternfly/react-core/dist/esm/components/Tabs'; +import { Content } from '@patternfly/react-core/dist/esm/components/Content'; +import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon'; +import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon'; +import { InfoCircleIcon } from '@patternfly/react-icons/dist/esm/icons/info-circle-icon'; import useWorkspaceKindByName from '~/app/hooks/useWorkspaceKindByName'; import { WorkspaceKind } from '~/shared/api/backendApiTypes'; diff --git a/workspaces/frontend/src/app/pages/Workspaces/workspaceActions/WorkspaceRestartActionModal.tsx b/workspaces/frontend/src/app/pages/Workspaces/workspaceActions/WorkspaceRestartActionModal.tsx index 507d9fc6..d2eccc40 100644 --- a/workspaces/frontend/src/app/pages/Workspaces/workspaceActions/WorkspaceRestartActionModal.tsx +++ b/workspaces/frontend/src/app/pages/Workspaces/workspaceActions/WorkspaceRestartActionModal.tsx @@ -1,13 +1,13 @@ import React from 'react'; +import { Button } from '@patternfly/react-core/dist/esm/components/Button'; +import { Content } from '@patternfly/react-core/dist/esm/components/Content'; import { - Button, - Content, Modal, ModalBody, ModalFooter, ModalHeader, - TabTitleText, -} from '@patternfly/react-core'; +} from '@patternfly/react-core/dist/esm/components/Modal'; +import { TabTitleText } from '@patternfly/react-core/dist/esm/components/Tabs'; import { Workspace } from '~/shared/api/backendApiTypes'; import { WorkspaceRedirectInformationView } from '~/app/pages/Workspaces/workspaceActions/WorkspaceRedirectInformationView'; diff --git a/workspaces/frontend/src/app/pages/Workspaces/workspaceActions/WorkspaceStartActionModal.tsx b/workspaces/frontend/src/app/pages/Workspaces/workspaceActions/WorkspaceStartActionModal.tsx index d25d8c47..bbd0c532 100644 --- a/workspaces/frontend/src/app/pages/Workspaces/workspaceActions/WorkspaceStartActionModal.tsx +++ b/workspaces/frontend/src/app/pages/Workspaces/workspaceActions/WorkspaceStartActionModal.tsx @@ -1,12 +1,12 @@ import React, { useCallback, useState } from 'react'; +import { Button } from '@patternfly/react-core/dist/esm/components/Button'; import { - Button, Modal, ModalBody, ModalFooter, ModalHeader, - TabTitleText, -} from '@patternfly/react-core'; +} from '@patternfly/react-core/dist/esm/components/Modal'; +import { TabTitleText } from '@patternfly/react-core/dist/esm/components/Tabs'; import { WorkspaceRedirectInformationView } from '~/app/pages/Workspaces/workspaceActions/WorkspaceRedirectInformationView'; import { Workspace, WorkspacePauseState } from '~/shared/api/backendApiTypes'; import { ActionButton } from '~/shared/components/ActionButton'; diff --git a/workspaces/frontend/src/app/pages/Workspaces/workspaceActions/WorkspaceStopActionModal.tsx b/workspaces/frontend/src/app/pages/Workspaces/workspaceActions/WorkspaceStopActionModal.tsx index 12edb5a9..3375b6dd 100644 --- a/workspaces/frontend/src/app/pages/Workspaces/workspaceActions/WorkspaceStopActionModal.tsx +++ b/workspaces/frontend/src/app/pages/Workspaces/workspaceActions/WorkspaceStopActionModal.tsx @@ -1,13 +1,13 @@ import React, { useCallback, useState } from 'react'; +import { Button } from '@patternfly/react-core/dist/esm/components/Button'; +import { Content } from '@patternfly/react-core/dist/esm/components/Content'; import { - Button, - Content, Modal, ModalBody, ModalFooter, ModalHeader, - TabTitleText, -} from '@patternfly/react-core'; +} from '@patternfly/react-core/dist/esm/components/Modal'; +import { TabTitleText } from '@patternfly/react-core/dist/esm/components/Tabs'; import { WorkspaceRedirectInformationView } from '~/app/pages/Workspaces/workspaceActions/WorkspaceRedirectInformationView'; import { Workspace, WorkspacePauseState } from '~/shared/api/backendApiTypes'; import { ActionButton } from '~/shared/components/ActionButton'; diff --git a/workspaces/frontend/src/app/pages/notFound/NotFound.tsx b/workspaces/frontend/src/app/pages/notFound/NotFound.tsx index 9e376102..60f61be7 100644 --- a/workspaces/frontend/src/app/pages/notFound/NotFound.tsx +++ b/workspaces/frontend/src/app/pages/notFound/NotFound.tsx @@ -1,12 +1,12 @@ import React from 'react'; -import { ExclamationTriangleIcon } from '@patternfly/react-icons'; +import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon'; +import { Button } from '@patternfly/react-core/dist/esm/components/Button'; import { - Button, EmptyState, EmptyStateBody, EmptyStateFooter, - PageSection, -} from '@patternfly/react-core'; +} from '@patternfly/react-core/dist/esm/components/EmptyState'; +import { PageSection } from '@patternfly/react-core/dist/esm/components/Page'; import { useTypedNavigate } from '~/app/routerHelper'; const NotFound: React.FunctionComponent = () => { diff --git a/workspaces/frontend/src/shared/components/ActionButton.tsx b/workspaces/frontend/src/shared/components/ActionButton.tsx index b740a561..ea813c92 100644 --- a/workspaces/frontend/src/shared/components/ActionButton.tsx +++ b/workspaces/frontend/src/shared/components/ActionButton.tsx @@ -1,5 +1,5 @@ import React, { useCallback, useState } from 'react'; -import { Button } from '@patternfly/react-core'; +import { Button } from '@patternfly/react-core/dist/esm/components/Button'; type ActionButtonProps = { action: string; diff --git a/workspaces/frontend/src/shared/components/CustomEmptyState.tsx b/workspaces/frontend/src/shared/components/CustomEmptyState.tsx index e1c365b6..ef5bf2fb 100644 --- a/workspaces/frontend/src/shared/components/CustomEmptyState.tsx +++ b/workspaces/frontend/src/shared/components/CustomEmptyState.tsx @@ -4,9 +4,9 @@ import { EmptyStateBody, EmptyStateFooter, EmptyStateActions, - Button, -} from '@patternfly/react-core'; -import { SearchIcon } from '@patternfly/react-icons'; +} from '@patternfly/react-core/dist/esm/components/EmptyState'; +import { Button } from '@patternfly/react-core/dist/esm/components/Button'; +import { SearchIcon } from '@patternfly/react-icons/dist/esm/icons/search-icon'; interface CustomEmptyStateProps { onClearFilters: () => void; diff --git a/workspaces/frontend/src/shared/components/DeleteModal.tsx b/workspaces/frontend/src/shared/components/DeleteModal.tsx index 1ac13067..f5d8efd9 100644 --- a/workspaces/frontend/src/shared/components/DeleteModal.tsx +++ b/workspaces/frontend/src/shared/components/DeleteModal.tsx @@ -5,14 +5,12 @@ import { ModalFooter, ModalHeader, ModalVariant, - Button, - TextInput, - Stack, - StackItem, - FlexItem, - HelperText, - HelperTextItem, -} from '@patternfly/react-core'; +} from '@patternfly/react-core/dist/esm/components/Modal'; +import { Button } from '@patternfly/react-core/dist/esm/components/Button'; +import { TextInput } from '@patternfly/react-core/dist/esm/components/TextInput'; +import { Stack, StackItem } from '@patternfly/react-core/dist/esm/layouts/Stack'; +import { FlexItem } from '@patternfly/react-core/dist/esm/layouts/Flex'; +import { HelperText, HelperTextItem } from '@patternfly/react-core/dist/esm/components/HelperText'; import { default as ExclamationCircleIcon } from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon'; import { ActionButton } from '~/shared/components/ActionButton'; diff --git a/workspaces/frontend/src/shared/components/Filter.tsx b/workspaces/frontend/src/shared/components/Filter.tsx index 5e788211..a2c59570 100644 --- a/workspaces/frontend/src/shared/components/Filter.tsx +++ b/workspaces/frontend/src/shared/components/Filter.tsx @@ -11,17 +11,21 @@ import { MenuContent, MenuItem, MenuList, +} from '@patternfly/react-core/dist/esm/components/Menu'; +import { MenuToggle, MenuToggleElement, - Popper, +} from '@patternfly/react-core/dist/esm/components/MenuToggle'; +import { Popper } from '@patternfly/react-core/helpers'; +import { Toolbar, ToolbarContent, - ToolbarFilter, ToolbarGroup, ToolbarItem, + ToolbarFilter, ToolbarToggleGroup, -} from '@patternfly/react-core'; -import { FilterIcon } from '@patternfly/react-icons'; +} from '@patternfly/react-core/dist/esm/components/Toolbar'; +import { FilterIcon } from '@patternfly/react-icons/dist/esm/icons/filter-icon'; import ThemeAwareSearchInput from '~/app/components/ThemeAwareSearchInput'; export interface FilterProps { diff --git a/workspaces/frontend/src/shared/components/ImageFallback.tsx b/workspaces/frontend/src/shared/components/ImageFallback.tsx index 2002cfa9..dae90fd8 100644 --- a/workspaces/frontend/src/shared/components/ImageFallback.tsx +++ b/workspaces/frontend/src/shared/components/ImageFallback.tsx @@ -1,6 +1,8 @@ import React from 'react'; -import { ExclamationCircleIcon } from '@patternfly/react-icons'; -import { Content, ContentVariants, Flex, FlexItem, Tooltip } from '@patternfly/react-core'; +import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon'; +import { Content, ContentVariants } from '@patternfly/react-core/dist/esm/components/Content'; +import { Flex, FlexItem } from '@patternfly/react-core/dist/esm/layouts/Flex'; +import { Tooltip } from '@patternfly/react-core/dist/esm/components/Tooltip'; type ImageFallbackProps = { extended?: boolean; diff --git a/workspaces/frontend/src/shared/components/NamespaceSelector.tsx b/workspaces/frontend/src/shared/components/NamespaceSelector.tsx index 039c27ba..0b6dce7f 100644 --- a/workspaces/frontend/src/shared/components/NamespaceSelector.tsx +++ b/workspaces/frontend/src/shared/components/NamespaceSelector.tsx @@ -2,18 +2,15 @@ import React, { FC, useEffect, useMemo, useState } from 'react'; import { Dropdown, DropdownItem, - MenuToggle, DropdownList, DropdownProps, - MenuSearch, - MenuSearchInput, - InputGroup, - InputGroupItem, - SearchInput, - Button, - ButtonVariant, - Divider, -} from '@patternfly/react-core'; +} from '@patternfly/react-core/dist/esm/components/Dropdown'; +import { MenuToggle } from '@patternfly/react-core/dist/esm/components/MenuToggle'; +import { MenuSearch, MenuSearchInput } from '@patternfly/react-core/dist/esm/components/Menu'; +import { InputGroup, InputGroupItem } from '@patternfly/react-core/dist/esm/components/InputGroup'; +import { SearchInput } from '@patternfly/react-core/dist/esm/components/SearchInput'; +import { Button, ButtonVariant } from '@patternfly/react-core/dist/esm/components/Button'; +import { Divider } from '@patternfly/react-core/dist/esm/components/Divider'; import { SearchIcon } from '@patternfly/react-icons/dist/esm/icons/search-icon'; import { useNamespaceContext } from '~/app/context/NamespaceContextProvider'; diff --git a/workspaces/frontend/src/shared/components/WithValidImage.tsx b/workspaces/frontend/src/shared/components/WithValidImage.tsx index 3743b53b..f4f72f3d 100644 --- a/workspaces/frontend/src/shared/components/WithValidImage.tsx +++ b/workspaces/frontend/src/shared/components/WithValidImage.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useState } from 'react'; -import { Skeleton, SkeletonProps } from '@patternfly/react-core'; +import { Skeleton, SkeletonProps } from '@patternfly/react-core/dist/esm/components/Skeleton'; type WithValidImageProps = { imageSrc: string | undefined | null; From bd66a26175c2eeb51172030c050d30c13dc5c64d Mon Sep 17 00:00:00 2001 From: Paulo Rego <832830+paulovmr@users.noreply.github.com> Date: Wed, 23 Jul 2025 08:15:00 -0300 Subject: [PATCH 7/8] chore(ws): Upgrade vulnerable packages (#495) Signed-off-by: paulovmr <832830+paulovmr@users.noreply.github.com> --- workspaces/frontend/package-lock.json | 21 +++++++++++++-------- 1 file changed, 13 insertions(+), 8 deletions(-) diff --git a/workspaces/frontend/package-lock.json b/workspaces/frontend/package-lock.json index 2d7b91dc..3e2c72b9 100644 --- a/workspaces/frontend/package-lock.json +++ b/workspaces/frontend/package-lock.json @@ -10372,13 +10372,15 @@ } }, "node_modules/es-set-tostringtag": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.3.tgz", - "integrity": "sha512-3T8uNMC3OQTHkFUsFq8r/BwAXLHvU/9O9mE0fBc/MY5iq/8H7ncvO947LmYA6ldWw9Uh8Yhf25zu6n7nML5QWQ==", + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz", + "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==", + "license": "MIT", "dependencies": { - "get-intrinsic": "^1.2.4", + "es-errors": "^1.3.0", + "get-intrinsic": "^1.2.6", "has-tostringtag": "^1.0.2", - "hasown": "^2.0.1" + "hasown": "^2.0.2" }, "engines": { "node": ">= 0.4" @@ -12229,13 +12231,16 @@ } }, "node_modules/form-data": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", - "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.4.tgz", + "integrity": "sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==", "dev": true, + "license": "MIT", "dependencies": { "asynckit": "^0.4.0", "combined-stream": "^1.0.8", + "es-set-tostringtag": "^2.1.0", + "hasown": "^2.0.2", "mime-types": "^2.1.12" }, "engines": { From a721c5073d2a7c5468d97ba407740aaee4703ec5 Mon Sep 17 00:00:00 2001 From: Jenny <32821331+jenny-s51@users.noreply.github.com> Date: Thu, 24 Jul 2025 09:29:01 -0400 Subject: [PATCH 8/8] fix(ws): Apply sentence case to text elements across UI (#497) Signed-off-by: Jenny <32821331+jenny-s51@users.noreply.github.com> fix(ws): align nav item names with corresponding page headers Signed-off-by: Jenny <32821331+jenny-s51@users.noreply.github.com> fix(ws): apply sentence case, fix tests Signed-off-by: Jenny <32821331+jenny-s51@users.noreply.github.com> fix(ws): apply correct sentence case to TableTitleText --- .../src/__tests__/cypress/cypress/pages/home.ts | 2 +- workspaces/frontend/src/app/AppRoutes.tsx | 4 ++-- .../src/app/components/WorkspaceTable.tsx | 2 +- .../src/app/context/WorkspaceActionsContext.tsx | 2 +- .../properties/WorkspaceKindFormProperties.tsx | 4 ++-- .../app/pages/WorkspaceKinds/WorkspaceKinds.tsx | 16 ++++++++-------- .../details/WorkspaceKindDetails.tsx | 2 +- .../details/WorkspaceKindDetailsOverview.tsx | 2 +- .../WorkspaceKindSummaryExpandableCard.tsx | 8 ++++---- .../Details/WorkspaceDetailsActivity.tsx | 8 ++++---- .../src/app/pages/Workspaces/Workspaces.tsx | 2 +- .../WorkspaceRedirectInformationView.tsx | 4 ++-- .../WorkspaceRestartActionModal.tsx | 4 ++-- .../WorkspaceStopActionModal.tsx | 6 +++--- .../frontend/src/shared/components/Filter.tsx | 12 ++++++++---- .../frontend/src/shared/style/MUI-theme.scss | 5 ----- 16 files changed, 41 insertions(+), 42 deletions(-) diff --git a/workspaces/frontend/src/__tests__/cypress/cypress/pages/home.ts b/workspaces/frontend/src/__tests__/cypress/cypress/pages/home.ts index 106ad8fc..f630eaba 100644 --- a/workspaces/frontend/src/__tests__/cypress/cypress/pages/home.ts +++ b/workspaces/frontend/src/__tests__/cypress/cypress/pages/home.ts @@ -4,7 +4,7 @@ class Home { } findButton() { - return cy.get('button:contains("Create Workspace")'); + return cy.get('button:contains("Create workspace")'); } } diff --git a/workspaces/frontend/src/app/AppRoutes.tsx b/workspaces/frontend/src/app/AppRoutes.tsx index 0251d74e..6b0136b4 100644 --- a/workspaces/frontend/src/app/AppRoutes.tsx +++ b/workspaces/frontend/src/app/AppRoutes.tsx @@ -43,7 +43,7 @@ export const useAdminDebugSettings = (): NavDataItem[] => { children: [{ label: 'Notebooks', path: '/notebookDebugSettings' }], }, { - label: 'Workspace Kinds', + label: 'Workspace kinds', path: AppRoutePaths.workspaceKinds, }, ]; @@ -51,7 +51,7 @@ export const useAdminDebugSettings = (): NavDataItem[] => { export const useNavData = (): NavDataItem[] => [ { - label: 'Notebooks', + label: 'Workspaces', path: AppRoutePaths.workspaces, }, ...useAdminDebugSettings(), diff --git a/workspaces/frontend/src/app/components/WorkspaceTable.tsx b/workspaces/frontend/src/app/components/WorkspaceTable.tsx index 184e8408..8be07a03 100644 --- a/workspaces/frontend/src/app/components/WorkspaceTable.tsx +++ b/workspaces/frontend/src/app/components/WorkspaceTable.tsx @@ -394,7 +394,7 @@ const WorkspaceTable = React.forwardRef( toolbarActions={ canCreateWorkspaces && ( ) } diff --git a/workspaces/frontend/src/app/context/WorkspaceActionsContext.tsx b/workspaces/frontend/src/app/context/WorkspaceActionsContext.tsx index d9a70d54..aac7efd9 100644 --- a/workspaces/frontend/src/app/context/WorkspaceActionsContext.tsx +++ b/workspaces/frontend/src/app/context/WorkspaceActionsContext.tsx @@ -213,7 +213,7 @@ export const WorkspaceActionsContextProvider: React.FC setActiveWsAction(null)} onDelete={async () => executeDeleteAction()} /> diff --git a/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/properties/WorkspaceKindFormProperties.tsx b/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/properties/WorkspaceKindFormProperties.tsx index 652156a3..4aafe35e 100644 --- a/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/properties/WorkspaceKindFormProperties.tsx +++ b/workspaces/frontend/src/app/pages/WorkspaceKinds/Form/properties/WorkspaceKindFormProperties.tsx @@ -76,9 +76,9 @@ export const WorkspaceKindFormProperties: React.FC updateField({ ...properties, deprecationMessage: value })} id="workspace-kind-deprecated-msg" /> diff --git a/workspaces/frontend/src/app/pages/WorkspaceKinds/WorkspaceKinds.tsx b/workspaces/frontend/src/app/pages/WorkspaceKinds/WorkspaceKinds.tsx index daea4356..d0868e40 100644 --- a/workspaces/frontend/src/app/pages/WorkspaceKinds/WorkspaceKinds.tsx +++ b/workspaces/frontend/src/app/pages/WorkspaceKinds/WorkspaceKinds.tsx @@ -478,7 +478,7 @@ export const WorkspaceKinds: React.FunctionComponent = () => { -

Kubeflow Workspace Kinds

+

Workspace kinds

View your existing workspace kinds.
@@ -499,9 +499,9 @@ export const WorkspaceKinds: React.FunctionComponent = () => { @@ -520,9 +520,9 @@ export const WorkspaceKinds: React.FunctionComponent = () => { @@ -537,7 +537,7 @@ export const WorkspaceKinds: React.FunctionComponent = () => { diff --git a/workspaces/frontend/src/app/pages/WorkspaceKinds/details/WorkspaceKindDetails.tsx b/workspaces/frontend/src/app/pages/WorkspaceKinds/details/WorkspaceKindDetails.tsx index ebaf0531..aaa7a150 100644 --- a/workspaces/frontend/src/app/pages/WorkspaceKinds/details/WorkspaceKindDetails.tsx +++ b/workspaces/frontend/src/app/pages/WorkspaceKinds/details/WorkspaceKindDetails.tsx @@ -71,7 +71,7 @@ export const WorkspaceKindDetails: React.FunctionComponent Pod Configs} + title={Pod configs} tabContentId="podConfigsTabContent" aria-label="Pod Configs" /> diff --git a/workspaces/frontend/src/app/pages/WorkspaceKinds/details/WorkspaceKindDetailsOverview.tsx b/workspaces/frontend/src/app/pages/WorkspaceKinds/details/WorkspaceKindDetailsOverview.tsx index d5aa3e8f..7a0b58d8 100644 --- a/workspaces/frontend/src/app/pages/WorkspaceKinds/details/WorkspaceKindDetailsOverview.tsx +++ b/workspaces/frontend/src/app/pages/WorkspaceKinds/details/WorkspaceKindDetailsOverview.tsx @@ -42,7 +42,7 @@ export const WorkspaceKindDetailsOverview: React.FunctionComponent< - Deprecation Message + Deprecation message {workspaceKind.deprecationMessage} diff --git a/workspaces/frontend/src/app/pages/WorkspaceKinds/summary/WorkspaceKindSummaryExpandableCard.tsx b/workspaces/frontend/src/app/pages/WorkspaceKinds/summary/WorkspaceKindSummaryExpandableCard.tsx index a1c3bee8..b5415036 100644 --- a/workspaces/frontend/src/app/pages/WorkspaceKinds/summary/WorkspaceKindSummaryExpandableCard.tsx +++ b/workspaces/frontend/src/app/pages/WorkspaceKinds/summary/WorkspaceKindSummaryExpandableCard.tsx @@ -54,7 +54,7 @@ const WorkspaceKindSummaryExpandableCard: React.FC - Workspaces Summary + Workspaces summary @@ -71,7 +71,7 @@ const WorkspaceKindSummaryExpandableCard: React.FC - + + )}