Create component new workflow

.eslintignore

@@ -12,6 +12,7 @@ src/webview/cluster
 src/webview/webpack.config.js
 out
 src/webview/common
+src/webview/create-component
 src/webview/create-service
 src/webview/devfile-registry
 src/webview/welcome

package.json

@@ -55,6 +55,7 @@
 		"dev:compile:log-view": "webpack --mode development --config src/webview/log/webpack.config.js",
 		"dev:compile:describe-view": "webpack --mode development --config src/webview/describe/webpack.config.js",
 		"dev:compile:cluster-view": "webpack --mode development --config src/webview/cluster/webpack.config.js",
+        "dev:compile:create-component-view": "webpack --mode development --config src/webview/create-component/webpack.config.js",
 		"dev:compile:create-service-view": "webpack --mode development --config src/webview/create-service/webpack.config.js",
 		"dev:compile:devfile-registry-view": "webpack --mode development --config src/webview/devfile-registry/webpack.config.js",
 		"dev:compile:welcome-view": "webpack --mode development --config src/webview/welcome/webpack.config.js",
@@ -66,7 +67,8 @@
 		"dev:run:devfile-registry-view": "webpack-dev-server --port 9222 --mode development --config src/webview/devfile-registry/webpack.config.js",
 		"dev:run:welcome-view": "webpack-dev-server --port 9222 --mode development --config src/webview/welcome/webpack.config.js",
 		"dev:run:git-import-view": "webpack-dev-server --port 9222 --mode development --config src/webview/git-import/webpack.config.js",
-		"dev:run:helm-chart-view": "webpack-dev-server --port 9222 --mode development --config src/webview/helm-chart/webpack.config.js",
+        "dev:run:helm-chart-view": "webpack-dev-server --port 9222 --mode development --config src/webview/helm-chart/webpack.config.js",
+        "dev:run:create-component-view": "webpack-dev-server --mode development --config src/webview/create-component/webpack.config.js",
 		"dev:run:create-service-view": "webpack-dev-server --mode development --config src/webview/create-service/webpack.config.js",
 		"watch": "tsc -watch -p ./",
 		"clean": "shx rm -rf out/build out/coverage out/src out/test out/tools out/test-resources out/logViewer",
@@ -677,11 +679,6 @@
 				"title": "Clone to Workspace",
 				"category": "OpenShift"
 			},
-			{
-				"command": "openshift.componentType.newComponent",
-				"title": "New Component",
-				"category": "OpenShift"
-			},
 			{
 				"command": "openshift.explorer.addCluster.openLaunchSandboxPage",
 				"title": "Launch Developer Sandbox",
@@ -1040,10 +1037,6 @@
 					"command": "openshift.component.log.palette",
 					"when": "false"
 				},
