From 406fe8ef5ff4d39bd6b383c61bebaf413e599f32 Mon Sep 17 00:00:00 2001
From: ecrupper <easton.crupper12@gmail.com>
Date: Wed, 15 Jan 2025 15:24:47 -0600
Subject: [PATCH] adjust

---
 cypress/integration/deployment.spec.js       |  8 +++-
 src/elm/Pages/Org_/Repo_/Deployments/Add.elm | 41 ++++++++++++++++----
 src/scss/_main.scss                          | 37 ++++++++++++++++++
 3 files changed, 77 insertions(+), 9 deletions(-)

diff --git a/cypress/integration/deployment.spec.js b/cypress/integration/deployment.spec.js
index d7f4fcc6..466cd959 100644
--- a/cypress/integration/deployment.spec.js
+++ b/cypress/integration/deployment.spec.js
@@ -81,7 +81,13 @@ context('Deployment', () => {
       cy.login('/github/octocat/deployments');
       cy.get('[data-test=cell-list-item-parameters]')
         .should('exist')
-        .contains('DEPLOYMENT_PARAMETER_FOO=bar');
+        .contains('foo=bar');
+    });
+    it('deployments table should list parameters copy text', () => {
+      cy.login('/github/octocat/deployments');
+      cy.get('[data-test=copy-parameter-foo]')
+        .should('exist')
+        .contains('$DEPLOYMENT_PARAMETER_FOO');
     });
   });
 });
diff --git a/src/elm/Pages/Org_/Repo_/Deployments/Add.elm b/src/elm/Pages/Org_/Repo_/Deployments/Add.elm
index b0eeecc8..9284a806 100644
--- a/src/elm/Pages/Org_/Repo_/Deployments/Add.elm
+++ b/src/elm/Pages/Org_/Repo_/Deployments/Add.elm
@@ -12,8 +12,9 @@ import Components.Loading as Loading
 import Components.Nav
 import Dict exposing (Dict, empty)
 import Effect exposing (Effect)
+import FeatherIcons
 import Html exposing (a, button, code, div, em, h2, label, main_, p, section, small, span, strong, text)
-import Html.Attributes exposing (class, disabled, for, href, id)
+import Html.Attributes exposing (attribute, class, disabled, for, href, id)
 import Html.Events exposing (onClick)
 import Http
 import Http.Detailed
@@ -582,14 +583,38 @@ view shared route model =
                             if List.length model.parameters > 0 then
                                 let
                                     viewParameter parameter =
-                                        div [ class "parameter", class "chevron" ]
-                                            [ div [ class "name" ] [ text ("DEPLOYMENT_PARAMETER_" ++ (String.toUpper parameter.key) ++ "=" ++ parameter.value) ]
-                                            , button
-                                                [ class "button"
-                                                , class "-outline"
-                                                , onClick <| RemoveParameter parameter
+                                        div [ class "set-parameter" ]
+                                            [ div [ class "parameter", class "chevron" ]
+                                                [ div [ class "name" ] [ text (parameter.key ++ "=" ++ parameter.value) ]
+                                                , button
+                                                    [ class "button"
+                                                    , class "-outline"
+                                                    , onClick <| RemoveParameter parameter
+                                                    ]
+                                                    [ text "remove"
+                                                    ]
                                                 ]
-                                                [ text "remove"
+                                            , div [ class "small no-wrap" ]
+                                                [ span 
+                                                    [ class "copy-text" 
+                                                    , Util.testAttribute ("copy-parameter-" ++ parameter.key)
+                                                    ] 
+                                                    [ text ("$DEPLOYMENT_PARAMETER_" ++ String.toUpper parameter.key) ]
+                                                , div [ class "vert-icon-container" ]
+                                                    [ button
+                                                        [ class "copy-button"
+                                                        , class "button"
+                                                        , class "-icon"
+                                                        , class "-white"
+                                                        , attribute "data-clipboard-text" ("$DEPLOYMENT_PARAMETER_" ++ String.toUpper parameter.key)
+                                                        , attribute "aria-label" "copy token"
+                                                        , Util.testAttribute "copy-token"
+                                                        ]
+                                                        [ FeatherIcons.copy
+                                                            |> FeatherIcons.withSize 18
+                                                            |> FeatherIcons.toHtml []
+                                                        ]
+                                                    ]
                                                 ]
                                             ]
                                 in
diff --git a/src/scss/_main.scss b/src/scss/_main.scss
index 55054fb0..92ba5a9f 100644
--- a/src/scss/_main.scss
+++ b/src/scss/_main.scss
@@ -1650,6 +1650,11 @@ details.build-toggle {
   align-items: flex-start;
 }
 
+.set-parameter {
+  display: flex;
+  align-items: center;
+}
+
 .image,
 .parameter {
   position: relative;
@@ -1871,3 +1876,35 @@ select {
 .custom-select-container .custom-select-options:not(.hidden) {
   display: block;
 }
+
+.small.no-wrap {
+  display: flex;
+  align-items: center;
+
+  font-size: 0.8em;
+  white-space: nowrap;
+}
+
+.copy-text {
+  margin-right: 5px;
+  margin-left: 5px;
+
+  font-weight: bold;
+  font-family: monospace;
+
+  background-color: var(--color-bg-dark);
+}
+
+.copy-button {
+  margin-left: 5px;
+  padding: 0;
+
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+
+.copy-icon {
+  font-size: 0.8em;
+  /* Add additional styling for the icon if needed */
+}