Code Snippet Updates (#22917)

* updates code-snippet component styling and adds it to ldap library accounts view

* adds comment back in to code-snippet template

ui/app/styles/components/code-snippet.scss

@@ -1,20 +0,0 @@
-.code-snippet-container {
-  background-color: $ui-gray-900;
-  display: flex;
-  justify-content: space-between;
-  border-radius: $radius-large;
-
-  code {
-    white-space: pre;
-  }
-}
-
-.code-snippet-copy-button {
-  cursor: pointer;
-  color: $ui-gray-300;
-  background: none;
-  border: none;
-  box-shadow: none;
-  min-width: auto;
-  padding: $size-11 $size-8;
-}

ui/app/styles/core.scss

@@ -60,7 +60,6 @@
 @import './components/box-radio';
 @import './components/calendar-widget';
 @import './components/codemirror';
-@import './components/code-snippet';
 @import './components/confirm';
 @import './components/console-ui-panel';
 @import './components/control-group';

ui/lib/core/addon/components/code-snippet.hbs

@@ -3,13 +3,15 @@
   SPDX-License-Identifier: BUSL-1.1
 ~}}
 
-<div data-test-code-snippet class="code-snippet-container" ...attributes>
-  <code class="text-grey-lightest">
-    {{@codeBlock}}
-  </code>
+<div
+  class="has-padding-s has-background-gray-900 border-radius-4 is-flex-between is-flex-center"
+  data-test-code-snippet
+  ...attributes
+>
+  <code class="has-text-white is-size-7">{{@codeBlock}}</code>
   {{! replace with Hds::Copy::Button }}
   <CopyButton
-    class="code-snippet-copy-button"
+    class="button is-compact is-transparent has-text-grey-light"
     @clipboardText={{or @clipboardCode @codeBlock}}
     @buttonType="button"
     @success={{action (set-flash-message "Code copied!")}}

ui/lib/ldap/addon/components/page/library/details/accounts.hbs

@@ -1,39 +1,41 @@
-<div class="has-top-margin-l is-flex-align-start">
-  <Hds::Card::Container @level="mid" @hasBorder={{true}} class="has-padding-l is-flex-half border-radius-2">
-    <div class="is-flex-between">
-      <h3 class="is-size-5 has-text-weight-semibold">All accounts</h3>
-      {{#if @library.canCheckOut}}
-        <button
-          type="button"
-          class="button is-link"
-          data-test-check-out
-          {{on "click" (fn (mut this.showCheckOutPrompt) true)}}
-        >
-          Check-out
-        </button>
-      {{/if}}
-    </div>
+<div class="is-grid has-top-margin-l grid-2-columns grid-gap-2">
+  <div>
+    <Hds::Card::Container @level="mid" @hasBorder={{true}} class="has-padding-l is-flex-half border-radius-2">
+      <div class="is-flex-between">
+        <h3 class="is-size-5 has-text-weight-semibold">All accounts</h3>
+        {{#if @library.canCheckOut}}
+          <button
+            type="button"
+            class="button is-link"
+            data-test-check-out
+            {{on "click" (fn (mut this.showCheckOutPrompt) true)}}
+          >
+            Check-out
+          </button>
+        {{/if}}
+      </div>
 
-    <p class="has-text-grey is-size-8">The accounts within this library</p>
-    <hr class="has-background-gray-200" />
+      <p class="has-text-grey is-size-8">The accounts within this library</p>
+      <hr class="has-background-gray-200" />
 
-    <Hds::Table @model={{@statuses}} @columns={{array (hash label="Accounts") (hash label="Status")}}>
-      <:body as |Body|>
-        <Body.Tr>
-          <Body.Td data-test-account-name={{Body.data.account}}>{{Body.data.account}}</Body.Td>
-          <Body.Td>
-            <Hds::Badge
-              @text={{if Body.data.available "Available" "Unavailable"}}
-              @color={{if Body.data.available "success" "neutral"}}
-              data-test-account-status={{Body.data.account}}
-            />
-          </Body.Td>
-        </Body.Tr>
-      </:body>
-    </Hds::Table>
-  </Hds::Card::Container>
+      <Hds::Table @model={{@statuses}} @columns={{array (hash label="Accounts") (hash label="Status")}}>
+        <:body as |Body|>
+          <Body.Tr>
+            <Body.Td data-test-account-name={{Body.data.account}}>{{Body.data.account}}</Body.Td>
+            <Body.Td>
+              <Hds::Badge
+                @text={{if Body.data.available "Available" "Unavailable"}}
+                @color={{if Body.data.available "success" "neutral"}}
+                data-test-account-status={{Body.data.account}}
+              />
+            </Body.Td>
+          </Body.Tr>
+        </:body>
+      </Hds::Table>
+    </Hds::Card::Container>
+  </div>
 
-  <div class="has-left-margin-l is-flex-half">
+  <div>
     <AccountsCheckedOut
       @libraries={{array @library}}
       @statuses={{@statuses}}
@@ -46,19 +48,7 @@
       @subText="Use the CLI command below:"
       class="has-padding-l has-top-margin-l"
     >
-      <div class="has-padding-s has-background-gray-900 border-radius-4 is-flex-between has-top-margin-s">
-        <code class="has-text-white is-size-7" data-test-cli-command>{{this.cliCommand}}</code>
-        <CopyButton
-          class="button is-compact is-transparent has-text-grey-light"
-          data-test-cli-command-copy
-          @clipboardText={{this.cliCommand}}
-          @buttonType="button"
-          @success={{action (set-flash-message "Renew command copied!")}}
-        >
-          Copy
-          <Icon @name="clipboard-copy" aria-label="Copy" />
-        </CopyButton>
-      </div>
+      <CodeSnippet @codeBlock={{this.cliCommand}} class="has-top-margin-s" />
     </OverviewCard>
   </div>
 </div>

ui/tests/integration/components/ldap/page/library/details/accounts-test.js

@@ -77,8 +77,7 @@ module('Integration | Component | ldap | Page::Library::Details::Accounts', func
     assert.dom('[data-test-checked-out-card]').exists('Accounts checked out card renders');
 
     assert
-      .dom('[data-test-cli-command]')
+      .dom('[data-test-code-snippet] code')
       .hasText('vault lease renew ad/library/test-library/check-out/:lease_id', 'Renew cli command renders');
-    assert.dom(`[data-test-cli-command-copy]`).exists('Renew cli command copy button renders');
   });
 });