refactor: [M3-6414, M3-6415] - MUIv5 Migration - Components > TagsInput, TagsPanel

CHANGELOG.md

@@ -4,6 +4,11 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](http://keepachangelog.com/) and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## [Unreleased]
+
+### Tech Stories:
+- MUIv5 Migration - Components > TagsInput, TagsPanel #8995
+
 ## [2023-04-03] - v1.90.0
 
 ### Added:

packages/manager/src/components/BetaChip/BetaChip.stories.mdx

@@ -1,6 +1,6 @@
 import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
-import BetaChip from "/src/components/BetaChip"
-import Breadcrumb from '/src/components/Breadcrumb';
+import { BetaChip } from './BetaChip';
+import { Breadcrumb } from 'src/components/Breadcrumb/Breadcrumb';
 
 <Meta title="Elements/Chips/Beta Chips" component={BetaChip} />
 

packages/manager/src/components/LabelAndTagsPanel/LabelAndTagsPanel.tsx

@@ -5,7 +5,7 @@ import { createStyles, withStyles, WithStyles } from '@mui/styles';
 import { Theme } from '@mui/material/styles';
 import Notice from 'src/components/Notice';
 import RenderGuard, { RenderGuardProps } from 'src/components/RenderGuard';
-import TagsInput, { TagsInputProps } from 'src/components/TagsInput';
+import { TagsInput, TagsInputProps } from 'src/components/TagsInput/TagsInput';
 import TextField, { Props as TextFieldProps } from 'src/components/TextField';
 
 type ClassNames = 'root' | 'inner' | 'expPanelButton';

packages/manager/src/components/TagCell/TagDrawer.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Drawer from 'src/components/Drawer';
-import TagsPanel from '../TagsPanel';
+import { TagsPanel } from 'src/components/TagsPanel/TagsPanel';
 
 export type OpenTagDrawer = (id: number, label: string, tags: string[]) => void;
 

packages/manager/src/components/TagsInput/TagsInput.stories.mdx

@@ -1,6 +1,6 @@
 import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
 import { useArgs } from '@storybook/client-api';
-import TagsInput from './TagsInput';
+import { TagsInput } from './TagsInput';
 
 <Meta title="Features/Tags/Tags Input" component={TagsInput} />
 

packages/manager/src/components/TagsInput/TagsInput.test.tsx

@@ -4,7 +4,7 @@ import userEvent from '@testing-library/user-event';
 import * as React from 'react';
 
 import { renderWithTheme } from 'src/utilities/testHelpers';
-import TagsInput from './TagsInput';
+import { TagsInput } from './TagsInput';
 
 jest.mock('src/components/EnhancedSelect/Select');
 const mockGetTags = jest.spyOn<any, any>(tags, 'getTags');

packages/manager/src/components/TagsInput/TagsInput.tsx

@@ -15,18 +15,18 @@ export interface Tag {
   label: string;
 }
 
-export interface Props {
+export interface TagsInputProps {
   label?: string;
   hideLabel?: boolean;
   name?: string;
   tagError?: string;
   value: Item[];
   onChange: (selected: Item[]) => void;
   disabled?: boolean;
-  menuPlacement?: 'bottom' | 'top' | 'auto' | undefined;
+  menuPlacement?: 'bottom' | 'top' | 'auto';
 }
 
-const TagsInput: React.FC<Props> = (props) => {
+const TagsInput = (props: TagsInputProps) => {
   const {
     label,
     hideLabel,
@@ -113,4 +113,4 @@ const TagsInput: React.FC<Props> = (props) => {
   );
 };
 
-export default TagsInput;
+export { TagsInput };

packages/manager/src/components/TagsPanel/TagsPanel.stories.mdx

@@ -1,6 +1,6 @@
 import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
 import Typography from 'src/components/core/Typography';
-import TagsPanel from './TagsPanel';
+import { TagsPanel } from './TagsPanel';
 import { useArgs } from '@storybook/client-api';
 
 <Meta

packages/manager/src/components/TagsPanel/TagsPanel.tsx

@@ -1,18 +1,17 @@
-import classNames from 'classnames';
+import { Theme } from '@mui/material/styles';
 import * as React from 'react';
+import { useQueryClient } from 'react-query';
 import Plus from 'src/assets/icons/plusSign.svg';
 import CircleProgress from 'src/components/CircleProgress';
-import Typography from 'src/components/core/Typography';
 import Select from 'src/components/EnhancedSelect/Select';
 import Tag from 'src/components/Tag';
-import { getErrorStringOrDefault } from 'src/utilities/errorUtils';
-import { makeStyles } from '@mui/styles';
-import { Theme } from '@mui/material/styles';
-import { updateTagsSuggestionsData, useTagSuggestions } from 'src/queries/tags';
+import Typography from 'src/components/core/Typography';
 import { useProfile } from 'src/queries/profile';
-import { useQueryClient } from 'react-query';
+import { updateTagsSuggestionsData, useTagSuggestions } from 'src/queries/tags';
+import { getErrorStringOrDefault } from 'src/utilities/errorUtils';
+import { makeStyles } from 'tss-react/mui';
 
-const useStyles = makeStyles((theme: Theme) => ({
+const useStyles = makeStyles()((theme: Theme) => ({
   '@keyframes fadeIn': {
     from: {
       opacity: 0,
@@ -37,7 +36,6 @@ const useStyles = makeStyles((theme: Theme) => ({
     animation: '$fadeIn 225ms linear forwards',
     borderLeft: `5px solid ${theme.palette.error.dark}`,
     '& .noticeText': {
-      ...theme.typography.body1,
       fontFamily: '"LatoWeb", sans-serif',
     },
     marginTop: 20,
@@ -124,15 +122,15 @@ interface ActionMeta {
   action: string;
 }
 
-export interface Props {
+export interface TagsPanelProps {
   align?: 'left' | 'right';
   tags: string[];
   updateTags: (tags: string[]) => Promise<any>;
   disabled?: boolean;
 }
 
-const TagsPanel: React.FC<Props> = (props) => {
-  const classes = useStyles();
+const TagsPanel = (props: TagsPanelProps) => {
+  const { classes, cx } = useStyles();
   const { tags, disabled, updateTags } = props;
 
   const queryClient = useQueryClient();
@@ -268,9 +266,9 @@ const TagsPanel: React.FC<Props> = (props) => {
         />
       ) : (
         <div
-          className={classNames({
+          className={cx({
             [classes.addButtonWrapper]: true,
-            [classes.hasError]: tagError,
+            [classes.hasError]: tagError.length > 0,
           })}
         >
           <button
@@ -293,7 +291,7 @@ const TagsPanel: React.FC<Props> = (props) => {
           return (
             <Tag
               key={`tag-item-${thisTag}`}
-              className={classNames({
+              className={cx({
                 [classes.tag]: true,
                 [classes.loading]: tagsLoading,
               })}
@@ -314,4 +312,4 @@ const TagsPanel: React.FC<Props> = (props) => {
   );
 };
 
-export default TagsPanel;
+export { TagsPanel };

packages/manager/src/features/Domains/DomainDetail/DomainDetail.tsx

@@ -10,7 +10,7 @@ import LandingHeader from 'src/components/LandingHeader';
 import Grid from 'src/components/Grid/Grid';
 import Paper from 'src/components/core/Paper';
 import Typography from 'src/components/core/Typography';
-import TagsPanel from 'src/components/TagsPanel';
+import { TagsPanel } from 'src/components/TagsPanel/TagsPanel';
 import DomainRecords from '../DomainRecords';
 import DeleteDomain from '../DeleteDomain';
 import {

packages/manager/src/features/Domains/EditDomainDrawer.tsx

@@ -7,7 +7,7 @@ import Drawer from 'src/components/Drawer';
 import MultipleIPInput from 'src/components/MultipleIPInput';
 import Notice from 'src/components/Notice/Notice';
 import Radio from 'src/components/Radio';
-import TagsInput from 'src/components/TagsInput';
+import { TagsInput } from 'src/components/TagsInput/TagsInput';
 import TextField from 'src/components/TextField';
 import { useFormik } from 'formik';
 import { useUpdateDomainMutation } from 'src/queries/domains';

packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeSummaryPanel.tsx

@@ -8,7 +8,7 @@ import ConfirmationDialog from 'src/components/ConfirmationDialog';
 import Chip from 'src/components/core/Chip';
 import Paper from 'src/components/core/Paper';
 import Grid from 'src/components/Grid';
-import TagsPanel from 'src/components/TagsPanel';
+import { TagsPanel } from 'src/components/TagsPanel/TagsPanel';
 import KubeClusterSpecs from 'src/features/Kubernetes/KubernetesClusterDetail/KubeClusterSpecs';
 import useFlags from 'src/hooks/useFlags';
 import { makeStyles } from '@mui/styles';

packages/manager/src/features/NodeBalancers/NodeBalancerCreate.tsx

@@ -17,7 +17,7 @@ import Typography from 'src/components/core/Typography';
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
 import Notice from 'src/components/Notice';
 import SelectRegionPanel from 'src/components/SelectRegionPanel';
-import TagsInput, { Tag } from 'src/components/TagsInput';
+import { TagsInput, Tag } from 'src/components/TagsInput/TagsInput';
 import { getAPIErrorOrDefault } from 'src/utilities/errorUtils';
 import { isEURegion } from 'src/utilities/formatRegion';
 import { sendCreateNodeBalancerEvent } from 'src/utilities/ga';

packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/SummaryPanel.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Paper from 'src/components/core/Paper';
 import Typography from 'src/components/core/Typography';
-import TagsPanel from 'src/components/TagsPanel';
+import { TagsPanel } from 'src/components/TagsPanel/TagsPanel';
 import summaryPanelStyles from 'src/containers/SummaryPanels.styles';
 import IPAddress from 'src/features/linodes/LinodesLanding/IPAddress';
 import { Link, useParams } from 'react-router-dom';

packages/manager/src/features/Volumes/VolumeDrawer/CreateVolumeForLinodeForm.tsx

@@ -11,7 +11,7 @@ import Form from 'src/components/core/Form';
 import { makeStyles } from '@mui/styles';
 import { Theme } from '@mui/material/styles';
 import Typography from 'src/components/core/Typography';
-import TagsInput, { Tag as _Tag } from 'src/components/TagsInput';
+import { TagsInput, Tag } from 'src/components/TagsInput/TagsInput';
 import { MAX_VOLUME_SIZE } from 'src/constants';
 import { resetEventsPolling } from 'src/eventsPolling';
 import { useGrants, useProfile } from 'src/queries/profile';
@@ -81,7 +81,7 @@ const CreateVolumeForm: React.FC<CombinedProps> = (props) => {
   const extendedCreateVolumeSchema = CreateVolumeSchema.concat(
     object({
       tags: array()
-        .transform((tagItems: _Tag[]) =>
+        .transform((tagItems: Tag[]) =>
           tagItems.map((thisTagItem) => thisTagItem.value)
         )
         .of(string()),
@@ -268,7 +268,7 @@ interface FormState {
   region: string;
   linode_id: number;
   config_id: number;
-  tags: _Tag[];
+  tags: Tag[];
 }
 
 const initialValues: FormState = {

packages/manager/src/features/Volumes/VolumeDrawer/EditVolumeForm.tsx

@@ -2,7 +2,7 @@ import { UpdateVolumeSchema } from '@linode/validation/lib/volumes.schema';
 import { useFormik } from 'formik';
 import * as React from 'react';
 import Notice from 'src/components/Notice';
-import TagsInput, { Tag } from 'src/components/TagsInput';
+import { TagsInput, Tag } from 'src/components/TagsInput/TagsInput';
 import { useUpdateVolumeMutation } from 'src/queries/volumes';
 import {
   handleFieldErrors,

packages/manager/src/features/linodes/LinodesCreate/LinodeCreateContainer.tsx

@@ -19,7 +19,7 @@ import { RouteComponentProps } from 'react-router-dom';
 import { compose as recompose } from 'recompose';
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
 import Grid from 'src/components/Grid';
-import { Tag } from 'src/components/TagsInput';
+import { Tag } from 'src/components/TagsInput/TagsInput';
 import {
   withProfile,
   WithProfileProps,

packages/manager/src/features/linodes/LinodesCreate/types.ts

@@ -7,7 +7,7 @@ import {
 import { Region } from '@linode/api-v4/lib/regions';
 import { StackScript, UserDefinedField } from '@linode/api-v4/lib/stackscripts';
 import { APIError } from '@linode/api-v4/lib/types';
-import { Tag } from 'src/components/TagsInput';
+import { Tag } from 'src/components/TagsInput/TagsInput';
 import { ExtendedType } from 'src/utilities/extendType';
 
 export interface ExtendedLinode extends Linode {