Fix RTL language support in DevPortal#1362
Open
vinupa wants to merge 10 commits into
Open
Conversation
vinupa
requested review from
HeshanSudarshana,
Krishanx92,
PasanT9,
RakhithaRR,
ashera96,
hisanhunais,
lasanthaS,
piyumaldk and
tharikaGitHub
as code owners
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthroughAdds Emotion RTL/LTR caching and dependencies, converts many components and CSS to logical inline properties, forces LTR where required in embedded consoles and code/token blocks, adjusts tooltip/popover placements for RTL, and expands Arabic localization strings. ChangesRTL/LTR Support Across Developer Portal
🎯 4 (Complex) | ⏱️ ~60 minutes 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
portals/devportal/src/main/webapp/source/src/app/components/Apis/Listing/Recommendations.jsx (1)
214-214: 🛠️ Refactor suggestion | 🟠 Major | ⚡ Quick winUse deep merge for consistent theme merging.
This line uses
Object.assign()(shallow merge), whileApiTableView.jsxuses lodashmerge()(deep merge) for the same pattern. Shallow merging can cause nested theme properties inConfigurationsto completely replace corresponding nested objects inmuiThemeandthemeAdditions, rather than merging them. This inconsistency may lead to theme override bugs.♻️ Align with ApiTableView's deep merge pattern
+import merge from 'lodash.merge'; +import cloneDeep from 'lodash.clonedeep';Then update the theme construction:
- muiTheme = Object.assign(muiTheme, themeAdditions, Configurations); + const systemTheme = merge({}, muiTheme, themeAdditions, Configurations); - return createTheme(adaptV4Theme(muiTheme)); + return createTheme(adaptV4Theme(systemTheme));🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@portals/devportal/src/main/webapp/source/src/app/components/Apis/Listing/Recommendations.jsx` at line 214, The line using Object.assign to combine muiTheme, themeAdditions, and Configurations performs a shallow merge and can overwrite nested theme objects; replace this with a deep merge (the same pattern used in ApiTableView.jsx) using lodash.merge (or equivalent deep-merge utility) to merge muiTheme, themeAdditions, and Configurations so nested properties are merged rather than replaced—update the usage near the variable muiTheme assignment in Recommendations.jsx to call merge(muiTheme, themeAdditions, Configurations) (ensure lodash.merge is imported if not already).portals/devportal/src/main/webapp/source/src/app/components/Apis/Details/GraphQLConsole/GraphQLConsole.jsx (1)
52-76:⚠️ Potential issue | 🟠 Major | ⚡ Quick winIncomplete RTL migration: Convert remaining physical CSS properties to logical properties.
The styled component still contains physical directional properties that should be migrated to logical properties for complete RTL support:
- Line 53:
marginRight: 10should bemarginInlineEnd: 10- Line 64:
paddingRight: theme.spacing(2)should bepaddingInlineEnd: theme.spacing(2)- Line 73:
marginLeft: theme.spacing(2)should bemarginInlineStart: theme.spacing(2)♻️ Proposed fix to complete the RTL migration
[`& .${classes.buttonIcon}`]: { - marginRight: 10, + marginInlineEnd: 10, }, [`& .${classes.grid}`]: { marginTop: theme.spacing(4), marginBottom: theme.spacing(4), - paddingRight: theme.spacing(2), + paddingInlineEnd: theme.spacing(2), justifyContent: 'center', }, [`& .${classes.titleSub}`]: { - marginLeft: theme.spacing(2), + marginInlineStart: theme.spacing(2), paddingTop: theme.spacing(2), paddingBottom: theme.spacing(2), },🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@portals/devportal/src/main/webapp/source/src/app/components/Apis/Details/GraphQLConsole/GraphQLConsole.jsx` around lines 52 - 76, The styled component still uses physical directional CSS; update the properties in the rules for classes.buttonIcon, classes.grid, and classes.titleSub to logical equivalents: replace marginRight (in the classes.buttonIcon rule) with marginInlineEnd, replace paddingRight (in the classes.grid rule) with paddingInlineEnd, and replace marginLeft (in the classes.titleSub rule) with marginInlineStart so RTL layouts are supported; keep values (10 and theme.spacing(...)) unchanged and leave classes.paper and classes.userNotificationPaper rules as-is.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In
`@portals/devportal/src/main/webapp/source/src/app/components/Apis/Details/Documents/elements.css`:
- Line 3: The remaining inner gutter uses a physical property; locate the
.sl-elements rule that currently sets padding-right: 65px and replace that
physical padding with the logical equivalent (use padding-inline-end: 65px) so
the inner gutter follows RTL/LTR flows; remove the hard-coded padding-right or
keep it only as a fallback if you need legacy support.
- Around line 12832-12834: The current rule forcing LTR on [dir="rtl"]
.sl-elements-api > div is too broad and flips all descendants; remove that
selector and instead apply direction: ltr only to the code/example surfaces
(e.g. target selectors like .sl-elements-api pre, .sl-elements-api code,
.sl-elements-api .example, .sl-elements-api .request, .sl-elements-api
.response, .sl-elements-api .console or whichever classes render code/JSON/URLs)
under [dir="rtl"]; update the stylesheet so .sl-elements-api > div no longer
sets direction and the narrower selectors set direction: ltr to preserve RTL
prose/headings/tables while keeping code blocks LTR.
---
Outside diff comments:
In
`@portals/devportal/src/main/webapp/source/src/app/components/Apis/Details/GraphQLConsole/GraphQLConsole.jsx`:
- Around line 52-76: The styled component still uses physical directional CSS;
update the properties in the rules for classes.buttonIcon, classes.grid, and
classes.titleSub to logical equivalents: replace marginRight (in the
classes.buttonIcon rule) with marginInlineEnd, replace paddingRight (in the
classes.grid rule) with paddingInlineEnd, and replace marginLeft (in the
classes.titleSub rule) with marginInlineStart so RTL layouts are supported; keep
values (10 and theme.spacing(...)) unchanged and leave classes.paper and
classes.userNotificationPaper rules as-is.
In
`@portals/devportal/src/main/webapp/source/src/app/components/Apis/Listing/Recommendations.jsx`:
- Line 214: The line using Object.assign to combine muiTheme, themeAdditions,
and Configurations performs a shallow merge and can overwrite nested theme
objects; replace this with a deep merge (the same pattern used in
ApiTableView.jsx) using lodash.merge (or equivalent deep-merge utility) to merge
muiTheme, themeAdditions, and Configurations so nested properties are merged
rather than replaced—update the usage near the variable muiTheme assignment in
Recommendations.jsx to call merge(muiTheme, themeAdditions, Configurations)
(ensure lodash.merge is imported if not already).
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: df217633-691e-46f1-a65c-c4996eb17f95
⛔ Files ignored due to path filters (1)
portals/devportal/src/main/webapp/package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (31)
portals/devportal/src/main/webapp/package.jsonportals/devportal/src/main/webapp/services/settings/userTheme.jspportals/devportal/src/main/webapp/site/public/css/main.cssportals/devportal/src/main/webapp/site/public/locales/ar.jsonportals/devportal/src/main/webapp/source/src/DevPortal.jsxportals/devportal/src/main/webapp/source/src/app/components/Apis/Chat/ChatIcon.jsxportals/devportal/src/main/webapp/source/src/app/components/Apis/Chat/ChatWindow.jsxportals/devportal/src/main/webapp/source/src/app/components/Apis/Details/ApiConsole/ApiConsole.jsxportals/devportal/src/main/webapp/source/src/app/components/Apis/Details/AsyncApiConsole/AsyncApiConsole.jsxportals/devportal/src/main/webapp/source/src/app/components/Apis/Details/Breadcrumb.jsxportals/devportal/src/main/webapp/source/src/app/components/Apis/Details/Comments/Comment.jsxportals/devportal/src/main/webapp/source/src/app/components/Apis/Details/Documents/Details.jsxportals/devportal/src/main/webapp/source/src/app/components/Apis/Details/Documents/DocList.jsxportals/devportal/src/main/webapp/source/src/app/components/Apis/Details/Documents/Documents.jsxportals/devportal/src/main/webapp/source/src/app/components/Apis/Details/Documents/View.jsxportals/devportal/src/main/webapp/source/src/app/components/Apis/Details/Documents/elements.cssportals/devportal/src/main/webapp/source/src/app/components/Apis/Details/GraphQLConsole/GraphQLConsole.jsxportals/devportal/src/main/webapp/source/src/app/components/Apis/Details/index.jsxportals/devportal/src/main/webapp/source/src/app/components/Apis/Listing/APICardView.jsxportals/devportal/src/main/webapp/source/src/app/components/Apis/Listing/APICards/ApiThumbClassic.jsxportals/devportal/src/main/webapp/source/src/app/components/Apis/Listing/ApiBreadcrumbs.jsxportals/devportal/src/main/webapp/source/src/app/components/Apis/Listing/ApiTableView.jsxportals/devportal/src/main/webapp/source/src/app/components/Apis/Listing/CommonListing.jsxportals/devportal/src/main/webapp/source/src/app/components/Apis/Listing/Recommendations.jsxportals/devportal/src/main/webapp/source/src/app/components/Applications/Details/index.jsxportals/devportal/src/main/webapp/source/src/app/components/Base/Header/LanuageSelector.jsxportals/devportal/src/main/webapp/source/src/app/components/Shared/AppsAndKeys/ApiKeyManager.jsxportals/devportal/src/main/webapp/source/src/app/components/Shared/AppsAndKeys/TokenManager.jsxportals/devportal/src/main/webapp/source/src/app/components/Shared/AppsAndKeys/ViewCurl.jsxportals/devportal/src/main/webapp/source/src/app/components/Shared/AppsAndKeys/ViewToken.jsxportals/devportal/src/main/webapp/source/src/app/components/Shared/LeftMenuItem.jsx
vinupa
force-pushed
the
rtl-arabic-support
branch
from
84a4ea8 to
1d6be8b
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
portals/devportal/src/main/webapp/source/src/app/components/Apis/Details/AsyncApiConsole/AsyncApiConsole.jsx (1)
50-71: ⚡ Quick winConsider migrating to logical CSS properties for RTL consistency.
While the
dir='ltr'addition is correct for the console content, the styles fortitleSub(line 67) still use the physical propertymarginLeft. In contrast,GraphQLConsole.jsxwas updated to usemarginInlineStartfor the same class. Since the title Typography (line 255) is outside thedir='ltr'Paper, it should respond to the global direction setting.This creates a visual inconsistency in RTL mode where GraphQL console titles will mirror correctly but AsyncAPI console titles will not.
♻️ Suggested migration to logical properties
[`& .${classes.titleSub}`]: { - marginLeft: theme.spacing(2), + marginInlineStart: theme.spacing(2), paddingTop: theme.spacing(2), paddingBottom: theme.spacing(2), },🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@portals/devportal/src/main/webapp/source/src/app/components/Apis/Details/AsyncApiConsole/AsyncApiConsole.jsx` around lines 50 - 71, The styles use the physical property marginLeft in the classes.titleSub rule which breaks RTL mirroring (unlike GraphQLConsole.jsx which uses marginInlineStart); update the AsyncApiConsole styles to replace marginLeft with the logical property marginInlineStart for classes.titleSub so the title Typography (outside the dir='ltr' Paper) respects global text direction; search for classes.titleSub and change marginLeft -> marginInlineStart, keeping the same theme.spacing(...) value.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In
`@portals/devportal/src/main/webapp/source/src/app/components/Base/Header/LanuageSelector.jsx`:
- Around line 60-62: The closed Select uses a physical textIndent which won't
mirror in RTL, causing inconsistent spacing vs the opened menu that uses
paddingInlineStart; update the style for classes.langText in LanuageSelector.jsx
to replace textIndent with paddingInlineStart (using theme.spacing(1)) so both
the closed Select (classes.langText) and the opened menu use the logical inline
padding and behave consistently in RTL; ensure you remove textIndent and apply
the same spacing value to paddingInlineStart.
---
Nitpick comments:
In
`@portals/devportal/src/main/webapp/source/src/app/components/Apis/Details/AsyncApiConsole/AsyncApiConsole.jsx`:
- Around line 50-71: The styles use the physical property marginLeft in the
classes.titleSub rule which breaks RTL mirroring (unlike GraphQLConsole.jsx
which uses marginInlineStart); update the AsyncApiConsole styles to replace
marginLeft with the logical property marginInlineStart for classes.titleSub so
the title Typography (outside the dir='ltr' Paper) respects global text
direction; search for classes.titleSub and change marginLeft ->
marginInlineStart, keeping the same theme.spacing(...) value.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: e16ad60a-c8da-4f23-87f4-edaac4b8a029
📒 Files selected for processing (28)
portals/devportal/src/main/webapp/site/public/css/main.cssportals/devportal/src/main/webapp/site/public/locales/ar.jsonportals/devportal/src/main/webapp/source/src/app/components/Apis/Chat/ChatIcon.jsxportals/devportal/src/main/webapp/source/src/app/components/Apis/Chat/ChatWindow.jsxportals/devportal/src/main/webapp/source/src/app/components/Apis/Details/ApiConsole/ApiConsole.jsxportals/devportal/src/main/webapp/source/src/app/components/Apis/Details/AsyncApiConsole/AsyncApiConsole.jsxportals/devportal/src/main/webapp/source/src/app/components/Apis/Details/Breadcrumb.jsxportals/devportal/src/main/webapp/source/src/app/components/Apis/Details/Comments/Comment.jsxportals/devportal/src/main/webapp/source/src/app/components/Apis/Details/Documents/Details.jsxportals/devportal/src/main/webapp/source/src/app/components/Apis/Details/Documents/DocList.jsxportals/devportal/src/main/webapp/source/src/app/components/Apis/Details/Documents/Documents.jsxportals/devportal/src/main/webapp/source/src/app/components/Apis/Details/Documents/View.jsxportals/devportal/src/main/webapp/source/src/app/components/Apis/Details/Documents/elements.cssportals/devportal/src/main/webapp/source/src/app/components/Apis/Details/GraphQLConsole/GraphQLConsole.jsxportals/devportal/src/main/webapp/source/src/app/components/Apis/Details/index.jsxportals/devportal/src/main/webapp/source/src/app/components/Apis/Listing/APICardView.jsxportals/devportal/src/main/webapp/source/src/app/components/Apis/Listing/APICards/ApiThumbClassic.jsxportals/devportal/src/main/webapp/source/src/app/components/Apis/Listing/ApiBreadcrumbs.jsxportals/devportal/src/main/webapp/source/src/app/components/Apis/Listing/ApiTableView.jsxportals/devportal/src/main/webapp/source/src/app/components/Apis/Listing/CommonListing.jsxportals/devportal/src/main/webapp/source/src/app/components/Apis/Listing/Recommendations.jsxportals/devportal/src/main/webapp/source/src/app/components/Applications/Details/index.jsxportals/devportal/src/main/webapp/source/src/app/components/Base/Header/LanuageSelector.jsxportals/devportal/src/main/webapp/source/src/app/components/Shared/AppsAndKeys/ApiKeyManager.jsxportals/devportal/src/main/webapp/source/src/app/components/Shared/AppsAndKeys/TokenManager.jsxportals/devportal/src/main/webapp/source/src/app/components/Shared/AppsAndKeys/ViewCurl.jsxportals/devportal/src/main/webapp/source/src/app/components/Shared/AppsAndKeys/ViewToken.jsxportals/devportal/src/main/webapp/source/src/app/components/Shared/LeftMenuItem.jsx
✅ Files skipped from review due to trivial changes (5)
- portals/devportal/src/main/webapp/source/src/app/components/Shared/AppsAndKeys/TokenManager.jsx
- portals/devportal/src/main/webapp/source/src/app/components/Applications/Details/index.jsx
- portals/devportal/src/main/webapp/source/src/app/components/Shared/AppsAndKeys/ApiKeyManager.jsx
- portals/devportal/src/main/webapp/source/src/app/components/Apis/Listing/APICardView.jsx
- portals/devportal/src/main/webapp/source/src/app/components/Shared/AppsAndKeys/ViewCurl.jsx
🚧 Files skipped from review as they are similar to previous changes (20)
- portals/devportal/src/main/webapp/source/src/app/components/Apis/Details/Comments/Comment.jsx
- portals/devportal/src/main/webapp/source/src/app/components/Apis/Details/Documents/Documents.jsx
- portals/devportal/src/main/webapp/source/src/app/components/Apis/Details/Documents/View.jsx
- portals/devportal/src/main/webapp/source/src/app/components/Apis/Details/ApiConsole/ApiConsole.jsx
- portals/devportal/src/main/webapp/source/src/app/components/Shared/AppsAndKeys/ViewToken.jsx
- portals/devportal/src/main/webapp/site/public/css/main.css
- portals/devportal/src/main/webapp/source/src/app/components/Apis/Listing/ApiBreadcrumbs.jsx
- portals/devportal/src/main/webapp/source/src/app/components/Apis/Details/Documents/Details.jsx
- portals/devportal/src/main/webapp/source/src/app/components/Apis/Details/Documents/elements.css
- portals/devportal/src/main/webapp/source/src/app/components/Apis/Listing/CommonListing.jsx
- portals/devportal/src/main/webapp/source/src/app/components/Apis/Details/index.jsx
- portals/devportal/src/main/webapp/source/src/app/components/Apis/Chat/ChatIcon.jsx
- portals/devportal/src/main/webapp/source/src/app/components/Apis/Chat/ChatWindow.jsx
- portals/devportal/src/main/webapp/source/src/app/components/Shared/LeftMenuItem.jsx
- portals/devportal/src/main/webapp/source/src/app/components/Apis/Details/Documents/DocList.jsx
- portals/devportal/src/main/webapp/source/src/app/components/Apis/Details/Breadcrumb.jsx
- portals/devportal/src/main/webapp/source/src/app/components/Apis/Listing/ApiTableView.jsx
- portals/devportal/src/main/webapp/source/src/app/components/Apis/Listing/APICards/ApiThumbClassic.jsx
- portals/devportal/src/main/webapp/site/public/locales/ar.json
- portals/devportal/src/main/webapp/source/src/app/components/Apis/Listing/Recommendations.jsx
vinupa
force-pushed
the
rtl-arabic-support
branch
from
1d6be8b to
2ad2896
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
portals/devportal/src/main/webapp/source/src/DevPortal.jsx (1)
48-55: ⚡ Quick winAdd
prepend: trueto the Emotion cachesSince
DevPortalsupplies a custom Emotion cache viaCacheProvider, the style injection order is determined by the cache (not justStyledEngineProvider injectFirst). Addingprepend: trueto bothcacheRtlandcacheLtrkeeps MUI/Emotion styles inserted earlier in the cascade, so they’re easier to override by the tenant’stenantCustomCss.♻️ Proposed change
const cacheRtl = createCache({ key: 'muirtl', + prepend: true, stylisPlugins: [prefixer, rtlPlugin], }); const cacheLtr = createCache({ key: 'muiltr', + prepend: true, });🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@portals/devportal/src/main/webapp/source/src/DevPortal.jsx` around lines 48 - 55, Update the two Emotion cache creations (cacheRtl and cacheLtr) so the createCache calls include the option prepend: true; specifically, add prepend: true to the createCache invocation for cacheRtl and to the createCache invocation for cacheLtr to ensure the custom CacheProvider injects styles earlier in the cascade.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In
`@portals/devportal/src/main/webapp/source/src/app/components/Apis/Details/Documents/Details.jsx`:
- Line 111: The Box is passing a class-name string via sx (classes.viewWrapper /
'Details-viewWrapper') which is invalid; instead supply sx a style object or
move the paddingInlineStart into the same sx object (e.g., replace
sx={classes.viewWrapper} with sx={{...classes.viewWrapper, paddingInlineStart:
(theme) => theme.spacing(3)}} or convert classes.viewWrapper to an object), or
keep className for the CSS class and remove sx usage; update the Box in the
Details component so sx receives a style object/function and not a string, and
ensure paddingInlineStart remains inside sx if you use a theme function.
---
Nitpick comments:
In `@portals/devportal/src/main/webapp/source/src/DevPortal.jsx`:
- Around line 48-55: Update the two Emotion cache creations (cacheRtl and
cacheLtr) so the createCache calls include the option prepend: true;
specifically, add prepend: true to the createCache invocation for cacheRtl and
to the createCache invocation for cacheLtr to ensure the custom CacheProvider
injects styles earlier in the cascade.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 3705eaf3-b9da-472e-afb3-d17196ff5c2a
⛔ Files ignored due to path filters (1)
portals/devportal/src/main/webapp/package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (30)
portals/devportal/src/main/webapp/package.jsonportals/devportal/src/main/webapp/site/public/css/main.cssportals/devportal/src/main/webapp/site/public/locales/ar.jsonportals/devportal/src/main/webapp/source/src/DevPortal.jsxportals/devportal/src/main/webapp/source/src/app/components/Apis/Chat/ChatIcon.jsxportals/devportal/src/main/webapp/source/src/app/components/Apis/Chat/ChatWindow.jsxportals/devportal/src/main/webapp/source/src/app/components/Apis/Details/ApiConsole/ApiConsole.jsxportals/devportal/src/main/webapp/source/src/app/components/Apis/Details/AsyncApiConsole/AsyncApiConsole.jsxportals/devportal/src/main/webapp/source/src/app/components/Apis/Details/Breadcrumb.jsxportals/devportal/src/main/webapp/source/src/app/components/Apis/Details/Comments/Comment.jsxportals/devportal/src/main/webapp/source/src/app/components/Apis/Details/Documents/Details.jsxportals/devportal/src/main/webapp/source/src/app/components/Apis/Details/Documents/DocList.jsxportals/devportal/src/main/webapp/source/src/app/components/Apis/Details/Documents/Documents.jsxportals/devportal/src/main/webapp/source/src/app/components/Apis/Details/Documents/View.jsxportals/devportal/src/main/webapp/source/src/app/components/Apis/Details/Documents/elements.cssportals/devportal/src/main/webapp/source/src/app/components/Apis/Details/GraphQLConsole/GraphQLConsole.jsxportals/devportal/src/main/webapp/source/src/app/components/Apis/Details/index.jsxportals/devportal/src/main/webapp/source/src/app/components/Apis/Listing/APICardView.jsxportals/devportal/src/main/webapp/source/src/app/components/Apis/Listing/APICards/ApiThumbClassic.jsxportals/devportal/src/main/webapp/source/src/app/components/Apis/Listing/ApiBreadcrumbs.jsxportals/devportal/src/main/webapp/source/src/app/components/Apis/Listing/ApiTableView.jsxportals/devportal/src/main/webapp/source/src/app/components/Apis/Listing/CommonListing.jsxportals/devportal/src/main/webapp/source/src/app/components/Apis/Listing/Recommendations.jsxportals/devportal/src/main/webapp/source/src/app/components/Applications/Details/index.jsxportals/devportal/src/main/webapp/source/src/app/components/Base/Header/LanuageSelector.jsxportals/devportal/src/main/webapp/source/src/app/components/Shared/AppsAndKeys/ApiKeyManager.jsxportals/devportal/src/main/webapp/source/src/app/components/Shared/AppsAndKeys/TokenManager.jsxportals/devportal/src/main/webapp/source/src/app/components/Shared/AppsAndKeys/ViewCurl.jsxportals/devportal/src/main/webapp/source/src/app/components/Shared/AppsAndKeys/ViewToken.jsxportals/devportal/src/main/webapp/source/src/app/components/Shared/LeftMenuItem.jsx
✅ Files skipped from review due to trivial changes (6)
- portals/devportal/src/main/webapp/source/src/app/components/Apis/Details/Documents/Documents.jsx
- portals/devportal/src/main/webapp/source/src/app/components/Shared/AppsAndKeys/ViewToken.jsx
- portals/devportal/src/main/webapp/source/src/app/components/Apis/Details/ApiConsole/ApiConsole.jsx
- portals/devportal/src/main/webapp/source/src/app/components/Apis/Listing/APICardView.jsx
- portals/devportal/src/main/webapp/source/src/app/components/Shared/AppsAndKeys/ViewCurl.jsx
- portals/devportal/src/main/webapp/source/src/app/components/Shared/AppsAndKeys/TokenManager.jsx
🚧 Files skipped from review as they are similar to previous changes (22)
- portals/devportal/src/main/webapp/source/src/app/components/Shared/AppsAndKeys/ApiKeyManager.jsx
- portals/devportal/src/main/webapp/site/public/css/main.css
- portals/devportal/src/main/webapp/source/src/app/components/Apis/Details/AsyncApiConsole/AsyncApiConsole.jsx
- portals/devportal/src/main/webapp/source/src/app/components/Apis/Details/Breadcrumb.jsx
- portals/devportal/src/main/webapp/source/src/app/components/Base/Header/LanuageSelector.jsx
- portals/devportal/src/main/webapp/source/src/app/components/Applications/Details/index.jsx
- portals/devportal/src/main/webapp/source/src/app/components/Apis/Chat/ChatWindow.jsx
- portals/devportal/src/main/webapp/source/src/app/components/Apis/Details/Documents/View.jsx
- portals/devportal/src/main/webapp/source/src/app/components/Shared/LeftMenuItem.jsx
- portals/devportal/src/main/webapp/source/src/app/components/Apis/Chat/ChatIcon.jsx
- portals/devportal/src/main/webapp/source/src/app/components/Apis/Details/Comments/Comment.jsx
- portals/devportal/src/main/webapp/source/src/app/components/Apis/Details/Documents/elements.css
- portals/devportal/src/main/webapp/source/src/app/components/Apis/Details/GraphQLConsole/GraphQLConsole.jsx
- portals/devportal/src/main/webapp/site/public/locales/ar.json
- portals/devportal/src/main/webapp/source/src/app/components/Apis/Listing/ApiBreadcrumbs.jsx
- portals/devportal/src/main/webapp/source/src/app/components/Apis/Details/Documents/DocList.jsx
- portals/devportal/src/main/webapp/source/src/app/components/Apis/Listing/APICards/ApiThumbClassic.jsx
- portals/devportal/src/main/webapp/package.json
- portals/devportal/src/main/webapp/source/src/app/components/Apis/Listing/Recommendations.jsx
- portals/devportal/src/main/webapp/source/src/app/components/Apis/Listing/CommonListing.jsx
- portals/devportal/src/main/webapp/source/src/app/components/Apis/Details/index.jsx
- portals/devportal/src/main/webapp/source/src/app/components/Apis/Listing/ApiTableView.jsx
vinupa
force-pushed
the
rtl-arabic-support
branch
from
2ad2896 to
35dd0f3
Compare
vinupa
force-pushed
the
rtl-arabic-support
branch
from
35dd0f3 to
641dadd
Compare
vinupa
force-pushed
the
rtl-arabic-support
branch
from
641dadd to
d4c0ec8
Compare
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Purpose
This PR fixes RTL (Right-to-Left) language support in the DevPortal, enabling Arabic and other RTL languages to display correctly across all major sections of the portal.
Approach
Added
stylisandstylis-plugin-rtldependencies and wrapped the application in an Emotion CacheProvider at the root that switches between RTL and LTR style cache based ontheme.direction. This enables automatic CSS property mirroring for MUI components throughout the app without component-level changes.Migrated physical CSS properties to CSS logical properties across the API listing, API details, documents, key management, and chat sections so that spacing and positioning respond correctly to the active text direction. For example:
userTheme.jspwhich caused Unicode characters (such as Arabic strings) defined inuserTheme.jsonto be garbled before they reached the frontend.Applied
dir='ltr'to content that must always render left-to-right regardless of the page direction.Fixed directional icons that would be semantically incorrect in RTL. Breadcrumb separators now use reversed arrow icons in RTL, the AI chat window resize handle and slide-in direction are flipped, and the floating chat button tooltip placement is mirrored.
Fixed the API homepage left menu's collapsed/expanded arrow icons and the rotated sidebar text to render correctly in both directions.
Added
MUIDataTableToolbarRTL cache support (CacheProvider) to the API listing and recommendations table views to prevent toolbar icon misalignment in RTL mode.Added Arabic (ar) locale translations to
ar.json.