feat: Yarn and Backstage Upgrade

[johnnyhuy]

PR Type

enhancement, dependencies

---

Description

• Refactored theme imports and definitions, removing @mui/joy related imports and joyTheme definition.
• Updated .dockerignore to include pnpm and specific .yarn directories.
• Removed yarn version specification from .tool-versions.
• Added nodeLinker: node-modules configuration to .yarnrc.yml.
• Updated Dockerfile to use Yarn 4.3.1 and pnpm, including changes to yarn install commands.
• Updated Makefile to use Yarn and corepack commands.
• Updated Backstage version to 1.28.3 in backstage.json.
• Updated various dependencies across multiple package.json files.

---

Changes walkthrough 📝

	Relevant files
Enhancement	1 files index.ts Refactor theme imports and definitions.                                    packages/app/src/theme/index.ts Removed @mui/joy related imports and joyTheme definition. Added padding style override for MuiGrid items. +3/-19
Configuration changes	3 files .dockerignore Update `.dockerignore` to include pnpm and yarn files.      .dockerignore Added .pnp.* and specific .yarn directories to ignore list. +8/-0      .tool-versions Update `.tool-versions` to remove yarn version.                    .tool-versions Removed yarn version specification. +1/-2      .yarnrc.yml Add nodeLinker configuration to `.yarnrc.yml`.                      .yarnrc.yml Added nodeLinker: node-modules configuration. +1/-0
Dependencies	6 files Dockerfile Update Dockerfile to use Yarn 4.3.1 and pnpm.                        Dockerfile Updated YARN_VERSION to 4.3.1. Added .yarn and .yarnrc.yml to Docker build context. Changed yarn install command to use --immutable flag. Updated production install command to use yarn workspaces focus. +4/-2      Makefile Update Makefile to use Yarn and corepack.                                Makefile Added corepack commands to install target. Updated install target to use yarn install. +4/-1      backstage.json Update Backstage version in `backstage.json`.                        backstage.json Updated Backstage version to 1.28.3. +1/-1      package.json Update package manager and dependencies in `package.json`. package.json Updated @backstage/cli version. Added packageManager field with yarn@4.3.1. +4/-3      package.json Update dependencies in `packages/app/package.json`.            packages/app/package.json Updated various dependencies to newer versions. Added new dev dependencies. +27/-24  package.json Update dependencies in `packages/backend/package.json`.    packages/backend/package.json Updated various dependencies to newer versions. +22/-22

---

💡 PR-Agent usage:
Comment /help on the PR to get a list of all available PR-Agent tools and their descriptions

[johnnyhuy]

/describe

[johnnyhuy]

/review

[echohello-codium-ai-pr-agent]

PR Review 🔍

(Review updated until commit f953e04)

⏱️ Estimated effort to review [1-5]	3, because the PR involves multiple changes across various files including dependency updates, Dockerfile modifications, and adjustments in configuration files. The complexity is moderate due to the variety of components affected and the need to ensure compatibility and functionality across the updates.
🧪 Relevant tests	No
⚡ Possible issues	Possible Bug: The removal of yarn install --immutable and replacement with yarn workspaces focus --all --production in the Dockerfile might not respect the lockfile, potentially leading to inconsistencies in dependencies.
🔒 Security concerns	No

Code feedback:

---

relevant file	Dockerfile
suggestion	Consider adding back the --immutable flag when using Yarn to ensure that the yarn.lock file is respected and no updates to the dependencies are made during installation. This is crucial for maintaining consistent builds in production environments. [important]
relevant line	RUN yarn workspaces focus --all --production && rm -rf "$(yarn cache clean)"

---

relevant file	.dockerignore
suggestion	Add a newline at the end of the .dockerignore file to adhere to POSIX standards, which can help avoid potential issues with Unix tools that expect a newline at the end of files. [medium]
relevant line	!.yarn/versions

---

