Merge pull request #36101 from rishumehra/search

[RHDEVDOCS-2340] Document ability to quickly search for components and add to your projects from the Topology view

Author: Preeticp

applications/odc-viewing-application-composition-using-topology-view.adoc

@@ -22,6 +22,8 @@ include::modules/odc-interacting-with-applications-and-components.adoc[leveloffs
 
 include::modules/odc-scaling-application-pods-and-checking-builds-and-routes.adoc[leveloffset=+1]
 
+include::modules/odc-adding-components-to-an-existing-project.adoc[leveloffset=+1]
+
 include::modules/odc-grouping-multiple-components.adoc[leveloffset=+1]
 
 include::modules/odc-adding-services-to-application.adoc[leveloffset=+1]

images/odc_add_to_project.png

@@ -14,4 +14,9 @@ navigation menu.
 
 . At the top of the page, select the name of the project that you want to add to.
 
-. Click on a method for adding to your project, and then follow the workflow.
+. Click a method for adding to your project, and then follow the workflow.
+
+[NOTE]
+====
+You can also add components to the topology using quick search.
+====

images/odc_app_grouping_label.png

@@ -0,0 +1,19 @@
+// Module included in the following assemblies:
+//
+// applications/application_life_cycle_management/odc-viewing-application-composition-using-topology-view.adoc
+
+[id="odc-adding-components-to-an-existing-project_{context}"]
+= Adding components to an existing project
+
+.Procedure
+
+. Click *Add to Project* (image:odc_add_to_project.png[title="Add to Project"]) next to left navigation pane or press kbd:[Ctrl+Space]
+. Search for the component and select *Create* or press kbd:[Enter] to add the component to the project and see it in the topology *Graph view*.
+
+.Adding component via quick search
+image::odc_quick_search.png[]
+
+Alternatively, you can also use the *Import from Git*, *Container Image*, *Database*, *From Catalog*, *Operator Backed*, *Helm Charts*, *Samples*, or *Upload JAR file*  options in the context menu by right-clicking in the topology *Graph view* to add a component to your project.
+
+.Context menu to add services
+image::odc_context_project.png[]

images/odc_quick_search.png

@@ -1,26 +1,27 @@
 [id="odc-grouping-multiple-components_{context}"]
 = Grouping multiple components within an application
 
-You can use the *+Add* view to add multiple components or services to your project and use the *Topology* view to group applications and resources within an application group.
-The following procedure adds a MariaDB database service to an existing application with a Node.js component.
-
+You can use the *+Add* view to add multiple components or services to your project and use the topology *Graph view* to group applications and resources within an application group.
 
 .Prerequisites
 
-* Ensure that you have created and deployed a Node.js application on {product-title} using the *Developer* perspective.
+* You have created and deployed minimum two or more components on {product-title} using the *Developer* perspective.
 
 .Procedure
 
-. Create and deploy the MariaDB service to your project:
-.. In the *Developer* perspective, navigate to the *+Add* view and select the *From Catalog* option to view all available services in the *Developer Catalog*.
-.. Select *Databases* to list all the database services and then click *MariaDB* option to see the details for the service.
-.. Click *Instantiate Template* to see an automatically populated template with details for the MariaDB service, and then click *Create* to create and view the MariaDB service in the *Topology* view.
-
-. To add the MariaDB service to the existing application group, press kbd:[Shift]+ drag the *mariadb* pod to the application group that contains the Node.Js component. The MariaDB service is added to the existing application group.
-
-. Click the MariaDB service node and confirm that the `app.kubernetes.io/part-of=<application-name>` label is in the *Labels* section in the *Overview* Panel. Adding a component to an application group automatically adds the required labels to the component.
+* To add a service to the existing application group, press kbd:[Shift]+ drag it to the existing application group. Dragging a component and adding it to an application group adds the required labels to the component.
 +
 .Application grouping
 image::odc_app_grouping_label.png[]
 
+Alternatively, you can also add the component to an application as follows:
+
+. Click the service pod to see the *Overview* panel to the right.
+
+. Click the *Actions* drop-down menu and select *Edit Application Grouping*.
+
+. In the *Edit Application Grouping* dialog box, click the *Application* drop-down list, and select an appropriate application group.
+
+. Click *Save* to add the service to the application group.
+
 You can remove a component from an application group by selecting the component and using kbd:[Shift]+ drag to drag it out of the application group.

modules/adding-to-a-project.adoc

@@ -42,11 +42,3 @@ The application resource name is appended with indicators for the different type
 ====
 Serverless applications take some time to load and display on the *Graph view*. When you deploy a serverless application, it first creates a service resource and then a revision. After that, it is deployed and displayed on the *Graph view*. If it is the only workload, you might be redirected to the *Add* page. After the revision is deployed, the serverless application is displayed on the *Graph view*.
 ====
-
-[NOTE]
-====
-You can also use the context menu by right-clicking in the topology *Graph view* to add a service such as *Import from Git*, *Container Image*, *Database*, *From Catalog*, *Operator Backed*, *Helm Charts*, *Samples*, or *Upload JAR file*  to your project.
-
-.Context menu to add services
-image::odc_context_project.png[]
-====