(DOCSP-7512) Document new UI for Favorite Connections (#204)

* Updates for new favorite ux

* WIP

* (DOCSP-7512) Document new UI for Favorite Connections

* Changes based on review

* Fix bullet list, typo

* Changes from review

Author: zach-carr

source/connect/favorite-connections.txt

@@ -12,18 +12,34 @@ Favorite Connections
    :depth: 1
    :class: singlecol
 
-|compass| allows you to save MongoDB connection configurations to
+|compass-short| allows you to save MongoDB connection configurations to
 easily reconnect to the same MongoDB deployment using the same
 specifications.
 
 Save a Favorite Connection
 --------------------------
 
+You can save a favorite connection from the initial
+:ref:`connect screen <connect-run-compass>`, or after you have
+successfully connected to a MongoDB deployment.
+
+Save from Connect Screen
+~~~~~~~~~~~~~~~~~~~~~~~~
+
 .. include:: /includes/steps/favorite-connection-save.rst
 
-.. figure:: /images/compass/favorite-connection.png
-   :figwidth: 500px
-   :alt: Image showing Favorite Connection in Compass
+Save after Connecting to a Deployment
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+.. include:: /includes/steps/favorite-connection-save-deployment.rst
+
+Once you save your favorite connection, |compass-short| displays the
+connection in the :guilabel:`Favorites` section of the left navigation 
+panel.
+
+.. figure:: /images/compass/saved-favorite-connection.png
+   :figwidth: 600px
+   :alt: Saved Favorite Connection
 
 Edit a Favorite Connection
 --------------------------

source/images/compass/favorite-button-connect.png

@@ -1,17 +1,24 @@
-title: Click the desired connection under :guilabel:`Favorites` to
-   the left of the :guilabel:`Connect to Host` form.
+title: Click the desired connection under :guilabel:`Favorites`
+  in the left navigation panel.
 level: 4
 ref: click-connection
+---
+title: Click the :icon-fa5:`ellipsis-h` button on the connection.
+level: 4
+ref: click-ellipsis
 content: |
   .. figure:: /images/compass/favorite-connection-select.png
-     :figwidth: 500px
-     :alt: Image showing selecting Favorite Connection in Compass
+     :figwidth: 400px
+     :alt: Image showing selecting Favorite Connection dropdown
+
+  |compass-short| displays a dropdown menu with options 
+  :guilabel:`Copy` and :guilabel:`Remove`.
 ---
-title: Click :guilabel:`Delete Favorite` at the bottom of the form.
+title: Click :guilabel:`Remove` from the dropdown menu.
 level: 4
 ref: click-delete
 content: |
-  |compass| removes the connection from the :guilabel:`Favorites` list
-  and returns the :guilabel:`Connect to Host` form to the default
+  |compass-short| removes the connection from the :guilabel:`Favorites` 
+  list and returns the :guilabel:`New Connection` form to the default
   state.
 ...

source/images/compass/favorite-button-connect.xcf

@@ -1,18 +1,32 @@
-title: Click the desired connection under :guilabel:`Favorites` to
-   the left of the :guilabel:`Connect to Host` form.
+title: Click the desired connection under :guilabel:`Favorites`
+  in the left navigation panel.
 level: 4
-ref: click-connection
+ref: locate-connection
 content: |
-  .. figure:: /images/compass/favorite-connection-select.png
-     :figwidth: 500px
-     :alt: Image showing selecting Favorite Connection in Compass
+  .. figure:: /images/compass/saved-favorite-connection.png
+     :figwidth: 600px
+     :alt: Saved Favorite Connection
+  
+  To :guilabel:`Copy` or :guilabel:`Remove` a Favorite Connection, 
+  hover over the target connection and click the :icon-fa5:`ellipsis-h` 
+  button.
+  
+  - Copying a connection creates another Favorite Connection with the 
+    same configuration. 
+  
+  - Removing a connection deletes that Favorite Connection.
+
 ---
 title: Make the desired changes to the connection configuration
-   within the form.
+  within the form.
 level: 4
 ref: make-connection-changes
+content: |
+  When you make any change to a connection, a dialog will appear at the 
+  bottom of the form with options :guilabel:`Discard` and 
+  :guilabel:`Save Changes`.
 ---
-title: Click :guilabel:`Save Favorite` at the bottom of the form.
+title: Click :guilabel:`Save Changes`.
 level: 4
 ref: click-create-favorite
 ...

source/images/compass/favorite-connection-select.png

@@ -0,0 +1,27 @@
+title: Click :guilabel:`Favorite` on the left navigation panel.
+level: 4
+ref: save-connection
+content: |
+
+  .. figure:: /images/compass/save-favorite-menu.png
+     :figwidth: 600px
+     :alt: Save connection to favorites from menu
+
+---
+title: Enter a name for this favorite connection.
+level: 4
+ref: enter-favorite-name
+content: |
+  .. figure:: /images/compass/name-favorite-connection-menu.png
+      :figwidth: 600px
+      :alt: Name Favorite Connection
+---
+title: (Optional) Select a color for your favorite to more easily
+  identify the favorite connection.
+level: 4
+ref: select-favorite-color
+---
+title: Click :guilabel:`Save`.
+level: 4
+ref: save-favorite
+...

source/images/compass/name-favorite-connection-menu.png

@@ -1,18 +1,30 @@
-title: Configure your :guilabel:`Connect To Host` form with a
-  connection you would like to save.
+title: Configure your connection form with a connection you would like
+  to save.
 level: 4
 ref: configure-host-form
 ---
-title: Type a :guilabel:`Favorite Name` into the :guilabel:`Favorite
-  Name` input.
+title: Click :guilabel:`Favorite` at the top of the form.
 level: 4
 ref: type-favorite-name
 content: |
-   |compass| allows you to reuse the same :guilabel:`Favorite Name` for
-   multiple connections, but this is not recommended practice as it can
-   become difficult to maintain connections with the same name.
+   .. figure:: /images/compass/favorite-button-connect.png
+      :figwidth: 600px
+      :alt: Favorite Connection Button
 ---
-title: Click :guilabel:`Create Favorite`.
+title: Enter a name for this favorite connection.
 level: 4
-ref: click-create-favorite
+ref: enter-favorite-name
+content: |
+  .. figure:: /images/compass/name-favorite-connection.png
+      :figwidth: 600px
+      :alt: Name Favorite Connection
+---
+title: (Optional) Select a color for your favorite to more easily
+  identify the favorite connection.
+level: 4
+ref: select-favorite-color
+---
+title: Click :guilabel:`Save`.
+level: 4
+ref: save-favorite
 ...