[WIP] Function libraries UI support#10548
Conversation
📝 WalkthroughWalkthroughChangesFunction Libraries support is added to the console, including API operations, create/edit/delete interfaces, applications settings navigation, feature scopes, endpoint wiring, and English translations. Function Libraries Administration
Important Pre-merge checks failedPlease resolve all errors before merging. Addressing warnings is optional. ❌ Failed checks (1 error, 1 warning)
✅ Passed checks (4 passed)
✨ 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 |
There was a problem hiding this comment.
Actionable comments posted: 12
🧹 Nitpick comments (2)
features/admin.function-libraries.v1/package.json (2)
32-32: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueRemove unused devDependency.
According to static analysis,
@types/lodash-esis unused in this package.♻️ Proposed fix
- "`@testing-library/jest-dom`": "^5.11.9", - "`@types/lodash-es`": "^4.17.4", - "`@types/node`": "^13.9.2", + "`@testing-library/jest-dom`": "^5.11.9", + "`@types/node`": "^13.9.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 `@features/admin.function-libraries.v1/package.json` at line 32, Remove the unused `@types/lodash-es` entry from the devDependencies in package.json, leaving all other dependency declarations unchanged.Source: Linters/SAST tools
15-15: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueRemove unused dependency.
According to static analysis,
@wso2is/i18nis unused in this package.♻️ Proposed fix
- "`@wso2is/i18n`": "^2.44.0",🤖 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 `@features/admin.function-libraries.v1/package.json` at line 15, Remove the unused `@wso2is/i18n` entry from the dependencies in package.json, leaving all other package dependencies unchanged.Source: Linters/SAST tools
🤖 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 `@features/admin.applications.v1/pages/applications-settings-hub.scss`:
- Around line 19-55: Remove the custom SCSS rules for the applications settings
hub and migrate them into the ApplicationsSettingsHub component using Oxygen UI
with MUI’s sx prop or styled API. Preserve the existing layout, spacing, card,
header, and icon-container behavior while replacing hardcoded colors and
dimensions with the appropriate theme tokens and spacing values.
In `@features/admin.function-libraries.v1/api/function-library.ts`:
- Around line 158-161: Remove the Access-Control-Allow-Origin entry from the
outgoing request headers in function-library.ts, including the corresponding
header blocks used by the create, update, and delete operations. Keep the Accept
header and other request behavior unchanged.
- Around line 66-74: Update the return object in the useRequest consumer to
destructure SWR’s native isLoading value and return it directly, replacing the
derived !error && !data expression. Preserve the existing data, error,
isValidating, and mutate fields.
- Line 86: Replace the Record<string, any> types on the direct httpClient
request configurations at the identified locations with AxiosRequestConfig,
matching the typed axios configuration pattern already used elsewhere in the
codebase. Preserve each request’s existing fields and behavior while removing
the any-based typing.
In
`@features/admin.function-libraries.v1/components/add-function-library-wizard.tsx`:
- Around line 145-163: Replace the hardcoded accessibility labels with
namespace-based i18next translations: in
features/admin.function-libraries.v1/components/add-function-library-wizard.tsx
lines 145-163, update the name and description ariaLabel values using
functionLibraries translation keys; in
features/admin.function-libraries.v1/components/edit-function-library.tsx lines
163-208, translate the name, description, and update-button labels. Use the
existing translation hook and established functionLibraries keys.
- Line 25: Replace the direct react-i18next useTranslation imports with the
repository facade from `@wso2is/i18n` in add-function-library-wizard.tsx,
edit-function-library.tsx, function-libraries-list.tsx,
function-library-content-editor.tsx, function-library-edit.tsx, and
function-libraries.tsx; leave each component’s existing translation usage
unchanged.
- Around line 22-28: The function-library screens still use legacy Semantic UI
and react-components primitives; migrate them to Oxygen UI with MUI styled
composition. In
features/admin.function-libraries.v1/components/add-function-library-wizard.tsx
(lines 22-28),
features/admin.function-libraries.v1/components/edit-function-library.tsx (lines
27-33), and
features/admin.function-libraries.v1/components/function-libraries-list.tsx
(lines 28-43), replace the listed Modal, Grid, ConfirmationModal, DangerZone,
DataTable, EmptyPlaceholder, Header, Icon, and related controls while preserving
each screen’s existing behavior and layout.
- Line 70: Update the formRef declaration in the add-function-library wizard to
use a local ref contract exposing triggerSubmit: () => void instead of any,
while preserving its nullable initial state and keeping
formRef.current.triggerSubmit() type-safe.
In
`@features/admin.function-libraries.v1/components/function-library-content-editor.tsx`:
- Around line 119-123: Annotate all specified inline callbacks with explicit
return types: add : void to onChange and onClick handlers, useEffect callbacks,
onFunctionLibraryDelete, onAddNewFunctionLibrary, and the .then, .catch, and
.finally callbacks in function-library-content-editor.tsx,
function-libraries.tsx, and function-library-edit.tsx; in
applications-settings-hub.tsx, add : boolean to the .filter callback, :
ReactElement to the .map callback, and : void to the onClick callback. Apply the
changes at every listed site without altering callback behavior.
- Line 66: Update the selected-file variable declaration in the file input
change handler to use the nullable type File | undefined, preserving the
existing optional-chaining access to event.target.files.
In
`@features/admin.function-libraries.v1/constants/function-library-constants.ts`:
- Around line 22-29: Move NAME_MAX_LENGTH, NAME_MIN_LENGTH,
DESCRIPTION_MAX_LENGTH, and NAME_REGEX from FunctionLibraryConstants into
constants/validation.ts, export them there, and expose them through the
constants barrel. Update consumers to reference the relocated validation
constants while leaving FunctionLibraryConstants for non-validation values.
In `@features/admin.function-libraries.v1/tsconfig.json`:
- Around line 14-19: Remove the trailing commas after the target setting and
compileOnSave setting in features/admin.function-libraries.v1/tsconfig.json at
lines 14-19 and 40-42, respectively, so the configuration remains valid strict
JSON.
---
Nitpick comments:
In `@features/admin.function-libraries.v1/package.json`:
- Line 32: Remove the unused `@types/lodash-es` entry from the devDependencies in
package.json, leaving all other dependency declarations unchanged.
- Line 15: Remove the unused `@wso2is/i18n` entry from the dependencies in
package.json, leaving all other package dependencies unchanged.
🪄 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.yml
Review profile: CHILL
Plan: Pro
Run ID: e75b9187-911a-4a7d-abf6-0682b945167c
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (38)
AGENTS.mdCLAUDE.mdapps/console/package.jsonapps/console/src/configs/routes.tsxapps/console/src/public/deployment.config.jsonfeatures/admin.applications.v1/pages/applications-settings-hub.scssfeatures/admin.applications.v1/pages/applications-settings-hub.tsxfeatures/admin.applications.v1/pages/applications-settings.tsxfeatures/admin.core.v1/configs/app.tsfeatures/admin.core.v1/constants/app-constants.tsfeatures/admin.core.v1/constants/i18n-constants.tsfeatures/admin.core.v1/models/config.tsfeatures/admin.core.v1/package.jsonfeatures/admin.function-libraries.v1/api/function-library.tsfeatures/admin.function-libraries.v1/components/add-function-library-wizard.tsxfeatures/admin.function-libraries.v1/components/edit-function-library.tsxfeatures/admin.function-libraries.v1/components/function-libraries-list.tsxfeatures/admin.function-libraries.v1/components/function-library-content-editor.tsxfeatures/admin.function-libraries.v1/configs/endpoints.tsfeatures/admin.function-libraries.v1/constants/component-ids.tsfeatures/admin.function-libraries.v1/constants/function-library-constants.tsfeatures/admin.function-libraries.v1/constants/index.tsfeatures/admin.function-libraries.v1/models/endpoints.tsfeatures/admin.function-libraries.v1/models/function-library.tsfeatures/admin.function-libraries.v1/package.jsonfeatures/admin.function-libraries.v1/pages/function-libraries.tsxfeatures/admin.function-libraries.v1/pages/function-library-edit.tsxfeatures/admin.function-libraries.v1/public-api.tsfeatures/admin.function-libraries.v1/rollup.config.cjsfeatures/admin.function-libraries.v1/tsconfig.jsonmodules/i18n/src/constants.tsmodules/i18n/src/models/namespaces/console-ns.tsmodules/i18n/src/models/namespaces/function-libraries-ns.tsmodules/i18n/src/models/namespaces/index.tsmodules/i18n/src/translations/en-US/meta.tsmodules/i18n/src/translations/en-US/portals/console.tsmodules/i18n/src/translations/en-US/portals/function-libraries.tsmodules/i18n/src/translations/en-US/portals/index.ts
| .applications-settings-hub { | ||
| .applications-settings-hub-grid-wrapper { | ||
| display: flex; | ||
| flex-direction: row; | ||
| margin-bottom: 40px; | ||
|
|
||
| .applications-settings-hub-grid { | ||
| flex-grow: 1; | ||
| gap: 25px; | ||
| display: grid; | ||
| grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); | ||
|
|
||
| .applications-settings-hub-card { | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| border: 1px solid #e8e8e8; | ||
| border-radius: 10px; | ||
| transition: box-shadow 0.3s ease; | ||
| cursor: pointer; | ||
|
|
||
| .applications-settings-hub-card-header { | ||
| display: flex; | ||
| flex-direction: row; | ||
| gap: 15px; | ||
| align-content: center; | ||
| align-items: center; | ||
| padding: 10px 14px; | ||
|
|
||
| .applications-settings-hub-card-icon-container { | ||
| border-radius: var(--oxygen-shape-borderRadius); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟠 Major | 🏗️ Heavy lift
Avoid using custom SCSS with hardcoded pixels and colors for new components.
This stylesheet contains hardcoded colors (e.g., #e8e8e8) and pixel values (e.g., 40px, 25px, 10px). As per coding guidelines, all new React components must use Oxygen UI with MUI's styled API or the sx prop, and always reference theme values instead of hardcoding raw CSS values.
Please migrate these styles directly into the ApplicationsSettingsHub component using sx or styled. Let me know if you would like assistance generating the migrated React styled component code.
🤖 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 `@features/admin.applications.v1/pages/applications-settings-hub.scss` around
lines 19 - 55, Remove the custom SCSS rules for the applications settings hub
and migrate them into the ApplicationsSettingsHub component using Oxygen UI with
MUI’s sx prop or styled API. Preserve the existing layout, spacing, card,
header, and icon-container behavior while replacing hardcoded colors and
dimensions with the appropriate theme tokens and spacing values.
Source: Coding guidelines
| const { data, error, isValidating, mutate } = useRequest<Data, Error>(requestConfig); | ||
|
|
||
| return { | ||
| data, | ||
| error, | ||
| isLoading: !error && !data, | ||
| isValidating, | ||
| mutate | ||
| }; |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Return SWR’s native isLoading value.
The derived expression can report loading after the request has completed when data remains undefined.
Based on learnings, useRequest(...) consumers should destructure and return SWR-native isLoading.
Proposed fix
- const { data, error, isValidating, mutate } = useRequest<Data, Error>(requestConfig);
+ const { data, error, isLoading, isValidating, mutate } = useRequest<Data, Error>(requestConfig);
return {
data,
error,
- isLoading: !error && !data,
+ isLoading,
isValidating,
mutate
};📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const { data, error, isValidating, mutate } = useRequest<Data, Error>(requestConfig); | |
| return { | |
| data, | |
| error, | |
| isLoading: !error && !data, | |
| isValidating, | |
| mutate | |
| }; | |
| const { data, error, isLoading, isValidating, mutate } = useRequest<Data, Error>(requestConfig); | |
| return { | |
| data, | |
| error, | |
| isLoading, | |
| isValidating, | |
| mutate | |
| }; |
🤖 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 `@features/admin.function-libraries.v1/api/function-library.ts` around lines 66
- 74, Update the return object in the useRequest consumer to destructure SWR’s
native isLoading value and return it directly, replacing the derived !error &&
!data expression. Preserve the existing data, error, isValidating, and mutate
fields.
Source: Learnings
| export const getFunctionLibrary = async ( | ||
| name: string | ||
| ): Promise<AxiosResponse<FunctionLibraryResponseInterface>> => { | ||
| const requestConfig: Record<string, any> = { |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Find the repository-standard type used with AsgardeoSPAClient.httpRequest.
rg -n --type=ts -C3 \
'AxiosRequestConfig|httpRequest\.bind|const requestConfig:' \
features apps modulesRepository: wso2/identity-apps
Length of output: 50375
🏁 Script executed:
#!/bin/bash
set -euo pipefail
FILE="features/admin.function-libraries.v1/api/function-library.ts"
echo "== file outline =="
ast-grep outline "$FILE" --view expanded || true
echo "== imports / request config usage =="
rg -n -C 3 'Record<string, any>|AxiosRequestConfig|RequestConfigInterface|HttpRequestConfig|requestConfig|httpRequest\.bind|AsgardeoSPAClient' "$FILE"
echo "== neighboring API patterns =="
rg -n -C 2 'const requestConfig: (AxiosRequestConfig|RequestConfigInterface|HttpRequestConfig)|const requestConfig =' \
features/admin.function-libraries.v1 features/admin.extensions.v1 features/admin.users.v1 features/common.consents.v1 \
| sed -n '1,220p'Repository: wso2/identity-apps
Length of output: 21755
🏁 Script executed:
#!/bin/bash
set -euo pipefail
FILE="features/admin.function-libraries.v1/api/function-library.ts"
echo "== top of file =="
sed -n '1,80p' "$FILE"
echo "== request config blocks =="
sed -n '83,245p' "$FILE"
echo "== request config type definitions in nearby APIs =="
rg -n -C 2 'export .*RequestConfigInterface|type .*RequestConfigInterface|AxiosRequestConfig|HttpRequestConfig' \
features/admin.function-libraries.v1/api \
features/admin.extensions.v1/components/password-expiry/api/password-expiry.ts \
features/admin.extensions.v1/configs/components/marketing-consent/api/marketing-consent.ts \
features/admin.users.v1/api/invite.ts \
features/common.consents.v1/api/consents.tsRepository: wso2/identity-apps
Length of output: 14043
Use AxiosRequestConfig for these request objects. Record<string, any> bypasses request-shape checks and violates the no-any guideline; update the direct httpClient configs at lines 86, 115, 156, 199, and 229 to the typed axios config used elsewhere in the codebase.
🤖 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 `@features/admin.function-libraries.v1/api/function-library.ts` at line 86,
Replace the Record<string, any> types on the direct httpClient request
configurations at the identified locations with AxiosRequestConfig, matching the
typed axios configuration pattern already used elsewhere in the codebase.
Preserve each request’s existing fields and behavior while removing the
any-based typing.
Source: Coding guidelines
| headers: { | ||
| Accept: "application/json", | ||
| "Access-Control-Allow-Origin": store.getState().config.deployment.clientHost | ||
| }, |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
Remove Access-Control-Allow-Origin from outgoing requests.
This is a server response header. Sending it as a custom request header can trigger a preflight that the API does not allow, causing create, update, and delete operations to fail before reaching the endpoint.
Proposed fix
headers: {
- Accept: "application/json",
- "Access-Control-Allow-Origin": store.getState().config.deployment.clientHost
+ Accept: "application/json"
},Also applies to: 201-204, 230-233
🤖 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 `@features/admin.function-libraries.v1/api/function-library.ts` around lines
158 - 161, Remove the Access-Control-Allow-Origin entry from the outgoing
request headers in function-library.ts, including the corresponding header
blocks used by the create, update, and delete operations. Keep the Accept header
and other request behavior unchanged.
| import { ContentLoader, Heading, LinkButton, PrimaryButton, useWizardAlert } from "@wso2is/react-components"; | ||
| import { AxiosError } from "axios"; | ||
| import React, { FunctionComponent, ReactElement, useRef, useState } from "react"; | ||
| import { useTranslation } from "react-i18next"; | ||
| import { useDispatch } from "react-redux"; | ||
| import { Dispatch } from "redux"; | ||
| import { Grid, Modal } from "semantic-ui-react"; |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟠 Major | 🏗️ Heavy lift
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
printf '\n== File list ==\n'
git ls-files 'features/admin.function-libraries.v1/components/*' | sort
printf '\n== Outlines ==\n'
for f in \
features/admin.function-libraries.v1/components/add-function-library-wizard.tsx \
features/admin.function-libraries.v1/components/edit-function-library.tsx \
features/admin.function-libraries.v1/components/function-libraries-list.tsx
do
echo "--- $f"
ast-grep outline "$f" --view expanded || true
done
printf '\n== Relevant slices ==\n'
for f in \
features/admin.function-libraries.v1/components/add-function-library-wizard.tsx \
features/admin.function-libraries.v1/components/edit-function-library.tsx \
features/admin.function-libraries.v1/components/function-libraries-list.tsx
do
echo "--- $f"
wc -l "$f"
done
echo "--- add-function-library-wizard.tsx ---"
sed -n '1,260p' features/admin.function-libraries.v1/components/add-function-library-wizard.tsx
echo "--- edit-function-library.tsx ---"
sed -n '1,260p' features/admin.function-libraries.v1/components/edit-function-library.tsx
echo "--- function-libraries-list.tsx ---"
sed -n '1,320p' features/admin.function-libraries.v1/components/function-libraries-list.tsxRepository: wso2/identity-apps
Length of output: 36350
🏁 Script executed:
#!/bin/bash
set -euo pipefail
for f in \
features/admin.function-libraries.v1/components/add-function-library-wizard.tsx \
features/admin.function-libraries.v1/components/edit-function-library.tsx \
features/admin.function-libraries.v1/components/function-libraries-list.tsx
do
echo "===== $f ====="
wc -l "$f"
sed -n '1,240p' "$f"
echo
done
echo "===== Oxygen usage in the feature ====="
rg -n '`@oxygen-ui/react`|styled\(' features/admin.function-libraries.v1 || true
echo "===== Legacy Semantic UI usage in the feature ====="
rg -n 'semantic-ui-react|`@wso2is/react-components`' features/admin.function-libraries.v1 || trueRepository: wso2/identity-apps
Length of output: 33043
Replace the remaining legacy UI primitives in the function-library screens
add-function-library-wizard.tsx, edit-function-library.tsx, and function-libraries-list.tsx still depend on semantic-ui-react and @wso2is/react-components controls (Modal, Grid, ConfirmationModal, DangerZone, DataTable, EmptyPlaceholder, Header, Icon, etc.). Rework these screens onto Oxygen UI with MUI styled composition so they follow the new-component guideline.
📍 Affects 3 files
features/admin.function-libraries.v1/components/add-function-library-wizard.tsx#L22-L28(this comment)features/admin.function-libraries.v1/components/edit-function-library.tsx#L27-L33features/admin.function-libraries.v1/components/function-libraries-list.tsx#L28-L43
🤖 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
`@features/admin.function-libraries.v1/components/add-function-library-wizard.tsx`
around lines 22 - 28, The function-library screens still use legacy Semantic UI
and react-components primitives; migrate them to Oxygen UI with MUI styled
composition. In
features/admin.function-libraries.v1/components/add-function-library-wizard.tsx
(lines 22-28),
features/admin.function-libraries.v1/components/edit-function-library.tsx (lines
27-33), and
features/admin.function-libraries.v1/components/function-libraries-list.tsx
(lines 28-43), replace the listed Modal, Grid, ConfirmationModal, DangerZone,
DataTable, EmptyPlaceholder, Header, Icon, and related controls while preserving
each screen’s existing behavior and layout.
Source: Coding guidelines
| ariaLabel="Function library name" | ||
| inputType="name" | ||
| name="name" | ||
| label={ t("functionLibraries:forms.name.label") } | ||
| placeholder={ t("functionLibraries:forms.name.placeholder") } | ||
| hint={ t("functionLibraries:forms.name.hint") } | ||
| required={ true } | ||
| minLength={ FunctionLibraryConstants.NAME_MIN_LENGTH } | ||
| maxLength={ FunctionLibraryConstants.NAME_MAX_LENGTH } | ||
| validate={ (value: string): string | undefined => { | ||
| if (value && !FunctionLibraryConstants.NAME_REGEX.test(value)) { | ||
| return t("functionLibraries:forms.name.validations.invalid"); | ||
| } | ||
| } } | ||
| width={ 16 } | ||
| data-componentid={ `${ componentId }-name-input` } | ||
| /> | ||
| <Field.Textarea | ||
| ariaLabel="Function library description" |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Translate the accessibility labels.
The hardcoded English ariaLabel values remain untranslated for localized console users.
features/admin.function-libraries.v1/components/add-function-library-wizard.tsx#L145-L163: replace the name and description labels withfunctionLibraries:translation keys.features/admin.function-libraries.v1/components/edit-function-library.tsx#L163-L208: translate the name, description, and update-button labels.
As per coding guidelines, user-facing strings must use namespace-based i18next keys.
📍 Affects 2 files
features/admin.function-libraries.v1/components/add-function-library-wizard.tsx#L145-L163(this comment)features/admin.function-libraries.v1/components/edit-function-library.tsx#L163-L208
🤖 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
`@features/admin.function-libraries.v1/components/add-function-library-wizard.tsx`
around lines 145 - 163, Replace the hardcoded accessibility labels with
namespace-based i18next translations: in
features/admin.function-libraries.v1/components/add-function-library-wizard.tsx
lines 145-163, update the name and description ariaLabel values using
functionLibraries translation keys; in
features/admin.function-libraries.v1/components/edit-function-library.tsx lines
163-208, translate the name, description, and update-button labels. Use the
existing translation hook and established functionLibraries keys.
Source: Coding guidelines
| const handleFileSelected: (event: React.ChangeEvent<HTMLInputElement>) => void = ( | ||
| event: React.ChangeEvent<HTMLInputElement> | ||
| ): void => { | ||
| const file: File = event.target.files?.[0]; |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Correct the typing for the selected file.
When using optional chaining on event.target.files, the result can be undefined. To prevent TypeScript strict null check errors, type the variable as File | undefined.
🐛 Proposed fix
- const file: File = event.target.files?.[0];
+ const file: File | undefined = event.target.files?.[0];📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const file: File = event.target.files?.[0]; | |
| const file: File | undefined = event.target.files?.[0]; |
🤖 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
`@features/admin.function-libraries.v1/components/function-library-content-editor.tsx`
at line 66, Update the selected-file variable declaration in the file input
change handler to use the nullable type File | undefined, preserving the
existing optional-chaining access to event.target.files.
| onChange={ ( | ||
| editor: unknown, | ||
| data: unknown, | ||
| newValue: string | ||
| ) => onChange(newValue) } |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick win
Add explicit return types to inline arrow functions and callbacks.
As per coding guidelines, callbacks must annotate the arrow function return type. Please add explicit return types (e.g., : void, : boolean, : ReactElement) to the following arrow functions:
features/admin.function-libraries.v1/components/function-library-content-editor.tsx#L119-L123: Add: voidreturn type to theonChangecallback.features/admin.function-libraries.v1/components/function-library-content-editor.tsx#L102-L102: Add: voidreturn type to theonClickcallback.features/admin.function-libraries.v1/pages/function-libraries.tsx#L69-L83: Add: voidreturn type to theuseEffectcallback.features/admin.function-libraries.v1/pages/function-libraries.tsx#L109-L109: Add: voidreturn type to theonClickcallback.features/admin.function-libraries.v1/pages/function-libraries.tsx#L122-L123: Add: voidreturn type to theonFunctionLibraryDeleteandonAddNewFunctionLibrarycallbacks.features/admin.function-libraries.v1/pages/function-library-edit.tsx#L69-L94: Add: voidreturn type to theuseEffectcallback.features/admin.function-libraries.v1/pages/function-library-edit.tsx#L75-L92: Add: voidreturn type to the.then,.catch, and.finallycallbacks.features/admin.applications.v1/pages/applications-settings-hub.tsx#L112-L117: Add: booleanto the.filtercallback,: ReactElementto the.mapcallback, and: voidto theonClickcallback.
📍 Affects 4 files
features/admin.function-libraries.v1/components/function-library-content-editor.tsx#L119-L123(this comment)features/admin.function-libraries.v1/components/function-library-content-editor.tsx#L102-L102features/admin.function-libraries.v1/pages/function-libraries.tsx#L69-L83features/admin.function-libraries.v1/pages/function-libraries.tsx#L109-L109features/admin.function-libraries.v1/pages/function-libraries.tsx#L122-L123features/admin.function-libraries.v1/pages/function-library-edit.tsx#L69-L94features/admin.function-libraries.v1/pages/function-library-edit.tsx#L75-L92features/admin.applications.v1/pages/applications-settings-hub.tsx#L112-L117
🤖 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
`@features/admin.function-libraries.v1/components/function-library-content-editor.tsx`
around lines 119 - 123, Annotate all specified inline callbacks with explicit
return types: add : void to onChange and onClick handlers, useEffect callbacks,
onFunctionLibraryDelete, onAddNewFunctionLibrary, and the .then, .catch, and
.finally callbacks in function-library-content-editor.tsx,
function-libraries.tsx, and function-library-edit.tsx; in
applications-settings-hub.tsx, add : boolean to the .filter callback, :
ReactElement to the .map callback, and : void to the onClick callback. Apply the
changes at every listed site without altering callback behavior.
Source: Coding guidelines
| export class FunctionLibraryConstants { | ||
|
|
||
| private constructor() { } | ||
|
|
||
| public static readonly NAME_MAX_LENGTH: number = 100; | ||
| public static readonly NAME_MIN_LENGTH: number = 1; | ||
| public static readonly DESCRIPTION_MAX_LENGTH: number = 300; | ||
| public static readonly NAME_REGEX: RegExp = /^[\w-]+(\.[\w-]+)*$/; |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick win
Move these constraints to constants/validation.ts.
These name and description limits are validation constraints and should be exported from the constants barrel after relocation.
As per coding guidelines, validation constraints must be kept in validation.ts.
🤖 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 `@features/admin.function-libraries.v1/constants/function-library-constants.ts`
around lines 22 - 29, Move NAME_MAX_LENGTH, NAME_MIN_LENGTH,
DESCRIPTION_MAX_LENGTH, and NAME_REGEX from FunctionLibraryConstants into
constants/validation.ts, export them there, and expose them through the
constants barrel. Update consumers to reference the relocated validation
constants while leaving FunctionLibraryConstants for non-validation values.
Source: Coding guidelines
| "module": "esnext", | ||
| "moduleResolution": "node", | ||
| "skipLibCheck": true, | ||
| "sourceMap": true, | ||
| "target": "es2015", | ||
| }, |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Remove trailing commas for valid JSON. Trailing commas are not allowed in strict JSON configuration files and should be removed.
features/admin.function-libraries.v1/tsconfig.json#L14-L19: remove the trailing comma after"target": "es2015".features/admin.function-libraries.v1/tsconfig.json#L40-L42: remove the trailing comma after"compileOnSave": false.
📍 Affects 1 file
features/admin.function-libraries.v1/tsconfig.json#L14-L19(this comment)features/admin.function-libraries.v1/tsconfig.json#L40-L42
🤖 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 `@features/admin.function-libraries.v1/tsconfig.json` around lines 14 - 19,
Remove the trailing commas after the target setting and compileOnSave setting in
features/admin.function-libraries.v1/tsconfig.json at lines 14-19 and 40-42,
respectively, so the configuration remains valid strict JSON.
Purpose
$subject
Related Issues
Related PRs
Checklist
Security checks