Merge pull request #615 from hashicorp/update-connect-dialog

chore: Update components in connect dialog to latest

addons/core/translations/resources/en-us.yaml

@@ -147,6 +147,11 @@ session:
       description: No active sessions available to display yet.
   actions:
     connect: Connect
+  credential:
+    title: Credential
+    title_plural: Credentials
+    actions:
+      detail: Credential library details
 org:
   title: Org
   title_plural: Orgs

ui/desktop/app/styles/app.scss

@@ -395,14 +395,20 @@ $chevron-down: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231
   }
 
   &:not([open]) {
+    .reveal-trigger-text-close {
+      background: $chevron-down no-repeat right center;
+      padding-right: sizing.rems(l);
+    }
+
     .reveal-trigger-text-open {
       display: none;
     }
   }
 
   &[open] {
-    .reveal-trigger {
-      background: url($chevron-up) no-repeat right center;
+    .reveal-trigger-text-open {
+      background: $chevron-up no-repeat right center;
+      padding-right: sizing.rems(l);
     }
 
     .reveal-trigger-text-close {
@@ -422,8 +428,8 @@ $chevron-down: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231
     align-items: center;
     border-bottom: sizing.rems(xxxxs) solid var(--ui-gray-subtler-3);
     display: flex;
-    justify-content: flex-start;
-    padding: sizing.rems(s) sizing.rems(m);
+    justify-content: space-between;
+    padding: sizing.rems(s) sizing.rems(s);
 
     h2 {
       @include type.type(s, normal);

ui/desktop/app/templates/scopes/scope/projects/targets.hbs

@@ -19,7 +19,8 @@
         >
           <:body>
             <h3>{{t 'resources.target.messages.proxy_url.title'}}
-              (<code>{{t 'resources.target.types.tcp'}}</code>)</h3>
+              {{!-- (<code>{{t 'resources.target.types.tcp'}}</code>)</h3> --}}
+              ({{t 'resources.target.types.tcp'}})</h3>
             <p>
               <Copyable
                 @text={{session.proxy}}
@@ -30,21 +31,41 @@
               </Copyable>
             </p>
 
-            {{!-- <Rose::Separator />
+            <Rose::Separator />
 
-            <h3>Credentials</h3>
-
-            <Card @heading="Credentials" @icon='app-icons/credentials'>
+            {{! TODO: Conditional for when credentials aren't available
+            older versions of cli }}
+            <h3>{{t 'resources.session.credential.title_plural'}}</h3>
+            {{!-- <Card
+              @heading={{t 'resources.session.credential.title'}}
+              @icon='app-icons/credentials'
+            >
               <:header>
                 <Rose::Dropdown
-                  @style="condensed"
-                  @text="Credential library details"
-                  @showCaret={{true}}
+                  @text={{t 'resources.session.credential.actions.detail'}}
+                  @style='condensed'
+                  @dropdownRight={{true}}
                   as |dropdown|
                 >
+                  <dropdown.key-value>
+                    <:key>{{t 'form.id.label'}}</:key>
+                    <:value>cl_nbv9375hLHs</:value>
+                  </dropdown.key-value>
+                  <dropdown.key-value>
+                    <:key>{{t 'form.name.label'}}</:key>
+                    <:value>Key/Value</:value>
+                  </dropdown.key-value>
+                  <dropdown.key-value>
+                    <:key>{{t 'form.description.label'}}</:key>
+                    <:value>Lorem ipsum dolor, sit amet consectetur adipisicing
+                      elit. Ut nobis, nemo cum omnis saepe reprehenderit eaque
+                      non odit iste magni quod voluptatem soluta dolor beatae
+                      libero consequatur, perferendis rem molestias.</:value>
+                  </dropdown.key-value>
                 </Rose::Dropdown>
               </:header>
               <:body>
+                {{! TODO: Iterate through all credentials }}
                 <Rose::Table @style='condensed' as |table|>
                   <table.header as |header|>
                     <header.row as |row|>
@@ -71,18 +92,13 @@
                 >
                   <pre>
                     <code>
-  {
-    "auth": null,
-    "lease_duration": 3600,
-    "lease_id": "",
-    "renewable": false
-  }
+                      { "auth": null, "lease_duration": 3600, "lease_id": "",
+                      "renewable": false }
                     </code>
                   </pre>
                 </Reveal>
               </:footer>
             </Card> --}}
-
           </:body>
           <:footer>
             <div>
@@ -93,15 +109,6 @@
                 {{t 'actions.close'}}
               </Rose::Button>
             </div>
-            <div>
-              {{! <Rose::LinkButton
-              @route='index'
-              @style='inline-link-action'
-              @iconRight='chevron-right'
-            >
-
-            </Rose::LinkButton> }}
-            </div>
           </:footer>
         </DialogDetail>
       {{/unless}}