UI: Create version card (#8710) (#8744)

* setup version card

* folder restructure

* Adding todos, removing test

Co-authored-by: Dan Rivera <dan.rivera@hashicorp.com>

ui/app/components/secret-engine/card/metadata.ts

@@ -9,7 +9,7 @@ interface Args {
   model: SecretsEngineResource;
 }
 
-export default class MetadataCard extends Component<Args> {
+export default class Metadata extends Component<Args> {
   constructor(owner: unknown, args: Args) {
     super(owner, args);
   }

ui/app/components/secret-engine/card/version.hbs

@@ -0,0 +1,37 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: BUSL-1.1
+}}
+<Hds::Card::Container @level="mid" @hasBorder={{true}} class="has-padding-s has-top-bottom-margin-12">
+  <Hds::Text::Display @size="300">Version</Hds::Text::Display>
+
+  {{! TODO: Having this set up with flex for now, grid might be better? }}
+  <div class="flex gap-36 has-top-margin-l">
+    <div class="flex is-flex-column row-gap-8">
+      <Hds::Text::Display>Engine type</Hds::Text::Display>
+      <Hds::Text::Display>Current version</Hds::Text::Display>
+      <Hds::Text::Display>Latest version</Hds::Text::Display>
+    </div>
+
+    <div class="flex is-flex-column is-flex-align-start row-gap-12">
+      <Hds::Text::Body @tag="p" class="hds-border-strong side-padding-4 border-radius-4">{{@model.type}}</Hds::Text::Body>
+      {{! TODO: Verify if we want to display the full version or chop down ie. v0.17.1 vs v0.17.1-0.230942309423094... }}
+      <Hds::Text::Body @tag="p">{{@model.running_plugin_version}}</Hds::Text::Body>
+      {{! TODO: leaving as is for now to match design, but we might be removing this if we cant get latest version from some source }}
+      <Hds::Text::Body @tag="p">v.12.46</Hds::Text::Body>
+    </div>
+  </div>
+
+  <Hds::Separator />
+
+  <div>
+    <Hds::Text::Display @tag="h1" class="has-bottom-margin-s">Update version to:</Hds::Text::Display>
+    <Hds::Dropdown @listPosition="bottom-left" as |D|>
+      <D.ToggleButton @text="Select version" @color="secondary" />
+      {{! TODO: Update interactives with available versions from API }}
+      <D.Interactive>12.32</D.Interactive>
+      <D.Interactive>12.4</D.Interactive>
+      <D.Interactive>12.42</D.Interactive>
+    </Hds::Dropdown>
+  </div>
+</Hds::Card::Container>

ui/app/components/secret-engine/card/version.ts

@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import Component from '@glimmer/component';
+import SecretsEngineResource from 'vault/resources/secrets/engine';
+interface Args {
+  model: SecretsEngineResource;
+}
+
+export default class Version extends Component<Args> {
+  constructor(owner: unknown, args: Args) {
+    super(owner, args);
+  }
+}

ui/app/styles/helper-classes/flexbox-and-grid.scss

@@ -29,6 +29,10 @@
     row-gap: size_variables.$spacing-8;
   }
 
+  &.row-gap-12 {
+    row-gap: size_variables.$spacing-12;
+  }
+
   &.column-gap-8 {
     column-gap: size_variables.$spacing-8;
   }