Merge remote-tracking branch 'origin/main' into feat/30937/Prohibit-n…

…on-CAP-Fiori-generation-into-a-CAP-project-folder

* origin/main:
  chore: apply latest changesets
  feat(ui-prompting): rename ui prompting examples package from `@sap-ux/prompting-ui` to `@sap-ux-private/ui-prompting-examples` (#2415)
  chore: apply latest changesets
  fix: adjust condition for dynamic header field content (#2412)
  chore: apply latest changesets
  feat(ui-prompting): support translation input fields for prompts (#2400)
  chore: apply latest changesets
  Renamed the skipLiveScript parameter to addLiveConfig  (#2405)
  chore: apply latest changesets
  fix: various ui improvements and bug fix (#2410)
  chore: apply latest changesets
  Refactor shared logic for generating package.json scripts for FF and FE (#2386)
  chore: apply latest changesets
  feat: enhance quick action with the template (#2388)
  chore: apply latest changesets
  fix(cpe): application mode after reload (#2389)

.vscode/launch.json

@@ -33,12 +33,12 @@
         {
             "type": "node",
             "request": "launch",
-            "name": "examples/prompting-ui: Run Example",
+            "name": "examples/ui-prompting-examples: Run Example",
             "runtimeExecutable": "pnpm",
             "runtimeArgs": ["storybook"],
             "console": "integratedTerminal",
             "internalConsoleOptions": "neverOpen",
-            "cwd": "${workspaceFolder}/examples/prompting-ui"
+            "cwd": "${workspaceFolder}/examples/ui-prompting-examples"
         },
         {
             "type": "node",

examples/README.md

@@ -10,5 +10,5 @@ A simplified example illustrating how to create a yeoman generator using the `fi
 ## fe-fpm-cli
 A simple CLI to prompt required information to create a building block using the `fe-fpm-writer` module's prompt and generate functions.
 
-## prompting-ui
+## ui-prompting-examples
 A storybook project containing playground for consuming/testing `Prompts API` from `fe-fpm-writer` and `UI` from `@sap-ux/ui-prompting`

examples/fe-fpm-cli/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @sap-ux/fe-fpm-cli
 
+## 0.0.31
+
+### Patch Changes
+
+-   Updated dependencies [05b554d]
+    -   @sap-ux/fe-fpm-writer@0.31.4
+
 ## 0.0.30
 
 ### Patch Changes

examples/fe-fpm-cli/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@sap-ux/fe-fpm-cli",
-    "version": "0.0.30",
+    "version": "0.0.31",
     "description": "A simple CLI to prompt required information to create a building block using the fe-fpm-writer module's prompt and generate functions.",
     "license": "Apache-2.0",
     "private": true,

examples/fe-fpm-cli/sample/fe-app/package.json

@@ -1 +1,3 @@
-{}
+{
+    "sapux": true
+}

examples/simple-generator/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @sap-ux/generator-simple-fe
 
+## 1.0.53
+
+### Patch Changes
+
+-   @sap-ux/fiori-elements-writer@1.3.1
+
+## 1.0.52
+
+### Patch Changes
+
+-   Updated dependencies [04988f1]
+    -   @sap-ux/fiori-freestyle-writer@1.2.0
+    -   @sap-ux/fiori-elements-writer@1.3.0
+
 ## 1.0.51
 
 ### Patch Changes

examples/simple-generator/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@sap-ux/generator-simple-fe",
-    "version": "1.0.51",
+    "version": "1.0.53",
     "description": "Simple example of a yeoman generator for Fiori elements.",
     "license": "Apache-2.0",
     "private": true,

examples/prompting-ui/CHANGELOG.md → examples/ui-prompting-examples/CHANGELOG.md

@@ -1,4 +1,18 @@
-# @sap-ux/fe-fpm-writer-ui
+# @sap-ux-private/ui-prompting-examples
+
+## 0.2.0
+
+### Minor Changes
+
+-   d91c081: Rename`ui-prompting` examples package name from `@sap-ux/prompting-ui` to `@sap-ux-private/ui-prompting-examples`
+
+## 0.1.7
+
+### Patch Changes
+
+-   05b554d: Example to handle i18n bundle for translation input for 'ui-prompting'
+-   Updated dependencies [05b554d]
+    -   @sap-ux/ui-prompting@0.2.0
 
 ## 0.1.6
 

examples/prompting-ui/package.json → examples/ui-prompting-examples/package.json

@@ -1,6 +1,6 @@
 {
-    "name": "@sap-ux/prompting-ui",
-    "version": "0.1.6",
+    "name": "@sap-ux-private/ui-prompting-examples",
+    "version": "0.2.0",
     "description": "This project contains UI storybook stories with exampleS with prompt ui and FPM based building blocks.",
     "license": "Apache-2.0",
     "private": true,
@@ -36,6 +36,8 @@
         "@babel/preset-react": "7.22.15",
         "@babel/preset-typescript": "7.22.15",
         "@sap-ux/fe-fpm-writer": "workspace:*",
+        "@sap-ux/i18n": "workspace:*",
+        "@sap-ux/project-access": "workspace:*",
         "@storybook/addons": "7.6.17",
         "@storybook/components": "8.1.11",
         "@storybook/react": "8.1.11",

examples/prompting-ui/src/BuildingBlock.tsx → examples/ui-prompting-examples/src/BuildingBlock.tsx

@@ -4,7 +4,7 @@ import type { PromptsType } from './utils';
 import { applyAnswers, getChoices, getCodeSnippet, getWebSocket, validateAnswers } from './utils/communication';
 import { Questions, PromptsLayoutType, setAnswer } from '@sap-ux/ui-prompting';
 import type { ValidationResults, ValidationResult } from '@sap-ux/ui-prompting';
-import { useChoices, useQuestions } from './utils/hooks';
+import { useChoices, useI18nBundle, useQuestions } from './utils/hooks';
 import type { Answers } from 'inquirer';
 
 initIcons();
@@ -38,6 +38,7 @@ export const BuildingBlockQuestions = (props: {
     const [allowAutoAddDependencyLib, setAllowAutoAddDependencyLib] = useState(true);
     const choices = useChoices();
     const { groups, questions, initialAnswers = {} } = useQuestions(type, visibleQuestions);
+    const [i18nBundle, updateBundle, pendingQuestions] = useI18nBundle();
     const [answers, setAnswers] = useState<Answers>(externalAnswers ?? initialAnswers);
     const [validation, setValidation] = useState<ValidationResults>({});
 
@@ -180,6 +181,20 @@ export const BuildingBlockQuestions = (props: {
                             layoutSettings.multiColumn ? PromptsLayoutType.MultiColumn : PromptsLayoutType.SingleColumn
                         }
                         showDescriptions={layoutSettings.showDescriptions}
+                        translationProps={{
+                            bundle: i18nBundle,
+                            onEvent: (name, event) => {
+                                // ToDo
+                                if (event.name === 'update') {
+                                    updateBundle(name, event.entry);
+                                } else {
+                                    console.log(
+                                        `Show entry: key:"${event.entry.key.value}" -> value:"${event.entry.value.value}"`
+                                    );
+                                }
+                            },
+                            pendingQuestions
+                        }}
                     />
                 </div>
                 {/* Disable the button if there is no answers for the 'required' question */}

examples/prompting-ui/src/addons/preview/component.tsx → examples/ui-prompting-examples/src/addons/preview/component.tsx

@@ -1,8 +1,8 @@
 import { AddonPanel, Form, SyntaxHighlighter } from '@storybook/components';
 import React, { useEffect, useState } from 'react';
 import { addons } from '@storybook/addons';
-import { UPDATE_CODE_SNIPPET, getWebSocket, onMessageAttach } from '../../../src/utils';
-import type { Actions } from '../../../src/utils';
+import { UPDATE_CODE_SNIPPET, getWebSocket, onMessageAttach } from '../../utils';
+import type { Actions } from '../../utils';
 
 getWebSocket(false);
 

examples/prompting-ui/src/addons/project/component.tsx → examples/ui-prompting-examples/src/addons/project/component.tsx

@@ -1,6 +1,6 @@
 import React, { useState, memo } from 'react';
 import { Form, Blockquote, Loader, AddonPanel } from '@storybook/components';
-import { getApplication, getWebSocket, updateProjectPath } from '../../../src/utils';
+import { getApplication, getWebSocket, updateProjectPath } from '../../utils';
 import type { ApplicationInformation } from './types';
 
 getWebSocket();

examples/prompting-ui/src/addons/project/types.ts → examples/ui-prompting-examples/src/addons/project/types.ts

@@ -1,5 +1,5 @@
 import type { Answers } from 'inquirer';
-import type { PromptsType } from '../../../src/utils';
+import type { PromptsType } from '../../utils';
 import type { PromptQuestion } from '@sap-ux/ui-prompting';
 
 export type ProjectActions =

examples/prompting-ui/src/backend/connection.ts → examples/ui-prompting-examples/src/backend/connection.ts

@@ -18,23 +18,28 @@ import {
     RESET_ANSWERS,
     UPDATE_CODE_SNIPPET,
     SET_VALIDATION_RESULTS,
-    GET_CODE_SNIPPET
-} from '../../src/utils/types';
+    GET_CODE_SNIPPET,
+    REQUEST_I18N,
+    RESPONSE_I18N,
+    CREATE_I18N_ENTRY
+} from '../utils/types';
 import type {
     Actions,
     ResetAnswers,
     SetChoices,
     GetChoices,
     UpdateCodeSnippet,
-    SetValidationResults
-} from '../../src/utils/types';
+    SetValidationResults,
+    ResponseI18n
+} from '../utils/types';
 import type { AddonActions } from '../addons/types';
 import { handleAction as handleAddonAction } from '../addons/project';
 import { testAppPath, getApplication } from '../addons/project';
 import { GET_PROJECT_PATH, SET_PROJECT_PATH, VALIDATE_ANSWERS } from '../addons/project/types';
-import type { SetProjectPath } from '../addons/project/types';
+import type { ApplicationInformation, SetProjectPath } from '../addons/project/types';
 import type { DynamicChoices } from '@sap-ux/ui-prompting';
 import { getPromptApi } from './api';
+import { getI18nBundle, createI18nEntry } from './i18nBundle';
 
 const sampleAppPath = join(__dirname, '../../../fe-fpm-cli/sample/fe-app');
 
@@ -97,6 +102,24 @@ function sendMessage(action: Actions): void {
     }
 }
 
+/**
+ * Method resolves current i18n bundle and sends action with latest bundle to ui.
+ *
+ * @param app Application to refresh
+ */
+async function refreshI18nBundle(app?: ApplicationInformation): Promise<void> {
+    if (app?.projectPath) {
+        const bundle = await getI18nBundle(app.projectPath, app.appId);
+        if (bundle) {
+            const responseAction: ResponseI18n = {
+                type: RESPONSE_I18N,
+                bundle
+            };
+            sendMessage(responseAction);
+        }
+    }
+}
+
 /**
  * Method handles passed action from UI.
  *
@@ -200,6 +223,21 @@ async function handleAction(action: Actions): Promise<void> {
                 sendMessage(responseAction);
                 break;
             }
+            case REQUEST_I18N: {
+                await refreshI18nBundle(currentApp);
+                break;
+            }
+            case CREATE_I18N_ENTRY: {
+                if (currentApp?.projectPath) {
+                    await createI18nEntry(
+                        [{ key: action.key, value: action.value }],
+                        currentApp?.projectPath,
+                        currentApp?.appId
+                    );
+                    await refreshI18nBundle(currentApp);
+                }
+                break;
+            }
         }
 
         // Handle addon actions

examples/ui-prompting-examples/src/backend/i18nBundle.ts

@@ -0,0 +1,28 @@
+import { join } from 'path';
+import { createApplicationAccess } from '@sap-ux/project-access';
+import type { I18nBundle, NewI18nEntry } from '@sap-ux/i18n';
+
+/**
+ * Method retrieves i18n bundles for passed application.
+ *
+ * @param root Project root
+ * @param appName Application name
+ * @returns i18n bundle.
+ */
+export const getI18nBundle = async (root: string, appName?: string): Promise<I18nBundle | undefined> => {
+    const appAccess = await createApplicationAccess(join(root, appName ?? ''));
+    const bundles = await appAccess.getI18nBundles();
+    return bundles.models['i18n'] ?? bundles['sap.app'];
+};
+
+/**
+ * Method writes new i18n entries for passed application.
+ *
+ * @param newEntries New i18n entries to write
+ * @param root Project root
+ * @param appName Application name
+ */
+export const createI18nEntry = async (newEntries: NewI18nEntry[], root: string, appName?: string): Promise<void> => {
+    const appAccess = await createApplicationAccess(join(root, appName ?? ''));
+    await appAccess.createUI5I18nEntries(newEntries, 'i18n');
+};

examples/prompting-ui/src/utils/communication.ts → examples/ui-prompting-examples/src/utils/communication.ts

@@ -14,7 +14,7 @@ import type {
     ValidateAnswers
 } from '../addons/project/types';
 import type { DynamicChoices, PromptQuestion, ValidationResults, PromptsGroup } from '@sap-ux/ui-prompting';
-import type { Actions, GetChoices, GetQuestions } from './types';
+import type { Actions, CreateI18n, GetChoices, GetQuestions, RequestI18n } from './types';
 import {
     APPLY_ANSWERS,
     GET_CHOICES,
@@ -25,9 +25,13 @@ import {
     SET_FILTERBAR_QUESTIONS,
     SET_TABLE_QUESTIONS,
     SET_VALIDATION_RESULTS,
-    PromptsType
+    PromptsType,
+    REQUEST_I18N,
+    RESPONSE_I18N,
+    CREATE_I18N_ENTRY
 } from './types';
 import type { Subset } from '@sap-ux/fe-fpm-writer/src/prompts/types';
+import type { I18nBundle } from '@sap-ux/ui-components';
 
 let ws: WebSocket | undefined;
 
@@ -306,3 +310,49 @@ export function getCodeSnippet(buildingBlockType: PromptsType, answers: Answers)
     };
     sendMessage(action);
 }
+
+/**
+ * Method returns i18n bundle.
+ *
+ * @returns Returns i18n bundle.
+ */
+export function getI18nBundle(): Promise<I18nBundle> {
+    return new Promise((resolve) => {
+        const getAction: RequestI18n = {
+            type: REQUEST_I18N
+        };
+        sendMessage(getAction);
+        const handleMessage = (action: Actions) => {
+            if (action.type === RESPONSE_I18N) {
+                onMessageDetach(RESPONSE_I18N, handleMessage);
+                resolve(action.bundle);
+            }
+        };
+        onMessageAttach(RESPONSE_I18N, handleMessage);
+    });
+}
+
+/**
+ * Method dispatches action to triger creation on new i18n entry.
+ *
+ * @param key Key of new i18n entry
+ * @param value Value of new i18n entry
+ * @returns Returns updated i18n bundle.
+ */
+export function createI18n(key: string, value: string): Promise<I18nBundle> {
+    return new Promise((resolve) => {
+        const createAction: CreateI18n = {
+            type: CREATE_I18N_ENTRY,
+            key,
+            value
+        };
+        sendMessage(createAction);
+        const handleMessage = (action: Actions) => {
+            if (action.type === RESPONSE_I18N) {
+                onMessageDetach(RESPONSE_I18N, handleMessage);
+                resolve(action.bundle);
+            }
+        };
+        onMessageAttach(RESPONSE_I18N, handleMessage);
+    });
+}