Skip to content

[WIP] Function libraries UI support#10548

Draft
pavinduLakshan wants to merge 2 commits into
wso2:masterfrom
pavinduLakshan:function_libraries_ui_support
Draft

[WIP] Function libraries UI support#10548
pavinduLakshan wants to merge 2 commits into
wso2:masterfrom
pavinduLakshan:function_libraries_ui_support

Conversation

@pavinduLakshan

Copy link
Copy Markdown
Member

Purpose

$subject

Related Issues

  • N/A

Related PRs

  • N/A

Checklist

  • e2e cypress tests locally verified. (for internal contributers)
  • Manual test round performed and verified.
  • UX/UI review done on the final implementation.
  • Documentation provided. (Add links if there are any)
  • Relevant backend changes deployed and verified
  • Unit tests provided. (Add links if there are any)
  • Integration tests provided. (Add links if there are any)

Security checks

@coderabbitai

coderabbitai Bot commented Jul 18, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

📝 Walkthrough

Walkthrough

Changes

Function 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

Layer / File(s) Summary
Contracts and package integration
features/admin.function-libraries.v1/..., features/admin.core.v1/models/config.ts, features/admin.core.v1/configs/app.ts
Defines library data and endpoint contracts, package build configuration, public exports, validation constants, and service endpoint registration.
API and editor workflows
features/admin.function-libraries.v1/api/..., features/admin.function-libraries.v1/components/...
Adds paginated CRUD/content APIs, JavaScript editing and upload, create/update forms, scoped list actions, and deletion confirmation flows.
Pages and console navigation
features/admin.function-libraries.v1/pages/..., features/admin.applications.v1/pages/..., apps/console/src/configs/routes.tsx, apps/console/src/public/deployment.config.json
Adds list and edit pages, an applications settings hub, protected child routes, feature scopes, and hub styling.
Translation namespace and content
modules/i18n/..., features/admin.core.v1/constants/i18n-constants.ts, AGENTS.md, CLAUDE.md
Registers the new namespace, adds typed English translations for the hub and feature pages, and documents namespace initialization requirements.

Important

Pre-merge checks failed

Please resolve all errors before merging. Addressing warnings is optional.

❌ Failed checks (1 error, 1 warning)

