Merge pull request #15 from sachiniSam/main

Update readme with latest flow

README.md

@@ -1,101 +1,103 @@
-# Choreo for Visual Studio Code
+# The Choreo extension for Visual Studio Code
 
-The Choreo VS Code extension enhances your local development experience with Choreo projects by providing a wide range of project and component management capabilities. Learn more about [Choreo](https://wso2.com/choreo/docs/).
-
-## Prerequisites
-
-For a seamless development experience with the Choreo extension, ensure the following are configured in your local environment:
-
-1. [Visual Studio Code](https://code.visualstudio.com/download) with the Choreo extension installed.
-2. [Ballerina distribution](https://ballerina.io) Update 4 or later.
-3. [Ballerina extension](https://marketplace.visualstudio.com/items?itemName=WSO2.ballerina) for VS Code, version 4.0.0 or later
+The Choreo VS Code extension enhances your local development experience with [Choreo projects](https://wso2.com/choreo/) by providing a wide range of project and component management capabilities. Learn more about [Choreo](https://wso2.com/choreo/docs/).
 
 ## Get started
 
 You need an active Choreo account to utilize the capabilities of the Choreo extension in the VS Code editor. If you already have a Choreo account, follow the steps below to set up the extension.
 
-1. Install the Choreo extension from the [Visual Studio Code Marketplace](https://marketplace.visualstudio.com/) and wait for activation.
-2. Sign in to Choreo using one of the following methods:
-    - Via the **Sign In** prompt displayed upon successful activation of the extension
-    - Via the **Sign In** option, which becomes available when you click the Choreo icon on the activity bar of your VS Code editor
+1. Install the [Choreo VS Code extension](https://marketplace.visualstudio.com/items?itemName=WSO2.choreo) and wait for the extension to be initialized.
 
-    ![Sign In](docs/choreo-extension/images/sign-in.png)
+2.  Sign in to Choreo using one of the following methods.
+    - Via the `Sign In` prompt displayed upon successful initialization of the extension
+    - Via the `Sign In` options available by clicking the Choreo icon on the activity bar of your VS Code editor
 
-The above step redirects you to an external URI to complete the authentication process. If the sign-in is successful, all projects and organizations linked to your Choreo account will be visible in the Choreo activity panel as shown below.
+    ![Sign In](docs/choreo-extension/images/signIn.gif)
 
-![Project & Organization Tree View](docs/choreo-extension/images/projects-and-orgs.png)
+>**Tip:** The above step redirects you to an external URI to complete the authentication process. If the sign-in is successful, the organization linked to your Choreo account will be visible in the Choreo activity panel.
 
 
 ## Create a project
 
->**Tip:** If you already have a Choreo project, you can skip this section and move to the [Clone a Project](#clone-a-project) section.
-
 Follow the steps below to create a new Choreo project directly from VS Code.
 
-1. Execute the **Create new project** command or click the **+** button next to the project list in the Choreo activity panel to run the Choreo.
+>**Tip:** If you already have a Choreo project, you can skip this section and move to the [Open Project](#open-project) section.
 
-2. Complete the new project wizard by providing a GitHub repository if you want to use a mono repo for the project, in which all components will be stored. 
+1. In the Choreo activity panel, click the **Create Project** button to create a new project.
 
-    >**Info:**You may be redirected to GitHub to authorize a repository to be linked to the project.
+    >**Tip:** Alternatively, execute the **Create new project** command in the Command palette.
 
-![New Project Wizard](docs/choreo-extension/images/create-project.gif)
+2. In the **New Choreo Project** pane, complete the new project wizard by specifying appropriate values for the required fields.
 
-## Clone a project
+    >**Tip:** If you want to use a single repo to store all the components of the project, select the **Mono repository** option, and provide a GitHub **Repository** and its **Organization**. This will redirect you to GitHub to authorize a repository to link it to the project.
 
-Cloning a project helps you to easily create a copy of your project in the local environment. Follow the steps below to clone a project. 
+![New Project Wizard](docs/choreo-extension/images/CreateProject.gif)
 
-1. Navigate to the Choreo activity panel.
+## Open project
 
-2. Select the project from the project list. 
+Follow the step below to open an exisiting Choreo project and create a copy of it in the local environment. 
 
-    >**Tip:** This will open the project overview displaying the list of components for that project.
+1. Click **Open Project** button to get the project list present in your organization.
 
-3. Click the **Clone** button to clone the repository and the project locally. 
+2. In the Command palette, select the project from the **PROJECTS** list. 
 
-4. Select a directory to store the project.
+3. Select a directory in your local machine to store the project.
 
-5. Once the project is cloned, click **Open Project** to load it into VS Code. 
+    >**Tip:** Once the project is cloned, it opens as a workspace in VS Code. Each component will be available as a workspace item. 
 
-    >**Info:** Each component will be available as a workspace item. Click the **Open project** button if the project is already cloned.
-
-![Open Project](docs/choreo-extension/images/cloning-project.gif)
+![Open Project](docs/choreo-extension/images/openProject.gif)
 
 ## Design and develop your application
 
-Follow the steps below to design and develop your application.
+Follow the steps below to design and develop your application by adding components to it.
+
+>**Info:** This creates the sources for each component locally in the given repo, and each component will be added as a workspace item in VS Code. To sync your local changes with the Choreo console, you'll need to perform a [push your changes to Choreo](#push-your-changes-to-choreo) step. This will update the Choreo console with the latest version of your components.
+
+1. In the Choreo activity panel, click **Add Component** button.
 
-1. Once the project is opened from the **Project Overview** page, click **Architecture Diagram**.
+2. Specify appropriate values for the required fields to create the new component.
 
-2. Click the **Add Component** button to create components in the Architecture View. 
+3. Once the component is created, **Cell View** is enabled.
 
-    >**Tip:** You can also mark the interactions between components with the **Use APIs** link in the context menu.
+4. Click **+** icon in components section to create components.
 
-![Architecture Diagram](docs/choreo-extension/images/component-creation.gif)
+![Architecture Diagram](docs/choreo-extension/images/CreateComponent.gif)
 
 The above step will create sources for each component locally in the given repo, and each component will be added as a workspace item in VS Code.
 
 ## Push your changes to Choreo
 
-Once you created the components, follow the steps below to Push your changes to Choreo.
+Follow the steps below to push the changes to Choreo after creating the components.
 
-1. Navigate to the **Project Overview** page. 
-    >**Info:** The project overview page will inform you that some of the components have not been pushed to the GitHub repository. You can go to the source control activity and commit and push the new component sources to the repo. Once you push the components, they will be visible on the Choreo platform.
-    
-2. Click **Push Components to Choreo** to upload the local components to the Choreo platform.
+1. In the Component pane, expand the component you need to push to Choreo.
 
-![Push Changes](docs/choreo-extension/images/push-components.gif)
+2. Under Action section, select **Commit and Push** option.
+
+3. Add the respective changes, enter an appropriate commit message, and click **Commit** to commit the changes.
+
+4. Once all the componets are commited, **Push to Choreo** option will be made available.
+
+5. Click **Push to Choreo** to upload the components to the Choreo platform.
+
+    >**Info:** Once you push the components, they will be visible on the Choreo platform. 
+
+![Push Changes](docs/choreo-extension/images/PushToChoreo.gif)
 
 ## Deploy your components
 
 After creating the components, follow the steps below to deploy your components.
 
-1. Navigate to the **Component Deploy** page and deploy them. 
+1. In the [Choreo Console](https://console.choreo.dev/), navigate to the **Deploy** page, to deploy the components. Learn more about [Builds and Deployments](https://wso2.com/choreo/docs/devops-and-ci-cd/builds-and-deployments/)
+
+2. Once the components are deployed, view the build and deployment status from the Choreo activity panel.
+
+## Troubleshoot
 
-2. Once the components are deployed, view the build and deployment status from the **Project Overview**.
+Follow the steps below to troubleshoot Choreo extension issues.
 
-## Troubleshooting
+1. From the main menu, Click **View** and Click **OUTPUT** to open the **OUTPUT** pane.
 
-For troubleshooting, see the Choreo output. To view the Choreo output tab, click **View**, click **Output**, and select **Choreo** from the output list.
+2. From the drop-down menu on the RHS, select **Choreo** to view the Choreo output for troubleshooting.
 
 ## Ask for help