relevant file	packages/app/src/theme/index.ts
suggestion	Ensure that the new grid item padding in MuiGrid does not conflict with existing CSS rules that might be applied elsewhere in your application. This change could potentially lead to unexpected layout shifts. Consider isolating this change or ensuring broader testing to catch such issues. [important]
relevant line	item: {

---

relevant file	package.json
suggestion	Verify that the update of the @backstage/cli dependency and others are compatible with your current project setup. Major version changes can sometimes introduce breaking changes that might require adjustments in your codebase. [important]
relevant line	"@backstage/cli": "^0.26.10",

---

[echohello-codium-ai-pr-agent]

PR Description updated to latest commit (f953e04)

[echohello-codium-ai-pr-agent]

Persistent review updated to latest commit f953e04

[echohello-codium-ai-pr-agent]

PR Code Suggestions ✨

Category	Suggestion	Score
Performance	Improve component performance by preventing unnecessary re-renders using React.memo Consider using a memoization technique with React.memo for the icon component to prevent unnecessary re-renders when the props do not change. This is particularly useful for components that rely solely on props to derive their output and are used frequently throughout the application. packages/app/src/components/icons/Aws.tsx [8-29] -const icon: React.FC<IconProps> = ({ width, height }) => { +const icon: React.FC<IconProps> = React.memo(({ width, height }) => { return ( <svg width={width} height={height} viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg" > ... </svg> ); -}; +}); Suggestion importance[1-10]: 9 Why: Using React.memo is a good practice to prevent unnecessary re-renders, especially for components that rely solely on props. This suggestion is contextually accurate and improves performance.	9
	Improve component performance by memoizing it to prevent unnecessary re-renders Consider using a memoized component for the icon to avoid unnecessary re-renders when the props width and height do not change. This can be achieved by wrapping the component with React.memo. packages/app/src/components/icons/Azure.tsx [8-75] -const icon: React.FC<IconProps> = ({ width, height }) => { +const icon: React.FC<IconProps> = React.memo(({ width, height }) => { return ( <svg width={width} height={height} viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg" > ... </svg> ); -}; +}); Suggestion importance[1-10]: 9 Why: Memoizing the component can significantly improve performance by preventing unnecessary re-renders, which is especially beneficial for components that are frequently used or have complex rendering logic.	9
	Memoize the PageHeading component to enhance performance and avoid unnecessary re-renders To enhance the performance and avoid unnecessary re-renders, memoize the PageHeading component using React.memo. This is particularly useful since this component does not seem to have props that change often. packages/app/src/components/home/HomePage.tsx [63-73] -const PageHeading: React.FC<{ icon: React.ReactNode; title: string }> = ({ - icon, - title, -}) => ( +const PageHeading: React.FC<{ icon: React.ReactNode; title: string }> = React.memo(({ icon, title }) => ( <Box sx={{ display: 'flex', alignItems: 'center' }}> {icon} <Typography variant="h2" sx={{ paddingLeft: '.5rem', marginBottom: 0 }}> {title} </Typography> </Box> -); +)); Suggestion importance[1-10]: 7 Why: Memoizing the PageHeading component can enhance performance by preventing unnecessary re-renders, especially since its props are unlikely to change frequently.	7
Best practice	Define explicit types for parameters in event handlers to ensure type safety and avoid potential bugs To avoid potential bugs and ensure type safety, explicitly define the type for the newValue parameter in the onChange handler of the ToggleButtonGroup. This prevents any unexpected type issues during runtime. packages/app/src/components/home/HomePage.tsx [249-251] -onChange={(_, newValue) => { +onChange={(_, newValue: boolean) => { setIsSquad(newValue); }} Suggestion importance[1-10]: 9 Why: Explicitly defining the type for the newValue parameter in the onChange handler ensures type safety and helps prevent potential runtime bugs.	9
	Enhance readability by using direct return in functional component Use destructuring directly in the function parameter to enhance readability and conciseness of the component definition. packages/app/src/components/icons/Azure.tsx [8-75] -const icon: React.FC<IconProps> = ({ width, height }) => { - return ( +const icon: React.FC<IconProps> = ({ width, height }) => ( + <svg {...svgProps}> ... - ); -}; + </svg> +); Suggestion importance[1-10]: 5 Why: While this suggestion does enhance readability, it is a minor improvement and does not significantly impact the functionality or performance of the component.	5
Maintainability	Refactor the large HomePage component into smaller, more manageable sub-components To improve the readability and maintainability of the HomePage component, consider breaking down the large component into smaller, more manageable sub-components. This will make the code easier to understand and maintain, especially as the component grows and more features are added. packages/app/src/components/home/HomePage.tsx [75-654] +const Header = () => { + ... +}; + +const PageHeading = () => { + ... +}; + +const MetricsCards = () => { + ... +}; + export const HomePage = () => { - ... -} + return ( + <Page themeId="home"> + <Header /> + <MetricsCards /> + </Page> + ); +}; Suggestion importance[1-10]: 8 Why: Breaking down the large HomePage component into smaller sub-components improves readability and maintainability, making the code easier to manage and extend in the future.	8
	Extract SVG paths into separate components for better modularity Extract the inline SVG paths and definitions into separate components or files to improve the modularity and reusability of the SVG elements. This approach also makes the main component cleaner and easier to maintain. packages/app/src/components/icons/Confluence.tsx [10-20] -<svg - width={width} - height={height} - viewBox="0 0 63 61" - fill="none" - xmlns="http://www.w3.org/2000/svg" -> +const PathComponent = () => ( <path d="M2.22879 46.0837C1.57879 47.1437 0.848797 48.3737 0.278797 49.3537C0.0120292 49.8045 -0.0672331 50.342 0.0580516 50.8506C0.183336 51.3592 0.503165 51.7984 0.948795 52.0737L13.9488 60.0737C14.1747 60.2132 14.4261 60.3063 14.6884 60.3476C14.9506 60.3889 15.2185 60.3776 15.4763 60.3143C15.7341 60.251 15.9768 60.137 16.1901 59.9789C16.4034 59.8209 16.5832 59.6219 16.7188 59.3937C17.2288 58.5237 17.8988 57.3937 18.6288 56.1837C23.7788 47.6837 28.9688 48.7237 38.2988 53.1837L51.1888 59.3137C51.4304 59.4287 51.6927 59.4941 51.96 59.5059C52.2274 59.5177 52.4944 59.4757 52.7452 59.3825C52.9961 59.2892 53.2257 59.1466 53.4204 58.963C53.6151 58.7794 53.771 58.5586 53.8788 58.3137L60.0688 44.3137C60.279 43.8331 60.292 43.2892 60.1049 42.7991C59.9179 42.309 59.5458 41.912 59.0688 41.6937C56.3488 40.4137 50.9388 37.8537 46.0688 35.5137C28.5088 26.9737 13.6188 27.5337 2.22879 46.0837Z" fill="url(#paint0_linear_1_52)" /> - ... -</svg> +); +const icon: React.FC<IconProps> = ({ width, height }) => { + return ( + <svg + width={width} + height={height} + viewBox="0 0 63 61" + fill="none" + xmlns="http://www.w3.org/2000/svg" + > + <PathComponent /> + ... + </svg> + ); +}; Suggestion importance[1-10]: 8 Why: This suggestion significantly improves the modularity and maintainability of the code by separating concerns and making the main component cleaner. It is a valuable improvement for long-term maintenance.	8
	Rename the icon component to a more descriptive name Consider using a more descriptive name for the icon component to reflect its specific use or representation, such as ConfluenceIcon. This enhances readability and maintainability, especially when multiple icon components are used within the same project. packages/app/src/components/icons/Confluence.tsx [8] -const icon: React.FC<IconProps> = ({ width, height }) => { +const ConfluenceIcon: React.FC<IconProps> = ({ width, height }) => { Suggestion importance[1-10]: 7 Why: The suggestion improves readability and maintainability by making the component's purpose clearer, which is particularly useful in a project with multiple icon components. However, it is not a critical change.	7
	Refactor repeated SVG attributes into a shared constant for cleaner code and potential reuse Extract the inline styles and repeated attributes into a constant outside the component to clean up the JSX and potentially share these constants across other components or SVG elements. packages/app/src/components/icons/Azure.tsx [10-15] -<svg - width={width} - height={height} - viewBox="0 0 512 512" - fill="none" - xmlns="http://www.w3.org/2000/svg" -> +const svgProps = { + width: width, + height: height, + viewBox: "0 0 512 512", + fill: "none", + xmlns: "http://www.w3.org/2000/svg" +}; +... +<svg {...svgProps}> Suggestion importance[1-10]: 7 Why: This suggestion improves code maintainability and readability by reducing redundancy and making it easier to manage shared properties.	7
	Use a constant for repeated padding values to reduce redundancy Use a constant for the repeated value '0.5rem' in the padding style overrides for MuiGrid. This approach reduces redundancy and potential errors during future modifications. packages/app/src/theme/index.ts [170-184] +const GRID_PADDING = '0.5rem'; MuiGrid: { styleOverrides: { item: { - padding: '.5rem', + padding: GRID_PADDING, }, root: { '&.v5-MuiGrid-container': { margin: 0, }, '&.v5-MuiGrid-item': { - padding: '.5rem', + padding: GRID_PADDING, }, '&.MuiGrid-item': { - padding: '.5rem', + padding: GRID_PADDING, }, }, }, }, Suggestion importance[1-10]: 6 Why: The suggestion reduces redundancy and potential errors, improving maintainability. However, the impact is relatively minor as it addresses a small part of the code.	6
Possible issue	Improve layout stability by removing negative margins and adjusting spacing or padding Avoid negative margins which can lead to layout issues and unexpected overlaps in UI components. Instead, use padding or adjust grid spacing to achieve the desired layout. packages/app/src/components/catalog/EntityPage.tsx [128-133] -<Grid item md={6} marginBottom={-1}> +<Grid item md={6}> <EntityAboutCard variant="gridItem" /> </Grid> -<Grid item md={6} marginBottom={-1}> +<Grid item md={6}> <EntityCatalogGraphCard variant="gridItem" height={400} /> </Grid> Suggestion importance[1-10]: 8 Why: Negative margins can lead to layout issues and unexpected overlaps. Removing them enhances layout stability and prevents potential UI bugs.	8
Accessibility	Improve accessibility by adding appropriate ARIA attributes to the SVG element To ensure that the component is fully accessible, consider adding role="img" and aria-label or aria-labelledby attributes to the element. packages/app/src/components/icons/Azure.tsx [10-15] <svg width={width} height={height} viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg" + role="img" + aria-label="Description of the icon" > Suggestion importance[1-10]: 8 Why: Adding ARIA attributes is crucial for accessibility, ensuring that the component is usable by people with disabilities. This is an important enhancement for inclusivity.	8
Enhancement	Ensure consistent UI by maintaining uniform grid spacing across components Ensure consistent spacing in the Grid container to maintain uniformity across different sections of the application. The removal of spacing in some Grid containers might lead to inconsistent UI, which can be confusing or visually unappealing. packages/app/src/components/catalog/EntityPage.tsx [126-141] -<Grid container spacing={0} alignItems="stretch"> +<Grid container spacing={2} alignItems="stretch"> {entityWarningContent} - <Grid item md={6} marginBottom={-1}> + <Grid item md={6}> <EntityAboutCard variant="gridItem" /> </Grid> - <Grid item md={6} marginBottom={-1}> + <Grid item md={6}> <EntityCatalogGraphCard variant="gridItem" height={400} /> </Grid> ... </Grid> Suggestion importance[1-10]: 7 Why: Ensuring consistent spacing in the Grid container improves the visual uniformity of the application. However, the impact is more on aesthetics and less on functionality.	7
Readability	Use a more descriptive variable name than isSquad to improve code readability Consider using a more descriptive variable name than isSquad to improve code readability and maintainability. A name like isSquadViewActive would provide more context about what the variable represents. packages/app/src/components/home/HomePage.tsx [76] -const [isSquad, setIsSquad] = React.useState(true); +const [isSquadViewActive, setIsSquadViewActive] = React.useState(true); Suggestion importance[1-10]: 6 Why: Using a more descriptive variable name like isSquadViewActive improves code readability by providing better context about the variable's purpose.	6