Update provenance component design (#5330)

rubygems · Dec 13, 2024 · 3f30c59 · 3f30c59
1 parent 5b8a493
commit 3f30c59
Show file tree

Hide file tree

Showing 4 changed files with 190 additions and 30 deletions.
diff --git a/app/assets/stylesheets/modules/gem.css b/app/assets/stylesheets/modules/gem.css
@@ -267,21 +267,147 @@
 }
 
 .gem__attestation {
+  align-items: center;
   display: flex;
   flex-direction: row;
-  margin-top: 16px; }
-  .gem__attestation__built_on {
-    flex-grow: 1; }
+  gap: 10px;
+  padding: 0;
+}
+
+.gem__attestation:not(:first-child) {
+  margin-top: 16px;
+}
+
+.gem__attestation__built_on {
+  border: 1px solid #d7dee3;
+  border-radius: 8px;
+  box-shadow: 2px 2px 7px 0 #00000008;
+  display: flex;
+  flex-shrink: 0;
+  gap: 16px;
+  padding: 20px;
+}
+
+.gem__attestation__built_on__github_actions {
+  align-items: center;
+  aspect-ratio: 1/1;
+  background: #ffeedd;
+  background-color: #f0f2f5;
+  border: 1px solid #f74c27;
+  border-radius: 7px;
+  box-sizing: border-box;
+  display: flex;
+  flex: none;
+  flex-direction: row;
+  flex-grow: 0;
+  gap: 10px;
+  min-width: 72px;
+  order: 0;
+  padding: 12px;
+}
+
+.gem__attestation__built_on__info {
+  align-items: flex-start;
+
+  /* Frame 1197136313 */
+
+  /* Auto layout */
+  display: flex;
+  flex-direction: column;
+  font-size: 12px;
+  font-weight: 400;
+  gap: 4px;
+  height: fit-content;
+  line-height: 24px;
+  padding: 0;
+  text-align: left;
+  text-decoration-skip-ink: none;
+  text-underline-position: from-font;
+}
+
+.gem__attestation__built_on__info em {
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 600;
+  color: #333a45;
+}
+
+.gem__attestation__built_on__info a {
+  color: #f74c27;
+  text-decoration: underline;
+}
+
+.gem__attestation__grid {
+  box-sizing: border-box;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 10px;
+  padding: 20px;
+  width: 100%;
+}
+
+.gem__attestation__grid > div {
+  align-items: baseline;
+  display: flex;
+  flex-direction: row;
+  gap: 16px;
+  place-content: space-between;
+}
+
+.gem__attestation__grid p {
+  font-size: 14px;
+  font-weight: 600;
+  height: 100%;
+}
+
+.gem__attestation__grid a {
+  align-items: center;
+  color: var(--gem-version-color);
+  display: flex;
+  flex-direction: row;
+  font-size: 14px;
+  font-weight: 400;
+  height: 100%;
+  text-align: end;
+  text-decoration: none;
+  width: 100%;
+}
+
+.gem__attestation__grid a::after {
+  content: url('data:image/svg+xml;utf8,<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.8074 2.5574C5.86545 2.49919 5.93442 2.45301 6.01035 2.42151C6.08629 2.39 6.16769 2.37378 6.2499 2.37378C6.33211 2.37378 6.41351 2.39 6.48944 2.42151C6.56537 2.45301 6.63434 2.49919 6.6924 2.5574L14.1924 10.0574C14.2506 10.1155 14.2968 10.1844 14.3283 10.2604C14.3598 10.3363 14.376 10.4177 14.376 10.4999C14.376 10.5821 14.3598 10.6635 14.3283 10.7394C14.2968 10.8154 14.2506 10.8843 14.1924 10.9424L6.6924 18.4424C6.57504 18.5598 6.41587 18.6257 6.2499 18.6257C6.08393 18.6257 5.92475 18.5598 5.8074 18.4424C5.69004 18.325 5.62411 18.1659 5.62411 17.9999C5.62411 17.8339 5.69004 17.6748 5.8074 17.5574L12.8661 10.4999L5.8074 3.4424C5.74919 3.38434 5.70301 3.31537 5.67151 3.23944C5.64 3.16351 5.62378 3.08211 5.62378 2.9999C5.62378 2.91769 5.64 2.83629 5.67151 2.76035C5.70301 2.68442 5.74919 2.61545 5.8074 2.5574Z" fill="%23333A45"/></svg>');
+  display: inline-block;
+  height: 1rem;
+  vertical-align: middle;
+}
+
+@media (width <= 929px) {
   .gem__attestation__grid {
-    display: grid;
-    grid-template-rows: repeat(3, 1rem);
-    grid-row-gap: 18px;
-    grid-column-gap: 16px; }
-    .gem__attestation__grid p {
-      height: 100%;
-      display: block; }
-    .gem__attestation__grid__left {
-      grid-template-columns: 24px max-content; }
-    .gem__attestation__grid__right {
-      grid-template-columns: max-content 1fr; }
+    padding: 10px;
+  }
+
+  .gem__attestation__grid > div {
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  .gem__attestation {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 16px;
+    width: 100%;
+  }
 
+  .gem__attestation__grid a {
+    justify-content: space-between;
+  }
+
+  .gem__attestation__grid p {
+    width: 100%;
+  }
+
+  .gem__attestation__built_on {
+    box-sizing: border-box;
+    width: 100%;
+  }
+}
diff --git a/app/models/attestation.rb b/app/models/attestation.rb
@@ -37,9 +37,10 @@ def display_data # rubocop:disable Metrics/MethodLength
       build_file_string = ::Regexp.last_match(1)
       {
         ci_platform: "GitHub Actions",
-        source_commit_string: "github.com/#{repo}@#{commit[0, 7]}",
+        source_commit_string: "#{repo}@#{commit[0, 7]}",
         source_commit_url: "https://github.com/#{repo}/tree/#{commit}",
-        build_file_string:, build_file_url:
+        build_file_string:, build_file_url:,
+        build_summary_url: "https://github.com/#{repo}/actions/runs/#{build_file_string}"
       }
     else
       raise "Unhandled issuer: #{issuer.inspect}"

