ITEP-66301 Move a few components from shared/components to the @geti/ui [PART 3] (#231)

Author: dwesolow

web_ui/eslint.config.js

@@ -38,6 +38,7 @@ export default [
                         'Slider',
                         'Switch',
                         'SpectrumSwitchProps',
+                        'Breadcrumb',
                     ],
                     message: 'Use component from the @geti/ui folder instead.',
                 },

web_ui/packages/ui/eslint.config.js

@@ -6,17 +6,38 @@ import sharedConfig from '@geti/config/lint';
 export default [
     ...sharedConfig,
     {
+        files: ['./index.ts'],
         rules: {
             'no-restricted-imports': [
                 'error',
                 {
                     patterns: [
                         {
-                            group: ['./index.ts'],
-                            message: 'Do not import from barrel file, use relative imports instead.',
+                            group: ['@geti/ui'],
+                            message: 'Importing files from @geti/ui is not allowed.',
                         },
                         {
-                            group: ['../*/**'],
+                            group: ['../**/*'],
+                            message: 'Importing files outside of the current package is not allowed.',
+                        },
+                    ],
+                },
+            ],
+        },
+    },
+    {
+        files: ['./src/**/*.{js,jsx,ts,tsx,css,scss}'],
+        rules: {
+            'no-restricted-imports': [
+                'error',
+                {
+                    patterns: [
+                        {
+                            group: ['@geti/ui'],
+                            message: 'Importing files from @geti/ui is not allowed.',
+                        },
+                        {
+                            group: ['../../**/*'],
                             message: 'Importing files outside of the current package is not allowed.',
                         },
                     ],

web_ui/packages/ui/geti-type.d.ts

@@ -1,7 +1,7 @@
 // Copyright (C) 2022-2025 Intel Corporation
 // LIMITED EDGE SOFTWARE DISTRIBUTION LICENSE
 
-import '@rsbuild/core/types';
+/// <reference types="@rsbuild/core/types" />
 
 declare module '*.svg' {
     export const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;

web_ui/packages/ui/index.ts

@@ -12,3 +12,11 @@ export { SearchField } from './src/search-field/search-field.component';
 export { Loading } from './src/loading/loading.component';
 export { LoadingIndicator } from './src/loading/loading-indicator.component';
 export { IntelBrandedLoading } from './src/loading/intel-branded-loading.component';
+export { Breadcrumbs } from './src/breadcrumbs/breadcrumbs.component';
+export { type BreadcrumbsProps } from './src/breadcrumbs/breadcrumbs.interface';
+export { type BreadcrumbItemProps } from './src/breadcrumbs/breadcrumb/breadcrumb.interface';
+export { PasswordField } from './src/password-field/password-field.component';
+export { CustomPopover } from './src/custom-popover/custom-popover.component';
+export { PressableElement } from './src/pressable-element/pressable-element.component';
+export { Tag } from './src/tag/tag.component';
+export { Skeleton } from './src/skeleton/skeleton.component';

web_ui/src/shared/components/breadcrumbs/breadcrumb/breadcrumb.component.tsx renamed to web_ui/packages/ui/src/breadcrumbs/breadcrumb/breadcrumb.component.tsx

@@ -1,23 +1,25 @@
 // Copyright (C) 2022-2025 Intel Corporation
 // LIMITED EDGE SOFTWARE DISTRIBUTION LICENSE
 
-import { useState } from 'react';
+import { ComponentProps, useState } from 'react';
 
-import { Flex, TextField } from '@adobe/react-spectrum';
-import { ActionButton } from '@geti/ui';
-import { View } from '@react-spectrum/view';
-import { SpectrumTextFieldProps } from '@react-types/textfield';
+import { Flex, TextField, View } from '@adobe/react-spectrum';
 
-import { Alert, Invisible, Visible } from '../../../assets/icons';
-import { idMatchingFormat } from '../../../test-utils/id-utils';
-import { NEW_PASSWORD_ERROR_MESSAGE } from '../../utils';
+// eslint-disable-next-line no-restricted-imports
+import { Alert, Invisible, Visible } from '../../../../src/assets/icons';
+import { ActionButton } from '../button/button.component';
 
-import textFieldClasses from '../../../pages/user-management/profile-page/profile-page.module.scss';
 import classes from './password-field.module.scss';
 
-interface PasswordFieldProps extends SpectrumTextFieldProps {
+const NEW_PASSWORD_ERROR_MESSAGE =
+    'Password must consist of 8 - 200 characters, at least one capital letter, lower letter, digit or symbol.';
+
+type TextFieldProps = ComponentProps<typeof TextField>;
+
+interface PasswordFieldProps extends Omit<TextFieldProps, 'label'> {
     isNewPassword?: boolean;
     error: string;
+    label?: string;
 }
 
 export const PasswordField = (props: PasswordFieldProps): JSX.Element => {
@@ -28,16 +30,17 @@ export const PasswordField = (props: PasswordFieldProps): JSX.Element => {
         setShowPassword((prev: boolean) => !prev);
     };
 
-    const errorId = label ? `${idMatchingFormat(label as string)}-error-msg` : 'password-error-msg';
+    const errorId = label ? `${label.split(' ').join('-').toLocaleLowerCase()}-error-msg` : 'password-error-msg';
 
     return (
         <View UNSAFE_className={classes.passwordFieldBox} marginBottom={'size-200'} position='relative'>
             <View position={'relative'}>
                 <TextField
+                    label={label}
                     type={showPassword ? 'text' : 'password'}
                     width='100%'
                     UNSAFE_className={[
-                        textFieldClasses.textField,
+                        classes.textField,
                         classes.passwordField,
                         error ? classes.passwordFieldError : '',
                     ].join(' ')}
@@ -56,16 +59,12 @@ export const PasswordField = (props: PasswordFieldProps): JSX.Element => {
                 </Flex>
             </View>
             {error ? (
-                <span className={[classes.tip, classes.errorMsg].join(' ')} data-testid={errorId} id={errorId}>
+                <span className={[classes.tip, classes.errorMsg].join(' ')} data-testid={errorId}>
                     {error}
                 </span>
             ) : (
                 isNewPassword && (
-                    <span
-                        className={[classes.tip, classes.newPassword].join(' ')}
-                        data-testid='new-password-rule-msg'
-                        id='new-password-rule-msg'
-                    >
+                    <span className={[classes.tip, classes.newPassword].join(' ')} data-testid='new-password-rule-msg'>
                         {NEW_PASSWORD_ERROR_MESSAGE}
                     </span>
                 )

web_ui/src/shared/components/breadcrumbs/breadcrumb/breadcrumb.interface.ts renamed to web_ui/packages/ui/src/breadcrumbs/breadcrumb/breadcrumb.interface.ts

@@ -2,6 +2,15 @@
     position: relative;
 }
 
+.textField {
+    min-width: 38.4rem;
+    & input {
+        padding-left: 0;
+        font-size: 1.6rem;
+        line-height: 2.4rem;
+    }
+}
+
 .passwordField input {
     padding-right: var(--spectrum-global-dimension-size-500) !important;
     padding-left: var(--spectrum-global-dimension-size-125);

web_ui/src/shared/components/breadcrumbs/breadcrumb/breadcrumb.module.scss renamed to web_ui/packages/ui/src/breadcrumbs/breadcrumb/breadcrumb.module.scss

@@ -4,15 +4,14 @@
 import { useState } from 'react';
 
 import { Flex, Text, View } from '@adobe/react-spectrum';
-import { Button, Loading } from '@geti/ui';
+import { Button, Loading, Skeleton } from '@geti/ui';
 import { Navigate } from 'react-router-dom';
 
 import { NewCreditAccount } from '../../../core/credits/credits.interface';
 import { useCreditsQueries } from '../../../core/credits/hooks/use-credits-api.hook';
 import { useSubscriptions } from '../../../core/credits/subscriptions/hooks/use-subscription-api.hook';
 import { useFeatureFlags } from '../../../core/feature-flags/hooks/use-feature-flags.hook';
 import { paths } from '../../../core/services/routes';
-import { Skeleton } from '../../../shared/components/skeleton/skeleton.component';
 import { Header } from '../../shared/components/header/header.component';
 import { CreditAccountFormDialog } from './dialogs/credit-account-form-dialog.component';
 import { useOrganization } from './hooks/organization.hook';

web_ui/src/shared/components/breadcrumbs/breadcrumbs.component.tsx renamed to web_ui/packages/ui/src/breadcrumbs/breadcrumbs.component.tsx

@@ -1,8 +1,9 @@
 // Copyright (C) 2022-2025 Intel Corporation
 // LIMITED EDGE SOFTWARE DISTRIBUTION LICENSE
 
+import { Skeleton } from '@geti/ui';
+
 import { paths } from '../../../core/services/routes';
-import { Skeleton } from '../../../shared/components/skeleton/skeleton.component';
 import { DetailsContentLayout } from '../../shared/components/details-content-layout/details-content-layout.component';
 import { useOrganization } from './hooks/organization.hook';
 import { OrganizationSidebar } from './organization-sidebar.component';

web_ui/src/shared/components/breadcrumbs/breadcrumbs.interface.ts renamed to web_ui/packages/ui/src/breadcrumbs/breadcrumbs.interface.ts

@@ -2,9 +2,9 @@
 // LIMITED EDGE SOFTWARE DISTRIBUTION LICENSE
 
 import { Flex, Tooltip, TooltipTrigger } from '@adobe/react-spectrum';
+import { PressableElement } from '@geti/ui';
 
 import { PhotoPlaceholder } from '../../../../shared/components/photo-placeholder/photo-placeholder.component';
-import { PressableElement } from '../../../../shared/components/pressable-element/pressable-element.component';
 import { TruncatedText } from '../../../../shared/components/truncated-text/truncated-text.component';
 import { OrganizationAdminsCopyText } from './organization-admins-copy-text.component';
 

web_ui/src/shared/components/custom-popover/custom-popover.component.tsx renamed to web_ui/packages/ui/src/custom-popover/custom-popover.component.tsx

@@ -3,9 +3,9 @@
 
 import { Flex } from '@adobe/react-spectrum';
 
+import { Breadcrumbs as BreadcrumbsComponent } from '../../../../../packages/ui/src/breadcrumbs/breadcrumbs.component';
+import { BreadcrumbsProps } from '../../../../../packages/ui/src/breadcrumbs/breadcrumbs.interface';
 import IntelAdminBackground from '../../../../assets/images/intel-admin-app-background.webp';
-import { Breadcrumbs as BreadcrumbsComponent } from '../../../../shared/components/breadcrumbs/breadcrumbs.component';
-import { BreadcrumbsProps } from '../../../../shared/components/breadcrumbs/breadcrumbs.interface';
 
 import classes from './breadcrumbs.module.scss';
 

web_ui/src/shared/components/password-field/password-field.component.tsx renamed to web_ui/packages/ui/src/password-field/password-field.component.tsx

@@ -4,8 +4,8 @@
 import { FC, ReactNode } from 'react';
 
 import { View } from '@adobe/react-spectrum';
+import { BreadcrumbItemProps } from '@geti/ui';
 
-import { BreadcrumbItemProps } from '../../../../shared/components/breadcrumbs/breadcrumb/breadcrumb.interface';
 import { Breadcrumbs } from '../breadcrumbs/breadcrumbs.component';
 
 import classes from './content-layout.module.scss';

web_ui/src/shared/components/password-field/password-field.module.scss renamed to web_ui/packages/ui/src/password-field/password-field.module.scss

@@ -4,9 +4,9 @@
 import { FC, ReactNode } from 'react';
 
 import { Grid, View } from '@adobe/react-spectrum';
+import { BreadcrumbItemProps } from '@geti/ui';
 import { Outlet } from 'react-router-dom';
 
-import { BreadcrumbItemProps } from '../../../../shared/components/breadcrumbs/breadcrumb/breadcrumb.interface';
 import { Breadcrumbs } from '../breadcrumbs/breadcrumbs.component';
 
 interface DetailsContentLayoutProps {

web_ui/src/shared/components/pressable-element/pressable-element.component.tsx renamed to web_ui/packages/ui/src/pressable-element/pressable-element.component.tsx

@@ -4,9 +4,9 @@
 import { FC } from 'react';
 
 import { Flex, View } from '@adobe/react-spectrum';
+import { Skeleton } from '@geti/ui';
 
 import { PhotoPlaceholder } from '../../../../shared/components/photo-placeholder/photo-placeholder.component';
-import { Skeleton } from '../../../../shared/components/skeleton/skeleton.component';
 import { TruncatedTextWithTooltip } from '../../../../shared/components/truncated-text/truncated-text.component';
 
 import classes from './sidebar.module.scss';

web_ui/src/shared/components/skeleton/skeleton.component.tsx renamed to web_ui/packages/ui/src/skeleton/skeleton.component.tsx

@@ -2,11 +2,10 @@
 // LIMITED EDGE SOFTWARE DISTRIBUTION LICENSE
 
 import { Flex } from '@adobe/react-spectrum';
-import { ActionButton } from '@geti/ui';
+import { ActionButton, Tag } from '@geti/ui';
 import { isEmpty } from 'lodash-es';
 
 import { BorderClose } from '../../../../assets/icons';
-import { Tag } from '../../../../shared/components/tag/tag.component';
 import { hasEqualId } from '../../../../shared/utils';
 import { useAnnotationFilters } from './use-annotation-filters.hook';
 import { useTaskLabels } from './use-task-labels.hook';

web_ui/src/shared/components/skeleton/skeleton.module.scss renamed to web_ui/packages/ui/src/skeleton/skeleton.module.scss

@@ -2,6 +2,7 @@
 // LIMITED EDGE SOFTWARE DISTRIBUTION LICENSE
 
 import { Flex, Tooltip, TooltipTrigger } from '@adobe/react-spectrum';
+import { PressableElement } from '@geti/ui';
 import { isFunction } from 'lodash-es';
 import { useNumberFormatter, usePress } from 'react-aria';
 
@@ -10,7 +11,6 @@ import { AnnotationLabel } from '../../../../core/annotations/annotation.interfa
 import { isPrediction, showLabelScore } from '../../../../core/labels/utils';
 import { useUsers } from '../../../../core/users/hook/use-users.hook';
 import { useOrganizationIdentifier } from '../../../../hooks/use-organization-identifier/use-organization-identifier.hook';
-import { PressableElement } from '../../../../shared/components/pressable-element/pressable-element.component';
 import { TruncatedText } from '../../../../shared/components/truncated-text/truncated-text.component';
 import { FullnameWithLoading } from '../../../../shared/components/users/fullname.component';
 import { idMatchingFormat } from '../../../../test-utils/id-utils';

web_ui/src/shared/components/tag/tag.component.test.tsx renamed to web_ui/packages/ui/src/tag/tag.component.test.tsx

@@ -2,8 +2,8 @@
 // LIMITED EDGE SOFTWARE DISTRIBUTION LICENSE
 
 import { Tooltip, TooltipTrigger, View } from '@adobe/react-spectrum';
+import { PressableElement } from '@geti/ui';
 
-import { PressableElement } from '../../../../shared/components/pressable-element/pressable-element.component';
 import { trimText } from '../../../../shared/utils';
 
 import classes from './annotator-footer.module.scss';

web_ui/src/shared/components/tag/tag.component.tsx renamed to web_ui/packages/ui/src/tag/tag.component.tsx

@@ -4,12 +4,12 @@
 import { ComponentProps, ReactNode, RefObject, useEffect, useRef } from 'react';
 
 import { TextField } from '@adobe/react-spectrum';
+import { CustomPopover } from '@geti/ui';
 import { useUnwrapDOMRef } from '@react-spectrum/utils';
 import { OverlayTriggerState, useOverlayTriggerState } from '@react-stately/overlays';
 import { TextFieldRef } from '@react-types/textfield';
 
 import { Label } from '../../../../../core/labels/label.interface';
-import { CustomPopover } from '../../../../../shared/components/custom-popover/custom-popover.component';
 import { BaseLabelSearch } from './base-label-search.component';
 import { SearchLabelTreeItemSuffix } from './search-label-tree-view-item.component';
 

web_ui/src/shared/components/tag/tag.module.scss renamed to web_ui/packages/ui/src/tag/tag.module.scss

@@ -2,10 +2,10 @@
 // LIMITED EDGE SOFTWARE DISTRIBUTION LICENSE
 
 import { Flex, Tooltip, TooltipTrigger } from '@adobe/react-spectrum';
+import { PressableElement } from '@geti/ui';
 
 import { Label } from '../../../../../core/labels/label.interface';
 import { LabelColorThumb } from '../../../../../shared/components/label-color-thumb/label-color-thumb.component';
-import { PressableElement } from '../../../../../shared/components/pressable-element/pressable-element.component';
 import { TruncatedText } from '../../../../../shared/components/truncated-text/truncated-text.component';
 
 interface LabelTagProps {

web_ui/src/intel-admin-app/pages/organization/organization-credit-accounts.component.tsx

@@ -4,11 +4,11 @@
 import { Dispatch, SetStateAction, useRef } from 'react';
 
 import { Flex, Text, View } from '@adobe/react-spectrum';
+import { CustomPopover } from '@geti/ui';
 import { useOverlayTriggerState } from '@react-stately/overlays';
 
 import { ChevronDownLight } from '../../../../../assets/icons';
 import { Label } from '../../../../../core/labels/label.interface';
-import { CustomPopover } from '../../../../../shared/components/custom-popover/custom-popover.component';
 import { TaskLabelTreeSearch } from '../../../../../shared/components/task-label-tree-search/task-label-tree-search.component';
 import { onEscape } from '../../../../../shared/utils';
 import { useTask } from '../../../providers/task-provider/task-provider.component';

web_ui/src/intel-admin-app/pages/organization/organization-layout.component.tsx

@@ -2,10 +2,10 @@
 // LIMITED EDGE SOFTWARE DISTRIBUTION LICENSE
 
 import { Flex, Heading } from '@adobe/react-spectrum';
+import { Link } from 'react-router-dom';
 
 import { ProjectIdentifier } from '../../../../core/projects/core.interface';
 import { paths } from '../../../../core/services/routes';
-import { RouterLink } from '../../../../shared/components/router-link/router-link.component';
 import { AccuracyHalfDonutChart } from '../../../project-details/components/project-models/models-container/model-card/accuracy-container/accuracy-half-donut-chart';
 
 import classes from './navigation-toolbar.module.scss';
@@ -30,15 +30,15 @@ export const AnomalyProjectPerformanceChart = ({
     }
 
     return (
-        <RouterLink to={paths.project.models.index(projectIdentifier)} height={'100%'}>
+        <Link to={paths.project.models.index(projectIdentifier)} viewTransition>
             <Flex
                 direction={'column'}
                 height={'100%'}
                 alignItems={'center'}
-                UNSAFE_className={classes.anomalyPerformanceChart}
+                UNSAFE_className={classes.performanceChart}
             >
                 <AccuracyHalfDonutChart value={score} size={'XL'} title={label} ariaLabel={label} />
             </Flex>
-        </RouterLink>
+        </Link>
     );
 };

web_ui/src/intel-admin-app/pages/organizations/cells/organization-name-cell.component.tsx

@@ -4,10 +4,10 @@
 import { useRef, useState } from 'react';
 
 import { TextField, View } from '@adobe/react-spectrum';
+import { CustomPopover } from '@geti/ui';
 import { useOverlayTriggerState } from '@react-stately/overlays';
 
 import { Label } from '../../../../core/labels/label.interface';
-import { CustomPopover } from '../../../../shared/components/custom-popover/custom-popover.component';
 import { TaskLabelTreeContainer } from '../../../../shared/components/task-label-tree-search/task-label-tree-container.component';
 import { useFilteredTaskMetadata } from '../../../../shared/components/task-label-tree-search/use-filtered-task-metadata.hook';
 import { getAvailableLabelsWithoutEmpty } from '../../annotation/labels/utils';

web_ui/src/intel-admin-app/shared/components/breadcrumbs/breadcrumbs.component.tsx

@@ -30,7 +30,7 @@
     fill: currentColor !important;
 }
 
-.anomalyPerformanceChart {
+.performanceChart {
     cursor: pointer;
 
     & svg {