Skip to content

Commit

Permalink
Add Create Component From Folder action to workspace folder
Browse files Browse the repository at this point in the history
  • Loading branch information
@datho7561
Jessica He authored and datho7561 committed Aug 10, 2023
1 parent eefc962 commit 8e0cff8
Show file tree
Hide file tree
Showing 7 changed files with 101 additions and 30 deletions.
Binary file added images/walkthrough/createComponentFromWorkspaceFolder.gif
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified images/walkthrough/showRegistries.gif
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
11 changes: 10 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -422,7 +422,7 @@
},
{
"command": "openshift.component.createFromRootWorkspaceFolder",
"title": "New OpenShift Component",
"title": "Create Component From Folder",
"category": "OpenShift"
},
{
Expand Down Expand Up @@ -1522,6 +1522,15 @@
"onCommand:openshift.componentTypesView.registry.openInView"
]
},
{
"id": "createComponentFromWorkspaceFolder",
"title": "Create Component from workspace folder",
"description": "Use the `Create Component From Folder` option from the command palette in your root workspace folder to create a component from that folder directly.",
"media": {
"image": "images/walkthrough/createComponentFromWorkspaceFolder.gif",
"altText": "create component from workspace folder"
}
},
{
"id": "helmChart",
"title": "Work with Helm Charts",
Expand Down
18 changes: 17 additions & 1 deletion src/openshift/component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -484,6 +484,23 @@ export class Component extends OpenShiftItem {
await CreateComponentLoader.loadView('Create Component');
}

/**
* Create a component from the root folder in workspace through command palette
*
*/
@vsCommand('openshift.component.createFromRootWorkspaceFolder')
static async createFromRootWorkspaceFolderPalette(): Promise<void> {
const devFileLocation = path.join(workspace.workspaceFolders[0].uri.fsPath, 'devfile.yaml');
try {
await fs.access(devFileLocation);
await window.showErrorMessage('The selected folder already contains a devfile.');
return;
} catch (e) {
// do nothing
}
await CreateComponentLoader.loadView('Create Component', workspace.workspaceFolders[0].uri.fsPath);
}

/**
* Create a component
*
Expand All @@ -496,7 +513,6 @@ export class Component extends OpenShiftItem {
* @throws VsCommandError or Error in case of error in cli or code
*/

@vsCommand('openshift.component.createFromRootWorkspaceFolder')
static async createFromRootWorkspaceFolder(folder: Uri, selection: Uri[], opts: {
componentTypeName?: string,
projectName?: string,
Expand Down
12 changes: 11 additions & 1 deletion src/webview/create-component/createComponentLoader.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,11 +43,13 @@ let tmpFolder: Uri;
export default class CreateComponentLoader {
static panel: WebviewPanel;

static initFromRootFolderPath: string;

static get extensionPath() {
return extensions.getExtension(ExtensionID).extensionPath;
}

static async loadView(title: string): Promise<WebviewPanel> {
static async loadView(title: string, folderPath?: string): Promise<WebviewPanel> {
if (CreateComponentLoader.panel) {
CreateComponentLoader.panel.reveal();
return;
Expand Down Expand Up @@ -92,6 +94,9 @@ export default class CreateComponentLoader {
);
panel.webview.html = await loadWebviewHtml('createComponentViewer', panel);
CreateComponentLoader.panel = panel;

CreateComponentLoader.initFromRootFolderPath = folderPath;

return panel;
}

Expand All @@ -108,6 +113,10 @@ export default class CreateComponentLoader {
action: 'setTheme',
themeValue: vscode.window.activeColorTheme.kind,
});
void CreateComponentLoader.panel.webview.postMessage({
action: 'initFromRootFolder',
rootFolder: CreateComponentLoader.initFromRootFolderPath,
});
break;
}
/**
Expand Down Expand Up @@ -300,6 +309,7 @@ export default class CreateComponentLoader {
);
}
void vscode.commands.executeCommand('openshift.componentsView.refresh');
void vscode.window.showInformationMessage('Component has been successfully created. You can now run `Start Dev` from the components view.');
} catch (err) {
await sendTelemetry('newComponentCreationFailed', {
error: JSON.stringify(err),
Expand Down
34 changes: 30 additions & 4 deletions src/webview/create-component/pages/createComponent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
import { AccountTree } from '@mui/icons-material';
import FolderOpenIcon from '@mui/icons-material/FolderOpen';
import GitHubIcon from '@mui/icons-material/GitHub';
import { Container, Stack, Theme, ThemeProvider, Typography } from '@mui/material';
import { CircularProgress, Container, Stack, Theme, ThemeProvider, Typography } from '@mui/material';
import * as React from 'react';
import { DevfileExplanation } from '../../common/devfileExplanation';
import { FromTemplateProject } from '../../common/fromTemplateProject';
Expand All @@ -19,6 +19,7 @@ interface VSCodeMessage {
themeValue?: number;
availableServices?: string[];
componentName?: string;
rootFolder?: string;
}

function SelectStrategy({ setCurrentView }) {
Expand Down Expand Up @@ -75,10 +76,23 @@ export default function CreateComponent() {

const [theme, setTheme] = React.useState<Theme>(createVSCodeTheme('light'));
const [currentView, setCurrentView] = React.useState<PageId>('home');
const [folderPath, setFolderPath] = React.useState<string>(undefined);
const [isInitialized, setInitialized] = React.useState<boolean>(false);

const respondToMessage = function (message: MessageEvent<VSCodeMessage>) {
if (message.data.action === 'setTheme') {
setTheme(createVSCodeTheme(message.data.themeValue === 1 ? 'light' : 'dark'));
switch (message.data.action) {
case 'setTheme': {
setTheme(createVSCodeTheme(message.data.themeValue === 1 ? 'light' : 'dark'));
break;
}
case 'initFromRootFolder': {
if (message.data.rootFolder != undefined) {
setCurrentView('fromLocalCodeBase');
setFolderPath(message.data.rootFolder);
}
setInitialized(true);
break;
}
}
};

Expand All @@ -94,13 +108,25 @@ export default function CreateComponent() {
}, []);

const renderComponent = () => {

if (!isInitialized) {
return (
<Stack direction="column" spacing={3} alignItems="center">
<CircularProgress />
<Typography variant="body2">
Loading Page...
</Typography>
</Stack>
);
}

switch (currentView) {
case 'home':
return <SelectStrategy setCurrentView={setCurrentView} />;
case 'fromLocalCodeBase':
return (
<div style={{ marginRight: '5em' }}>
<FromLocalCodebase setCurrentView={setCurrentView} />
<FromLocalCodebase setCurrentView={setCurrentView} rootFolder={folderPath} />
</div>
);
case 'fromExistingGitRepo':
Expand Down
56 changes: 33 additions & 23 deletions src/webview/create-component/pages/fromLocalCodebase.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ import {
Typography
} from '@mui/material';
import * as React from 'react';
import { Uri } from 'vscode';
import { ComponentNameInput } from '../../common/componentNameInput';
import {
CreateComponentButton,
Expand Down Expand Up @@ -47,7 +46,12 @@ type RecommendedDevfileState = {
isDevfileExistsInFolder: boolean;
};

export function FromLocalCodebase({ setCurrentView }) {
type FromLocalCodebaseProps = {
setCurrentView: React.Dispatch<React.SetStateAction<string>>;
rootFolder?: string;
};

export function FromLocalCodebase(props: FromLocalCodebaseProps) {
const [currentPage, setCurrentPage] = React.useState<CurrentPage>('fromLocalCodeBase');
const [workspaceFolders, setWorkspaceFolders] = React.useState<string[]>([]);
const [projectFolder, setProjectFolder] = React.useState('');
Expand Down Expand Up @@ -128,6 +132,15 @@ export function FromLocalCodebase({ setCurrentView }) {

React.useEffect(() => {
window.vscodeApi.postMessage({ action: 'getWorkspaceFolders' });
if (props.rootFolder && props.rootFolder.length != 0) {
setProjectFolder(props.rootFolder);
const componentNameFromFolder: string = props.rootFolder.substring(props.rootFolder.lastIndexOf('/') + 1);
setComponentName(componentNameFromFolder);
window.vscodeApi.postMessage({
action: 'validateComponentName',
data: componentNameFromFolder,
});
}
}, []);

function handleNext() {
Expand Down Expand Up @@ -225,14 +238,11 @@ export function FromLocalCodebase({ setCurrentView }) {
{!isLoaded ? (
<>
<Stack direction="row" spacing={1} marginTop={2}>
<Button
variant="text"
onClick={() => {
setCurrentView('home');
}}
>
BACK
</Button>
{(!props.rootFolder || props.rootFolder.length == 0) &&
<Button variant='text' onClick={() => { props.setCurrentView('home') }}>
BACK
</Button>
}
<Button
variant="contained"
disabled={
Expand Down Expand Up @@ -312,19 +322,19 @@ export function FromLocalCodebase({ setCurrentView }) {
</Button>
{(recommendedDevfile.showRecommendation ||
selectedDevfile) && (
<CreateComponentButton
componentName={componentName}
componentParentFolder={projectFolder}
addToWorkspace={true}
isComponentNameFieldValid={
isComponentNameFieldValid
}
isFolderFieldValid={true}
isLoading={isLoading}
createComponent={createComponentFromLocalCodebase}
setLoading={setLoading}
/>
)}
<CreateComponentButton
componentName={componentName}
componentParentFolder={projectFolder}
addToWorkspace={true}
isComponentNameFieldValid={
isComponentNameFieldValid
}
isFolderFieldValid={true}
isLoading={isLoading}
createComponent={createComponentFromLocalCodebase}
setLoading={setLoading}
/>
)}
</Stack>
<CreateComponentErrorAlert
createComponentErrorMessage={createComponentErrorMessage}
Expand Down

0 comments on commit 8e0cff8

Please sign in to comment.