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",
@@ -453,6 +455,15 @@
 					"dark": "images/title/dark/workspace-new.svg"
 				}
 			},
+            {
+				"command": "openshift.component.createComponentNew",
+				"title": "New Component Workflow",
+				"category": "OpenShift",
+				"icon": {
+					"light": "images/title/light/workspace-new.svg",
+					"dark": "images/title/dark/workspace-new.svg"
+				}
+			},
 			{
 				"command": "openshift.component.createFromRootWorkspaceFolder",
 				"title": "New OpenShift Component",
@@ -1148,6 +1159,11 @@
 					"when": "view == openshiftComponentsView",
 					"group": "navigation"
 				},
+                {
+					"command": "openshift.component.createComponentNew",
+					"when": "view == openshiftComponentsView",
+					"group": "navigation"
+				},
 				{
 					"command": "openshift.component.openImportFromGit",
 					"when": "view == openshiftComponentsView",

src/openshift/component.ts

@@ -25,6 +25,7 @@ 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';
 
 function createCancelledResult(stepName: string): any {
     const cancelledResult: any = new String('');
@@ -447,6 +448,11 @@ export class Component extends OpenShiftItem {
         return Component.createFromRootWorkspaceFolder(workspacePath, [], { componentTypeName: compTypeName, projectName: starterProjectName, registryName: regName });
     }
 
+    @vsCommand('openshift.component.createComponentNew')
+    static async createComponent(): Promise<void> {
+        await CreateComponentLoader.loadView('Create Component');
+    }
+
     @vsCommand('openshift.component.openImportFromGit')
     static async importFromGit(): Promise<void> {
         await GitImportLoader.loadView('Git Import');

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,159 @@
+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;
+}
+
+.MuiOutlinedInput-input:disabled, .Mui-disabled {
+    -webkit-text-fill-color: white !important;
+}
+
+.MuiSelect-select, .MuiMenu-paper, .MuiAutocomplete-inputRoot {
+    background-color: var(--vscode-dropdown-background) !important;
+    color: var(--vscode-dropdown-foreground) !important;
+    border: 0.5px solid var(--vscode-dropdown-border) !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;
+}