Code Monkey home page Code Monkey logo

yeoman-ui's Introduction

Continuous Integration Coverage Status Language grade: JavaScript Commitizen friendly GitHub license REUSE status

Application Wizard

Description

With the Application Wizard extension you can benefit from a rich user experience for yeoman generators. This extension allows developers to reuse existing yeoman generators and provide wizard-like experience with no development efforts.

This npm mono-repo currently contains:

Support

To get more help, support, and information please open a github issue.

Report an Issue

To report an issue please use the github issue tracker. Please try to make sure you have these in your issue:

  • No duplicate
  • Reproducible
  • Good summary
  • Well-documented
  • Minimal example

Issue handling process

When an issue is reported, a committer will look at it and either confirm it as a real issue (by giving the "in progress" label), close it if it is not an issue, or ask for more details. In-progress issues are then either assigned to a committer in GitHub, reported in our internal issue handling system, or left open as "contribution welcome" for easy or not urgent fixes.

An issue that is about a real bug is closed as soon as the fix is committed.

Contributing

See CONTRIBUTING.md.

yeoman-ui's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

yeoman-ui's Issues

Dynamically populating list option

On a single page, I have three list boxes:
ListA
ListB
ListC

Is it possible to dynamically load the options in ListB if I select any option in ListA and the same behavior with ListB and ListC?
Note: Options will be fetched from a REST Api call.

Prompts are executing before input received

When using a conditional prompt, the generator prompts continue to execute without waiting for the user input from the previous condition. There is an ordering implied by the inquirer api but this is not being honoured. e.g After 5 seconds the second prompt is rendered but it should wait until the first prompt has received input, it doesn't and continues regardless.

    let prompts = [
      {
        when: async prevAnswers => {
            return new Promise((resolve) => {
              setTimeout(() => {
                resolve(true);
              }, 5000);
            });
        }, 
        type: "input",
        name: "hungry",
        message: "Are you hungry?",
        store: true
      },
      {
        when: prevAnswers => {
          if (prevAnswers.hungry === 'ok') {
              console.log('You are something, you took your time...');
              return true;
          }
          return false;
      },
        type: "confirm",
        name: "confirmHungry",
        message: (answers) => {
          return `You said you are ${(answers.hungry ? '' : 'not ')}hungry. Is that right?`;
        },
        store: true,
        validate: (value, answers) => {
          return (value === true ? true : "It must be right");
        },
      }
    ];
    this.answers = await this.prompt(prompts);
  }

Also in the case of composition the prompts from subsequent generators are being displayed before input has been received from the first generator.

Doesn't support sub-generator

From our generator, we defined several sub-generators for different questions and actions. And we don't maintain any steps in main generator.
Then when we use Yeoman UI, there will be nothing display after click Next button.
So is it possible to support sub-generators with Yeoman UI?

Show progress indicator when Next button is pressed

When the Next button is pressed, the generator might perform long async operations (between calls to prompt()).

Therefore, a progress indicator should be shown and the Next button should be disabled when the user presses the Next button.

Empty answer should be an empty string

When running yo code from the terminal, and leaving the Description empty, an empty string "" is created in the package.json.

When running the code generator using yeoman-ui, an empty value is created in the package.json, which makes it an invalid json, which in turn, fails the npm install stage.

Error running the backend : npm run ws:run

The npm compile is generating javascript in the out/src folder. Due to this, the npm run ws: run command fails to execute as it is looking source directly inside the out folder.

Fix : package.json is missing src folder
"ws:run": "node ./out/src/webSocketServer/index.js",

npm ERR! [email protected] ws:run: node ./out/webSocketServer/index.js

UX - In VSCode the disabled state of the next button is confusing

The Next button appears enabled but is non-functional. The button UX (disabled) should be indicate that it is disabled if there are no further pages. Normally this would be greyed out. Might need to improve the UX there.

Next button does not become really enabled until user clicks away rather than once something has been input.

image

Not able to compile the backend on REL 7

src/extension.ts:183:41 - error TS2339: Property 'asWebviewUri' does not exist on type 'Webview'.
183 const scriptUri = this.panel.webview.asWebviewUri(scriptPathOnDisk);

We have also tried to install vscode on the machine.

Please let me know any idea to resolve this issue.

Overwrite options not well handled

When a scaffolded project already exists we get some options in the UI, not all of them are supported, for example selecting "Show the differences..." doesn't actually show anything. Perhaps outputting the standard Yeoman CLI interaction on the terminal would suffice.

image

May be related to #103

List items not re-rendered correctly when choices updated

Changing the contents of a list dynamically, where an item has been previously selected results in an incorrectly rendered list with only one item. Once the user interacts with another control the list is re-rendered with the correct items.

