Customize Theia start widget

Hello,

I would like to customize Theia help → Getting Start widget.

The code is very small.


@injectable()
export class TestWidget extends GettingStartedWidget {
  /**
   * Render the help section.
   */
  protected renderHelp(): React.ReactNode {

    return (
      <div className="gs-section">
        <h3 className="gs-section-header">
          <i className={codicon("question")}></i>
          help
        </h3>
        </div>
      </div>
    );
  }
}

Binding in containerModule:

   bind(TestWidget).toSelf().inSingletonScope();
   rebind(GettingStartedWidget).toService(TestWidget);

The issue is I can only open helper widget once, once I close it, I have to refresh screen and open it again. otherwise, I got blank screen.

Screen Shot 2022-07-11 at 3.58.21 PM

Can anyone help?

Resolved.

I need to bind the new widget like this: