chore: Migrate JS to Typescript for few scripts - Phase 1

[sabbir1991]

What

Migrates the Phase 1 media-sharing frontend JS files to TypeScript and adds shared frontend types.

Migrated files:

• assets/src/components/api.js -> assets/src/components/api.ts
• assets/src/admin/media-sharing/index.js -> assets/src/admin/media-sharing/index.tsx
• assets/src/admin/media-sharing/components/ShareMediaModal.js -> assets/src/admin/media-sharing/components/ShareMediaModal.tsx
• assets/src/admin/media-sharing/components/VersionModal.js -> assets/src/admin/media-sharing/components/VersionModal.tsx
• assets/src/admin/media-sharing/components/browser-uploader.js -> assets/src/admin/media-sharing/components/browser-uploader.tsx
• assets/src/admin/media-sharing/components/syncIcon.js -> assets/src/admin/media-sharing/components/syncIcon.tsx
• assets/src/admin/media-sharing/components/versionIcon.js -> assets/src/admin/media-sharing/components/versionIcon.tsx

Why

Moves the media-sharing admin UI onto the existing TypeScript setup and centralizes shared frontend types.

How

• Converts the Phase 1 media-sharing JS files to TS/TSX
• Adds shared types under assets/src/types
• Updates related imports and webpack entry to use the TSX entrypoint

Testing Instructions

1. Run npm run lint:js:types -- --pretty false
2. Run npm run test:js
3. Verify the media-sharing admin screen loads and core modal/uploader flows work

Screenshots

Additional Info

Checklist

• I have read the Contribution Guidelines.
• I have read the Development Guidelines.
• My code is tested to the best of my abilities.
• My code passes all lints (ESLint etc.).
• My code has detailed inline documentation.
• I have updated the project documentation as needed.
• I have added a changeset for this PR using npm run changeset.

[Copilot]

Pull request overview

This PR migrates the Phase 1 media-sharing admin UI and related frontend utilities from JS to TypeScript/TSX, and introduces shared frontend type definitions to centralize and standardize cross-script typings.

Changes:

• Switched the media-sharing webpack entrypoint to index.tsx and migrated the media-sharing UI/components to TS/TSX.
• Added shared type modules under assets/src/types (settings, WordPress/media-frame typings, media-sharing domain types, global window declarations).
• Updated existing components/utilities to consume the new shared types (e.g., notices, site config types, MIME map typing).

Reviewed changes

Copilot reviewed 19 out of 22 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
webpack.config.js	Updates media-sharing entrypoint to TSX.
assets/src/types/common.ts	Adds shared notice type used across UI/components.
assets/src/types/globals.d.ts	Centralizes window.* globals typing and SVG module typing.
assets/src/types/media-sharing.ts	Adds shared media-sharing domain/API/UI prop types.
assets/src/types/settings.ts	Adds shared settings/site config types and constants.
assets/src/types/wordpress.ts	Adds shared typings for WP media frame APIs used by uploader/modals.
assets/src/js/utils.ts	Refactors utility typings to use the new shared type modules.
assets/src/components/api.ts	Replaces api.js with a typed API client module.
assets/src/components/api.js	Removes the old JS API module (replaced by TS).
assets/src/components/SiteModal.tsx	Switches props typing to shared BrandSite types.
assets/src/components/SiteSettings.tsx	Switches notice typing to shared NoticeState.
assets/src/components/SiteTable.tsx	Switches site/editing typings to shared settings types.
assets/src/admin/settings/index.tsx	Removes inline window typings (now in global d.ts).
assets/src/admin/settings/page.tsx	Moves duplicated types to shared modules and adjusts notice rendering for ReactNode.
assets/src/admin/onboarding/index.tsx	Removes inline window typings (now in global d.ts).
assets/src/admin/onboarding/page.tsx	Uses shared site type constants/types and shared notice type.
assets/src/admin/media-sharing/index.tsx	Migrates main media-sharing UI to TSX with centralized types and updated asset loading.
assets/src/admin/media-sharing/components/ShareMediaModal.tsx	Migrates modal to TSX and introduces stronger prop typing.
assets/src/admin/media-sharing/components/VersionModal.tsx	Migrates modal to TSX and tightens event/version typing.
assets/src/admin/media-sharing/components/browser-uploader.tsx	Migrates uploader to TSX with shared WP/media-sharing typings.
assets/src/admin/media-sharing/components/syncIcon.tsx	Adds TSX icon module.
assets/src/admin/media-sharing/components/versionIcon.tsx	TSX formatting update to icon module.

Comments suppressed due to low confidence (5)

assets/src/admin/media-sharing/components/ShareMediaModal.tsx:45

• Calling setNotice(...) directly during render will trigger a state update on every render (new object each time), which can cause an infinite re-render loop / "Too many re-renders" error. Move this into a useEffect (run once when brandSitesPresent becomes false) or render an inline notice within the modal instead of setting parent state from render.
  assets/src/admin/media-sharing/components/ShareMediaModal.tsx:150
• CheckboxControl is rendered with an empty label, so the checkbox has no accessible name for screen readers. Provide a meaningful label (can be visually hidden) or an explicit aria-label/aria-labelledby so each site checkbox is identifiable.
  assets/src/admin/media-sharing/index.tsx:546
• This media selection checkbox has label="", which leaves it without an accessible name. Provide an appropriate label (e.g., "Select <title>") or aria-label/aria-labelledby so keyboard/screen reader users can understand what the checkbox selects.
  assets/src/admin/media-sharing/components/VersionModal.tsx:147
• The version selection CheckboxControl is rendered with an empty label, which means it has no accessible name. Provide a label or aria-label/aria-labelledby that identifies which version will be selected/restored.
  assets/src/admin/media-sharing/index.tsx:75
• UPLOAD_NONCE reads window.OneMediaMediaSharing.uploadNonce before the later ONEMEDIA_MEDIA_SHARING existence checks. If the script is ever loaded without localization, this will throw immediately and localizationError() becomes unreachable. Use optional chaining/defaults when reading from window.OneMediaMediaSharing (or compute this after verifying it exists).

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[justlevine]

Let's uses kebab-case.ts(x) for our files please

[justlevine]

From the contents, this seems like it should be renamed to types/notice.ts

[sabbir1991]

Renamed it

[justlevine]

🚀