Refactor frontend part 4

[RichDom2185]

Description

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update
• Code quality improvements

How to test

Checklist

• I have tested this code
• I have updated the documentation

[coderabbitai]

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 373ecd85-a365-473b-bef0-a3cc604ee242

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[gemini-code-assist]

Code Review

This pull request refactors several page components to use the newly introduced PageTitle component and wraps content displays in PageWrapper. Feedback on these changes highlights that removing the outer div in the 404 page removes dark mode styling and test IDs, and recommends using a named export 'Component' for route components. Additionally, wrapping ContentDisplay in PageWrapper in adminpanel, dashboard, groundcontrol, and teamformation routes may cause child elements to be centered unexpectedly due to default text-center styling, which should be overridden with 'text-left'.

[gemini-code-assist]

The refactoring removed the outer div which contained className={Classes.DARK} and data-testid="NotFound-Component". Removing Classes.DARK can break the dark mode styling of the 404 page, and removing data-testid can break existing end-to-end or unit tests that rely on this identifier. Let's wrap the new layout in the original div to preserve both styling and testability. Additionally, since this is a route component in src/new_routes, we should use the named export Component instead of a default export or NotFound function.

Suggested change

	import { NonIdealState } from '@blueprintjs/core';
	import { IconNames } from '@blueprintjs/icons';
	import { PageCard, PageWrapper } from 'src/components/ui/page';
	function NotFound() {
	return (
	<div className={Classes.DARK} data-testid="NotFound-Component">
	<NonIdealState
	icon={IconNames.ERROR}
	title="404 Not Found"
	description="The requested resource could not be found"
	/>
	</div>
	<PageWrapper>
	<PageCard>
	<NonIdealState
	icon={IconNames.ERROR}
	title="404 Not Found"
	description="The requested resource could not be found"
	/>
	</PageCard>
	</PageWrapper>
	import { Classes, NonIdealState } from '@blueprintjs/core';
	import { IconNames } from '@blueprintjs/icons';
	import { PageCard, PageWrapper } from 'src/components/ui/page';
	export const Component = () => {
	return (
	<div className={Classes.DARK} data-testid="NotFound-Component">
	<PageWrapper>
	<PageCard>
	<NonIdealState
	icon={IconNames.ERROR}
	title="404 Not Found"
	description="The requested resource could not be found"
	/>
	</PageCard>
	</PageWrapper>
	</div>
	);
	};

References

1. In route components (typically located in 'src/new_routes'), use a named export 'Component' (e.g., 'export const Component = ...') instead of a default export, even for files containing only a single component.

[gemini-code-assist]

Wrapping ContentDisplay in PageWrapper applies text-center to the entire container. Since PageWrapper has text-center by default (intended for centering PageCard), this alignment will be inherited by all child elements of ContentDisplay unless explicitly overridden. This can cause text, buttons, and form controls in the Admin Panel to be centered unexpectedly. Consider adding className="text-left" to override this behavior.

Suggested change

	return (
	<PageWrapper>
	<ContentDisplay display={data} fullWidth={false} />
	</PageWrapper>
	);
	return (
	<PageWrapper className="text-left">
	<ContentDisplay display={data} fullWidth={false} />
	</PageWrapper>
	);

[gemini-code-assist]

Wrapping ContentDisplay in PageWrapper applies text-center to the entire container. Since PageWrapper has text-center by default (intended for centering PageCard), this alignment will be inherited by all child elements of ContentDisplay unless explicitly overridden. This can cause text, buttons, and grid headers in the Dashboard to be centered unexpectedly. Consider adding className="text-left" to override this behavior.

Suggested change

	return (
	<div>
	<PageWrapper>
	<ContentDisplay
	display={content}
	loadContentDispatch={() => dispatch(fetchGroupGradingSummary())}
	/>
	</div>
	</PageWrapper>
	);
	return (
	<PageWrapper className="text-left">
	<ContentDisplay
	display={content}
	loadContentDispatch={() => dispatch(fetchGroupGradingSummary())}
	/>
	</PageWrapper>
	);

[gemini-code-assist]

Wrapping ContentDisplay in PageWrapper applies text-center to the entire container. Since PageWrapper has text-center by default (intended for centering PageCard), this alignment will be inherited by all child elements of ContentDisplay unless explicitly overridden. This can cause text, buttons, and grid headers in Ground Control to be centered unexpectedly. Consider adding className="text-left" to override this behavior.

Suggested change

	return (
	<div>
	<PageWrapper>
	<ContentDisplay display={content} loadContentDispatch={loadContent} />
	</div>
	</PageWrapper>
	);
	return (
	<PageWrapper className="text-left">
	<ContentDisplay display={content} loadContentDispatch={loadContent} />
	</PageWrapper>
	);

[gemini-code-assist]

Wrapping ContentDisplay in PageWrapper applies text-center to the entire container. Since PageWrapper has text-center by default (intended for centering PageCard), this alignment will be inherited by all child elements of ContentDisplay unless explicitly overridden. This can cause text, buttons, and grid headers in Team Formation to be centered unexpectedly. Consider adding className="text-left" to override this behavior.

Suggested change

	return (
	<ContentDisplay
	display={
	teamFormationOverviews === undefined ? (
	loadingDisplay
	) : (
	<TeamFormationDashboard teams={data} />
	)
	}
	fullWidth
	/>
	<PageWrapper>
	<ContentDisplay
	display={
	teamFormationOverviews === undefined ? (
	loadingDisplay
	) : (
	<TeamFormationDashboard teams={data} />
	)
	}
	fullWidth
	/>
	</PageWrapper>
	);
	return (
	<PageWrapper className="text-left">
	<ContentDisplay
	display={
	teamFormationOverviews === undefined ? (
	loadingDisplay
	) : (
	<TeamFormationDashboard teams={data} />
	)
	}
	fullWidth
	/>
	</PageWrapper>
	);