-				{
-					"command": "openshift.componentType.newComponent",
-					"when": "false"
-				},
 				{
 					"command": "openshift.component.revealContextInExplorer",
 					"when": "false"
@@ -1450,7 +1443,7 @@
 							"altText": "create component"
 						},
 						"completionEvents": [
-							"onCommand:openshift.componentType.newComponent"
+							"onCommand:openshift.component.createFromLocal"
 						]
 					},
                     {

src/openshift/component.ts

@@ -12,19 +12,19 @@ import OpenShiftItem, { clusterRequired, selectTargetComponent } from './openshi
 import { OpenShiftComponent } from '../odo';
 import { Command } from '../odo/command';
 import { Progress } from '../util/progress';
-import { selectWorkspaceFolder } from '../util/workspace';
 import { vsCommand, VsCommandError } from '../vscommand';
-import { ascDevfileFirst, ComponentTypeAdapter, ComponentTypeDescription, DevfileComponentType, isDevfileComponent } from '../odo/componentType';
-import { isStarterProject, StarterProject } from '../odo/componentTypeDescription';
+import { ascDevfileFirst, ComponentTypeAdapter, ComponentTypeDescription } from '../odo/componentType';
+import { StarterProject } from '../odo/componentTypeDescription';
 import path = require('path');
 import globby = require('globby');
 import fs = require('fs-extra');
 import { NewComponentCommandProps } from '../telemetry';
-
 import { ComponentWorkspaceFolder } from '../odo/workspace';
 import LogViewLoader from '../webview/log/LogViewLoader';
 import GitImportLoader from '../webview/git-import/gitImportLoader';
 import { CliChannel } from '../cli';
+import CreateComponentLoader from '../webview/create-component/createComponentLoader';
+import { CompTypeDesc } from '../webview/common/propertyTypes';
 
 function createCancelledResult(stepName: string): any {
     const cancelledResult: any = new String('');
@@ -425,26 +425,9 @@ export class Component extends OpenShiftItem {
         return;
     }
 
-    @vsCommand('openshift.componentType.newComponent')
-    public static async createComponentFromCatalogEntry(context: DevfileComponentType | StarterProject, registryName?: string): Promise<string> {
-        let componentTypeName: string,
-            starterProjectName: string;
-        if (isDevfileComponent(context)) {
-            componentTypeName = context.name;
-        } else if (isStarterProject(context)) {
-            componentTypeName = context.typeName;
-            starterProjectName = context.name;
-        }
-
-        return Component.createFromLocal(componentTypeName, starterProjectName, registryName);
-    }
-
     @vsCommand('openshift.component.createFromLocal')
-    static async createFromLocal(compTypeName?: string, starterProjectName?: string, regName?: string): Promise<string | null> {
-        const workspacePath = await selectWorkspaceFolder();
-        if (!workspacePath) return createCancelledResult('contextFolder');
-
-        return Component.createFromRootWorkspaceFolder(workspacePath, [], { componentTypeName: compTypeName, projectName: starterProjectName, registryName: regName });
+    static async createComponent(component: CompTypeDesc, starterProjectName: string): Promise<void> {
+        await CreateComponentLoader.loadView('Create component', component, starterProjectName);
     }
 
     @vsCommand('openshift.component.openImportFromGit')

src/registriesView.ts

@@ -49,7 +49,7 @@ export class ComponentTypesView implements TreeDataProvider<ComponentType> {
 
     readonly odo: Odo = getInstance();
     private registries: Registry[];
-    private readonly compDescriptions: Set<ComponentTypeDescription> = new Set<ComponentTypeDescription>();
+    private compDescriptions: Set<ComponentTypeDescription> = new Set<ComponentTypeDescription>();
     public subject: Subject<string> = new Subject<string>();
 
     createTreeView(id: string): TreeView<ComponentType> {
@@ -138,6 +138,7 @@ export class ComponentTypesView implements TreeDataProvider<ComponentType> {
     public getAllComponents(): void {
         let isError = false;
         this.compDescriptions.clear();
+        const compDescs: Set<ComponentTypeDescription> = new Set<ComponentTypeDescription>();
         void getInstance().getCompTypesJson().then(async (devFileComponentTypes: DevfileComponentType[]) => {
             await this.getRegistries();
             devFileComponentTypes.forEach((component: DevfileComponentType) => {
@@ -149,9 +150,10 @@ export class ComponentTypesView implements TreeDataProvider<ComponentType> {
                         component.devfileData.devfile?.starterProjects?.map((starter: StarterProject) => {
                             starter.typeName = component.name;
                         });
-                        this.compDescriptions.add(component);
+                        compDescs.add(component);
 
-                    if (devFileComponentTypes.length === this.compDescriptions.size) {
+                    if (devFileComponentTypes.length === compDescs.size) {
+                        this.compDescriptions = compDescs;
                         this.subject.next('refresh');
                     }
                 }).catch(() => {

src/util/workspace.ts

@@ -42,7 +42,15 @@ function createWorkspaceFolderItem(wsFolder: WorkspaceFolder) {
     };
 }
 
-export async function selectWorkspaceFolder(skipWindowPick = false): Promise<Uri> {
+export function selectWorkspaceFolders(): Uri[] {
+    const workspacePaths: Uri[] = [];
+    if (workspace.workspaceFolders && workspace.workspaceFolders.length > 0) {
+        workspace.workspaceFolders.filter(isComponentFilter).map(createWorkspaceFolderItem).map((workSpaceItem) => workspacePaths.push(workSpaceItem.uri));
+    }
+    return workspacePaths;
+}
+
+export async function selectWorkspaceFolder(skipWindowPick = false, label?: string): Promise<Uri> {
     let folders: WorkspaceFolderItem[] = [];
     let choice:WorkspaceFolderItem | QuickPickItem;
     let workspacePath: Uri;
@@ -71,7 +79,7 @@ export async function selectWorkspaceFolder(skipWindowPick = false): Promise<Uri
             canSelectFolders: true,
             canSelectMany: false,
             defaultUri: Uri.file(Platform.getUserHomePath()),
-            openLabel: skipWindowPick ? 'Select as Repository Destination' : 'Add context folder for component in workspace.',
+            openLabel: label || 'Add context folder for component in workspace.',
         });
         if (!selectedFolders) return null;
         if (fs.existsSync(path.join(selectedFolders[0].fsPath, '.odo', 'config.yaml'))) {

src/webview/common/util.ts

@@ -0,0 +1,13 @@
+/*-----------------------------------------------------------------------------------------------
+ *  Copyright (c) Red Hat, Inc. All rights reserved.
+ *  Licensed under the MIT License. See LICENSE file in the project root for license information.
+ *-----------------------------------------------------------------------------------------------*/
+
+import { CompTypeDesc } from "./propertyTypes";
+
+export function ascName(oldCompDesc: CompTypeDesc, newCompDesc: CompTypeDesc): number {
+    if (oldCompDesc.priority < 0 && newCompDesc.priority < 0) {
+        return oldCompDesc.devfileData.devfile.metadata.name.localeCompare(newCompDesc.devfileData.devfile.metadata.name);
+    }
+    return newCompDesc.priority - oldCompDesc.priority;
+}

src/webview/create-component/app/component.scss

@@ -0,0 +1,154 @@
+body {
+    &.vscode-light {
+        background-color: var(--color-background--darken-05);
+    }
+}
+
+button {
+    padding: 0;
+}
+
+.margin {
+    margin: 3rem;
+}
+
+.mainContainer,
+.formContainer,
+.form {
+    display: flex;
+    flex-direction: column;
+    font-family: var(--vscode-font-family);
+    // overflow-y: scroll;
+}
+
+.title {
+    width: 100%;
+    margin-bottom: 1rem;
+}
+
+.sub {
+    margin: 1rem 0rem;
+}
+
+.subTitle {
+    margin-bottom: 2rem;
+    max-width: 59rem;
+    justify-content: center;
+    word-spacing: 5px;
+    text-align: justify;
+    color: var(--vscode-foreground);
+    font-weight: normal;
+    font-size: 14px;
+}
+
+.buttonStyle {
+    text-align: center;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: var(--vscode-button-foreground);
+
+    &:hover {
+        background-color: '#BE0000' !important;
+    }
+
+    text-transform: none;
+}
+
+.buttonDiv {
+    margin: 2rem 0rem;
+    position: fixed;
+}
+
+.buttonDivWithBottom {
+    display: inline-flex;
+    border-top: 1px solid;
+    // border-color: inherit;
+    width: 100%;
+    height: 3rem;
+    background-color: var(--vscode-editor-background) !important;
+    backdrop-filter: blur(15px);
+    padding-top: 1rem;
+    margin-top: 2rem;
+    position: fixed;
+    bottom: -3%;
+}
+
+.strategyContainer {
+    display: flex;
+    flex-direction: row;
+    border-top: 3px solid;
+    max-width: 55rem;
+    margin-top: 2rem;
+    padding-top: 0.5rem;
+    padding-left: 1rem;
+    min-height: 2rem;
+}
+
+.cardContainer {
+    display: flex;
+    flex-direction: column;
+    margin-top: 1rem;
+}
+
+.strategySuccess {
+    border-color: green;
+    background-color: darkseagreen !important;
+}
+
+.strategyWarning {
+    border-color: orange;
+    background-color: burlywood !important;
+}
+
+.MuiFormHelperText-root {
+    color: var(--vscode-foreground) !important;
+    margin-left: 0px !important;
+}
+
+.Mui-error {
+    color: #EE0000 !important;
+}
+
+.MuiOutlinedInput-input {
+    padding: 5px 14px !important;
+    border: 0.5px solid var(--vscode-dropdown-border) !important;
+}
+
+.MuiSelect-select, .MuiMenu-paper, .MuiAutocomplete-inputRoot {
+    background-color: var(--vscode-dropdown-background) !important;
+    color: var(--vscode-dropdown-foreground) !important;
+}
+
+.MuiInputBase-input {
+    padding-left: 8px !important;
+}
+
+.MuiAutocomplete-input {
+    padding-left: 0px !important;
+}
+
+.MuiAutocomplete-inputRoot {
+    width: 75% !important;
+    height: 3rem !important;
+}
+
+.MuiMenuItem-root {
+    background-color: var(--vscode-dropdown-background) !important;
+    color: var(--vscode-dropdown-foreground) !important;
+}
+
+.MuiMenuItem-root:hover {
+    background-color: var(--vscode-button-hoverBackground) !important;
+}
+
+.MuiFormControl-root {
+    border: none;
+    max-width: 50%;
+    &:hover {
+        border: none;
+    }
+}
+
+.MuiAccordionSummary-root {
+    padding: 0px !important;
+}