Generator name without scope giving 404 error in app studio

Hi,

Steps to reproduce the issue:
Published yeoman generator with name 'generator-serverless-extensions' in artifactory.
Then, I included the same under yeoman-packages inside extension-data.json as shown below code snippet.

"npmConfig": {
"registries": {
"xfsrt": "https://common.repositories.sap.ondemand.com/artifactory/api/npm/generator-faas/"
}
},
"yeomanPackages": [
{
"name": "@xfsrt/generator-serverless-extensions",
"versionRange": "1.0.3",
"artifactory": "npm"
}
]

Deployed the extension in our subaccount and created a dev space using this extension.
Clicked on dev space and opened the workspace.
In output console, we get an error: 404 Not Found - GET https://common.repositories.sap.ondemand.com/artifactory/api/npm/generator-faas/@xfsrt%2fgenerator-serverless-extensions - not_found
npm ERR! 404
. Can yu please look into this issue?

UI doesn't indicate installation of dependecies

I used the following generator: https://www.npmjs.com/package/generator-easy-ui5

After setting all the parameters, yeoman runs to scaffold the project. After that, it runs npm install in my project which takes a while.

  1. Currently, the UI doesn't indicate that npm install is running and the user might think the wizard is broken as it only displays "loading...".

Screen Shot 2020-01-14 at 13 46 57

  1. Another issue is that the "Next" button is not disabled during the installation. The user is able to click it multiple times. After each click, the UI shows an additional "loading..." field in the vertical process indicator. This screenshot shows the UI after some clicks:

Screen Shot 2020-01-14 at 13 45 23

Error handling

  • promise rejects while performing rpc calls
  • ensure callback of Generator.run() is called when user aborts during conflict resolution and when exceptions occur

Backend is failing to start due to RpcExtenstionWebSockets and RpcEx

Backend server is not starting and failing due to misspell RpcExtenstion , RpcExtensionWebSockets in two source code files
extension.ts
webSocketServer/index.ts

import { RpcExtenstionWebSockets } from '@sap-devx/webview-rpc/out.ext/rpc-extension-ws';
import { RpcExtenstion } from '@sap-devx/webview-rpc/out.ext/rpc-extension';

issue1

issue2

Please correct these two errors or allowing me to commit the fix.

Cannot list Generators in Yeoman UI until reload window

Reproduce steps:

  1. Installed one generator globally in local. Open one VSCode window
  2. From the Command Palette execute the command: SAP Fiori tools - Application Generator: Launch
  3. Check no Generators listed as below
    yeoman-ui-1
    4. From the Command Palette execute the command: Developer: Reload Window
  4. Check all the available Generators are listed as expected:
    yeoman-ui-2

Expected result:
All the generators installed globally should be listed in Yeoman UI directly after open it.

Actual result:
The generators are not listed until user execute reload command.

debug console warning - memory leak detected.

(node:508764) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 exit listeners added to [process]. Use emitter.setMaxListeners() to increase limit
warning.js:32
(node:508764) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 error listeners added to [Socket]. Use emitter.setMaxListeners() to increase limit
warning.js:32
(node:508764) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 end listeners added to [Socket]. Use emitter.setMaxListeners() to increase limit
warning.js:32
(node:508764) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 drain listeners added to [Socket]. Use emitter.setMaxListeners() to increase limit
warning.js:32
(node:508764) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 close listeners added to [Socket]. Use emitter.setMaxListeners() to increase limit
warning.js:32
(node:508764) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 keypress listeners added to [Socket]. Use emitter.setMaxListeners() to increase limit

steps to reproduce - (Next -> Back ) * 10

List with no default should set the 1st choice as default.

When running yo code from the terminal, 'What type of extension do you want to create?' 1st chice is select as default.
When running the code generator using yeoman-ui, 'What type of extension do you want to create?' empty line is shown in the list.

Doesn't offer a way to generate files in current working directory

I noticed that all new projects are created in the home directory of the user under projects.
My suggestion for a better default directory would be the current working directory as yeoman itself works in the same manner.
If you decide that the home directory should be the default: Could you please add an option to override the default?

Hangs when using Fiori Application generator

Although the first 2 questions work correctly, Project Location, App Location, there is no list of generators offered in the next step. The UI hangs with busy indicator. The next button is also still enabled. May be a bug with Fiori Application generator rather than Yeoman-UI however?

image

Field validation errors messages are subtle

Feedback from users of the Application generator is that the inline validation of input fields is too subtle. As an example:

image

People are missing the "Module name cannot contain capital letters" message. Can this error be made more visual? Perhaps some highlighting of the associated invalid field would help?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.