diff --git a/app/views/components/version/provenance_component.rb b/app/views/components/version/provenance_component.rb
@@ -8,25 +8,51 @@ class Version::ProvenanceComponent < ApplicationComponent
   def view_template
     display_data = @attestation.display_data
 
-    div(class: "gem__attestation") do
+    div(class: "gem__attestation", id: "gem__attestation") do
       div(class: "gem__attestation__built_on") do
-        div(class: "gem__attestation__grid gem__attestation__grid__left") do
-          p
-          p { plain "Built and signed on" }
-          p { "✅" }
-          p { display_data[:ci_platform] }
+        provider_box(display_data)
+      end
+      div(class: "gem__attestation__grid gem__attestation__grid__right") do
+        div do
+          p { plain "Source Commit" }
+          p { link_to display_data[:source_commit_string], display_data[:source_commit_url] }
+        end
+        div do
+          p { plain "Build File" }
+          p { link_to display_data[:build_file_string], display_data[:build_file_url] }
+        end
+        div do
           p
-          p { link_to "Build summary", display_data[:build_summary_url], target: "_blank", rel: "noopener" }
+          p { link_to "transparency log entry", "https://search.sigstore.dev/?logIndex=#{display_data[:log_index]}" }
         end
       end
-      div(class: "gem__attestation__grid gem__attestation__grid__right") do
-        p { plain "Source Commit" }
-        p { link_to display_data[:source_commit_string], display_data[:source_commit_url] }
-        p { plain "Build File" }
-        p { link_to display_data[:build_file_string], display_data[:build_file_url] }
-        p { plain "Public Ledger" }
-        p { link_to "Transparency log entry", "https://search.sigstore.dev/?logIndex=#{display_data[:log_index]}" }
+    end
+  end
+
+  def provider_box(display_data)
+    case display_data[:ci_platform]
+    when "GitHub Actions"
+      div(class: "gem__attestation__built_on__github_actions") do
+        unsafe_raw <<~SVG
+          <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <g clip-path="url(#clip0_4057_86606)">
+            <path d="M21.968 27.672C21.7033 27.6719 21.4494 27.5669 21.262 27.38L19.772 25.894C19.6764 25.8019 19.6 25.6916 19.5475 25.5697C19.4949 25.4478 19.4671 25.3166 19.4658 25.1838C19.4644 25.0511 19.4896 24.9194 19.5397 24.7964C19.5898 24.6734 19.6639 24.5617 19.7576 24.4677C19.8514 24.3736 19.9629 24.2992 20.0857 24.2488C20.2086 24.1983 20.3402 24.1728 20.473 24.1738C20.6058 24.1748 20.737 24.2022 20.8591 24.2544C20.9812 24.3066 21.0916 24.3826 21.184 24.478L21.968 25.26L24.33 22.9C24.5175 22.7122 24.7719 22.6066 25.0373 22.6064C25.3027 22.6063 25.5572 22.7115 25.745 22.899C25.9328 23.0865 26.0384 23.3409 26.0386 23.6063C26.0387 23.8717 25.9335 24.1262 25.746 24.314L22.676 27.38C22.4876 27.5667 22.2332 27.6716 21.968 27.672ZM40.674 27.378L43.742 24.314C43.9242 24.1254 44.025 23.8728 44.0227 23.6106C44.0204 23.3484 43.9152 23.0976 43.7298 22.9122C43.5444 22.7268 43.2936 22.6216 43.0314 22.6193C42.7692 22.617 42.5166 22.7178 42.328 22.9L39.966 25.26L39.182 24.478C39.0896 24.3826 38.9792 24.3066 38.8571 24.2544C38.735 24.2022 38.6038 24.1748 38.471 24.1738C38.3382 24.1728 38.2066 24.1983 38.0837 24.2488C37.9609 24.2992 37.8494 24.3736 37.7556 24.4677C37.6619 24.5617 37.5878 24.6734 37.5377 24.7964C37.4876 24.9194 37.4624 25.0511 37.4638 25.1838C37.4651 25.3166 37.4929 25.4478 37.5455 25.5697C37.598 25.6916 37.6744 25.8019 37.77 25.894L39.262 27.38C39.3545 27.4731 39.4646 27.547 39.5859 27.5973C39.7071 27.6476 39.8371 27.6735 39.9684 27.6733C40.0997 27.6731 40.2296 27.6469 40.3507 27.5962C40.4719 27.5455 40.5817 27.4714 40.674 27.378ZM9.054 14.904L14.168 11.734C14.4567 11.5553 14.6952 11.3061 14.861 11.0098C15.0268 10.7135 15.1144 10.3799 15.1156 10.0403C15.1168 9.7008 15.0316 9.36655 14.8679 9.06907C14.7042 8.7716 14.4675 8.5207 14.18 8.34L9.066 5.12C8.76344 4.9294 8.41531 4.82341 8.05787 4.81307C7.70042 4.80272 7.34675 4.8884 7.03366 5.06117C6.72058 5.23395 6.45955 5.48751 6.27775 5.79544C6.09596 6.10337 6.00004 6.45441 6 6.812V13.204C6.00059 13.5602 6.09619 13.9098 6.27695 14.2167C6.45771 14.5236 6.71707 14.7767 7.02828 14.9499C7.3395 15.1232 7.69129 15.2102 8.04738 15.2022C8.40347 15.1941 8.75096 15.0912 9.054 14.904ZM13.114 10.032L8 13.204V6.812L13.114 10.032ZM48 25C48 28.86 44.86 32 41 32C39.3185 31.9968 37.6942 31.3889 36.4238 30.2874C35.1533 29.1858 34.3214 27.6641 34.08 26H29.92C29.6786 27.6641 28.8467 29.1858 27.5762 30.2874C26.3058 31.3889 24.6815 31.9968 23 32C21.3184 31.9972 19.6939 31.3895 18.4234 30.2878C17.1528 29.1862 16.3211 27.6643 16.08 26H14.964C13.02 26 11.264 25.202 10 23.916V34C10 37.308 12.692 40 16 40H16.08C16.568 36.614 19.48 34 23 34C26.86 34 30 37.14 30 41C30 44.86 26.86 48 23 48C21.3184 47.9972 19.6939 47.3895 18.4234 46.2878C17.1528 45.1862 16.3211 43.6643 16.08 42H16C11.588 42 8 38.412 8 34V19.798C5.74299 19.3342 3.7149 18.1064 2.25762 16.3216C0.800338 14.5368 0.0029943 12.3042 0 10C0 4.486 4.486 0 10 0C15.514 0 20 4.486 20 10C19.9965 12.6341 18.9548 15.1607 17.1008 17.0319C15.2468 18.9031 12.73 19.9681 10.096 19.996C10.3183 21.1238 10.9252 22.1395 11.813 22.8698C12.7008 23.6 13.8145 23.9995 14.964 24H16.08C16.568 20.614 19.48 18 23 18C24.6816 18.0028 26.3061 18.6105 27.5766 19.7122C28.8472 20.8138 29.6789 22.3357 29.92 24H34.08C34.3214 22.3359 35.1533 20.8142 36.4238 19.7126C37.6942 18.6111 39.3185 18.0032 41 18C44.86 18 48 21.14 48 25ZM18 41C18 43.756 20.244 46 23 46C25.756 46 28 43.756 28 41C28 38.244 25.756 36 23 36C20.244 36 18 38.244 18 41ZM10 18C14.412 18 18 14.412 18 10C18 5.588 14.412 2 10 2C5.588 2 2 5.588 2 10C2 14.412 5.588 18 10 18ZM28 25C28 22.244 25.756 20 23 20C20.244 20 18 22.244 18 25C18 27.756 20.244 30 23 30C25.756 30 28 27.756 28 25ZM46 25C46 22.244 43.756 20 41 20C38.244 20 36 22.244 36 25C36 27.756 38.244 30 41 30C43.756 30 46 27.756 46 25ZM20 41C20 41.2652 20.1054 41.5196 20.2929 41.7071C20.4804 41.8946 20.7348 42 21 42C21.2652 42 21.5196 41.8946 21.7071 41.7071C21.8946 41.5196 22 41.2652 22 41C22 40.7348 21.8946 40.4804 21.7071 40.2929C21.5196 40.1054 21.2652 40 21 40C20.7348 40 20.4804 40.1054 20.2929 40.2929C20.1054 40.4804 20 40.7348 20 41ZM24 41C24 41.2652 24.1054 41.5196 24.2929 41.7071C24.4804 41.8946 24.7348 42 25 42C25.2652 42 25.5196 41.8946 25.7071 41.7071C25.8946 41.5196 26 41.2652 26 41C26 40.7348 25.8946 40.4804 25.7071 40.2929C25.5196 40.1054 25.2652 40 25 40C24.7348 40 24.4804 40.1054 24.2929 40.2929C24.1054 40.4804 24 40.7348 24 41ZM48 41C48 44.86 44.86 48 41 48C39.3179 47.9966 37.6932 47.3882 36.4226 46.2858C35.1521 45.1835 34.3206 43.6608 34.08 41.996C34.066 41.998 34.054 42.006 34.038 42.006L33.026 42.04H32.992C32.7341 42.0334 32.4887 41.9273 32.3072 41.744C32.1257 41.5607 32.022 41.3143 32.0179 41.0563C32.0137 40.7984 32.1095 40.5488 32.285 40.3598C32.4606 40.1708 32.7024 40.0569 32.96 40.042L33.972 40.008C34.008 40.004 34.042 40.02 34.076 40.022C34.3127 38.3532 35.1431 36.8257 36.4149 35.7197C37.6866 34.6136 39.3145 34.003 41 34C44.86 34 48 37.14 48 41ZM46 41C46 38.244 43.756 36 41 36C38.244 36 36 38.244 36 41C36 43.756 38.244 46 41 46C43.756 46 46 43.756 46 41Z" fill="#F74C27"/>
+            </g>
+            <defs>
+            <clipPath id="clip0_4057_86606">
+            <rect width="48" height="48" fill="white"/>
+            </clipPath>
+            </defs>
+          </svg>
+        SVG
       end
+    else
+      "Unknown"
+    end
+    div(class: "gem__attestation__built_on__info") do
+      p { plain "Built and signed on" }
+      p { em { display_data[:ci_platform] } }
+      p { link_to "Build summary", display_data[:build_summary_url], target: "_blank", rel: "noopener" }
     end
   end
 end
diff --git a/test/components/previews/version/provenance_component_preview.rb b/test/components/previews/version/provenance_component_preview.rb
@@ -0,0 +1,7 @@
+class Version::ProvenanceComponentPreview < Lookbook::Preview
+  def default
+    render Version::ProvenanceComponent.new(
+      attestation: FactoryBot.build(:attestation)
+    )
+  end
+end