feat: add preview of filepaths to project settings source and target connection dropdowns (#877)

Author: luisamiranda

src/react/components/common/connectionPicker/connectionPicker.tsx

@@ -58,7 +58,7 @@ export class ConnectionPicker extends React.Component<IConnectionPickerProps, IC
                         <option
                             className="connection-option"
                             key={connection.id}
-                            value={connection.id}>{connection.name}
+                            value={connection.id}>{this.getConnectionText(connection)}
                         </option>)
                     }
                 </select>
@@ -71,6 +71,18 @@ export class ConnectionPicker extends React.Component<IConnectionPickerProps, IC
         );
     }
 
+    private getConnectionText = (connection: IConnection): string => {
+        const options = connection.providerOptions;
+
+        if (options["folderPath"]) {
+            return `${connection.name} (${options["folderPath"]})`;
+        } else if (options["accountName"]) {
+            return `${connection.name} (Azure:${options["accountName"]}\\${options["containerName"]})`;
+        } else {
+            return connection.name;
+        }
+    }
+
     private onChange = (e) => {
         const selectedConnection = this.props.connections
             .find((connection) => connection.id === e.target.value) || {};