Check name Status Explanation Resolution
Changeset Required ❌ Error No .changeset/*.md file is in the PR diff, while many code/package files changed. Add a new .changeset/*.md entry covering the changed packages and their version bump types.
Description check ⚠️ Warning The template structure is present, but the Purpose section is left as a placeholder and the checklist is mostly unfilled, so the description is incomplete. Replace the placeholder Purpose text with a clear summary, and complete the relevant checklist items plus any issue, PR, test, and documentation links.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title is concise and matches the main change: adding UI support for function libraries, even though the WIP tag makes it slightly broader.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • 🛠️ create changeset

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

Comment @coderabbitai help to get the list of available commands.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 12

🧹 Nitpick comments (2)
features/admin.function-libraries.v1/package.json (2)

32-32: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Remove unused devDependency.

According to static analysis, @types/lodash-es is 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 value

Remove unused dependency.

According to static analysis, @wso2is/i18n is 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

📥 Commits

Reviewing files that changed from the base of the PR and between e2a0039 and d632789.

⛔ Files ignored due to path filters (1)
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (38)
  • AGENTS.md
  • CLAUDE.md
  • apps/console/package.json
  • apps/console/src/configs/routes.tsx
  • apps/console/src/public/deployment.config.json
  • features/admin.applications.v1/pages/applications-settings-hub.scss
  • features/admin.applications.v1/pages/applications-settings-hub.tsx
  • features/admin.applications.v1/pages/applications-settings.tsx
  • features/admin.core.v1/configs/app.ts
  • features/admin.core.v1/constants/app-constants.ts
  • features/admin.core.v1/constants/i18n-constants.ts
  • features/admin.core.v1/models/config.ts
  • features/admin.core.v1/package.json
  • features/admin.function-libraries.v1/api/function-library.ts
  • 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
  • features/admin.function-libraries.v1/components/function-library-content-editor.tsx
  • features/admin.function-libraries.v1/configs/endpoints.ts
  • features/admin.function-libraries.v1/constants/component-ids.ts
  • features/admin.function-libraries.v1/constants/function-library-constants.ts
  • features/admin.function-libraries.v1/constants/index.ts
  • features/admin.function-libraries.v1/models/endpoints.ts
  • features/admin.function-libraries.v1/models/function-library.ts
  • features/admin.function-libraries.v1/package.json
  • features/admin.function-libraries.v1/pages/function-libraries.tsx
  • features/admin.function-libraries.v1/pages/function-library-edit.tsx
  • features/admin.function-libraries.v1/public-api.ts
  • features/admin.function-libraries.v1/rollup.config.cjs
  • features/admin.function-libraries.v1/tsconfig.json
  • modules/i18n/src/constants.ts
  • modules/i18n/src/models/namespaces/console-ns.ts
  • modules/i18n/src/models/namespaces/function-libraries-ns.ts
  • modules/i18n/src/models/namespaces/index.ts
  • modules/i18n/src/translations/en-US/meta.ts
  • modules/i18n/src/translations/en-US/portals/console.ts
  • modules/i18n/src/translations/en-US/portals/function-libraries.ts
  • modules/i18n/src/translations/en-US/portals/index.ts

Comment on lines +19 to +55
.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);
}
}
}
}
}
}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📐 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

Comment on lines +66 to +74
const { data, error, isValidating, mutate } = useRequest<Data, Error>(requestConfig);

return {
data,
error,
isLoading: !error && !data,
isValidating,
mutate
};

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 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.

Suggested change
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> = {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📐 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 modules

Repository: 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.ts

Repository: 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

Comment on lines +158 to +161
headers: {
Accept: "application/json",
"Access-Control-Allow-Origin": store.getState().config.deployment.clientHost
},

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 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.

Comment on lines +22 to +28
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";

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📐 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.tsx

Repository: 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 || true

Repository: 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-L33
  • features/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

Comment on lines +145 to +163
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"

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 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 with functionLibraries: 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];

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 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.

Suggested change
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.

Comment on lines +119 to +123
onChange={ (
editor: unknown,
data: unknown,
newValue: string
) => onChange(newValue) }

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📐 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 : void return type to the onChange callback.
  • features/admin.function-libraries.v1/components/function-library-content-editor.tsx#L102-L102: Add : void return type to the onClick callback.
  • features/admin.function-libraries.v1/pages/function-libraries.tsx#L69-L83: Add : void return type to the useEffect callback.
  • features/admin.function-libraries.v1/pages/function-libraries.tsx#L109-L109: Add : void return type to the onClick callback.
  • features/admin.function-libraries.v1/pages/function-libraries.tsx#L122-L123: Add : void return type to the onFunctionLibraryDelete and onAddNewFunctionLibrary callbacks.
  • features/admin.function-libraries.v1/pages/function-library-edit.tsx#L69-L94: Add : void return type to the useEffect callback.
  • features/admin.function-libraries.v1/pages/function-library-edit.tsx#L75-L92: Add : void return type to the .then, .catch, and .finally callbacks.
  • features/admin.applications.v1/pages/applications-settings-hub.tsx#L112-L117: Add : boolean to the .filter callback, : ReactElement to the .map callback, and : void to the onClick callback.
📍 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-L102
  • features/admin.function-libraries.v1/pages/function-libraries.tsx#L69-L83
  • features/admin.function-libraries.v1/pages/function-libraries.tsx#L109-L109
  • features/admin.function-libraries.v1/pages/function-libraries.tsx#L122-L123
  • features/admin.function-libraries.v1/pages/function-library-edit.tsx#L69-L94
  • features/admin.function-libraries.v1/pages/function-library-edit.tsx#L75-L92
  • features/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

Comment on lines +22 to +29
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-]+)*$/;

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📐 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

Comment on lines +14 to +19
"module": "esnext",
"moduleResolution": "node",
"skipLibCheck": true,
"sourceMap": true,
"target": "es2015",
},

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 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.

@pavinduLakshan
pavinduLakshan marked this pull request as draft July 18, 2026 02:31
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant