fix(web): custom domain form #1369
Conversation
WalkthroughThis pull request involves removing optional Changes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
✅ Deploy Preview for reearth-web ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🔭 Outside diff range comments (1)
web/src/beta/features/ProjectSettings/innerPages/PublicSettings/PublicSettingsDetail.tsx (1)
Line range hint
125-133: Consider improving type safety and error handling in ExtensionComponent.The current implementation could benefit from the following improvements:
- Add type guards to handle the union type props safely
- Add validation for empty typename
- Wrap the extension component in an error boundary
Here's a suggested implementation:
- const ExtensionComponent = (props: ExtensionComponentProps) => { - const type = props.typename.toLocaleLowerCase(); - const extensionId = `custom-${type}-domain`; - const Component = extensions?.find((e) => e.id === extensionId)?.component; - if (!Component) { - return null; - } - return <Component {...props} />; + const ExtensionComponent = (props: ExtensionComponentProps) => { + const type = props.typename?.trim().toLowerCase(); + if (!type) return null; + + const extensionId = `custom-${type}-domain`; + const Component = extensions?.find((e) => e.id === extensionId)?.component; + if (!Component) return null; + + return ( + <ErrorBoundary fallback={<div>Extension failed to load</div>}> + <Component + {...(props.typename === "Project" + ? (props as ProjectPublicationExtensionProps) + : (props as StoryPublicationExtensionProps) + )} + /> + </ErrorBoundary> + ); + };
🧹 Nitpick comments (1)
web/src/beta/features/ProjectSettings/innerPages/PublicSettings/PublicSettingsDetail.tsx (1)
264-284: Consider improving error handling and user experience in extension rendering.The current implementation could benefit from the following improvements:
- Add a loading state while the access token is being fetched
- Add a fallback UI when extensions are not available
- Add null checks for typename access
Here's a suggested implementation:
- {extensions && extensions.length > 0 && accessToken && ( + {extensions?.length > 0 ? ( + accessToken ? ( <Collapse title={t("Custom Domain")} size="large"> <ExtensionComponent - typename={settingsItem.__typename || ""} + typename={settingsItem.__typename ?? ""} {...(settingsItem.__typename === "Project" ? { projectId: settingsItem.id, projectAlias: settingsItem.alias } : { storyId: settingsItem.id, storyAlias: settingsItem.alias })} lang={currentLang} theme={currentTheme} accessToken={accessToken} onNotificationChange={onNotificationChange} version="visualizer" /> </Collapse> + ) : ( + <LoadingSpinner /> + ) + ) : ( + <EmptyState message={t("No custom domain extensions available")} /> )}
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
web/src/beta/features/ProjectSettings/innerPages/PublicSettings/PublicSettingsDetail.tsx(3 hunks)web/src/beta/features/ProjectSettings/innerPages/PublicSettings/index.tsx(0 hunks)web/src/services/api/storytellingApi/utils.ts(0 hunks)web/src/services/config/extensions.ts(0 hunks)
💤 Files with no reviewable changes (3)
- web/src/services/config/extensions.ts
- web/src/services/api/storytellingApi/utils.ts
- web/src/beta/features/ProjectSettings/innerPages/PublicSettings/index.tsx
⏰ Context from checks skipped due to timeout of 90000ms (6)
- GitHub Check: ci-server / ci-server-lint
- GitHub Check: ci-server / ci-server-test
- GitHub Check: ci-web / ci
- GitHub Check: Redirect rules - reearth-web
- GitHub Check: Header rules - reearth-web
- GitHub Check: Pages changed - reearth-web
🔇 Additional comments (3)
web/src/beta/features/ProjectSettings/innerPages/PublicSettings/PublicSettingsDetail.tsx (3)
31-37: LGTM! Well-structured type definitions.The new type definitions follow TypeScript best practices and properly handle the optional
__typenameproperty using type composition.
39-45: LGTM! Props interface is well-defined.The props interface properly handles both project and story settings with appropriate type safety.
46-52: LGTM! Extension props type is well-structured.The type definition properly handles both project and story publication extensions while ensuring type safety with the required
typenameproperty.
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #1369 +/- ##
==========================================
- Coverage 22.79% 22.62% -0.17%
==========================================
Files 1052 1061 +9
Lines 109347 110306 +959
Branches 669 677 +8
==========================================
+ Hits 24924 24959 +35
- Misses 83161 84084 +923
- Partials 1262 1263 +1
Flags with carried forward coverage won't be shown. Click here to find out more.
|
Overview
Fixes an issue where custom domain extension components were not loading correctly.
What I've done
The
typenamereferenced in the separation of Project and Story was not being recognized correctly.What I haven't done
How I tested
Which point I want you to review particularly
Memo
Summary by CodeRabbit
Refactor
typenameproperties from multiple type definitions across different filesPublicSettingsDetailcomponent with new function prop for Google Analytics settingsChores