Merge branch 'nmezzopera-remove-container-registry-css' into 'master'

Remove container registry css

See merge request gitlab-org/gitlab!35959

app/assets/javascripts/registry/explorer/components/list_page/group_empty_state.vue

@@ -18,10 +18,9 @@ export default {
   <gl-empty-state
     :title="s__('ContainerRegistry|There are no container images available in this group')"
     :svg-path="config.noContainersImage"
-    class="container-message"
   >
     <template #description>
-      <p class="js-no-container-images-text">
+      <p>
         <gl-sprintf
           :message="
             s__(

app/assets/javascripts/registry/explorer/components/list_page/project_empty_state.vue

 <script>
-import { GlEmptyState, GlSprintf, GlLink } from '@gitlab/ui';
+import { GlEmptyState, GlSprintf, GlLink, GlFormInputGroup, GlFormInput } from '@gitlab/ui';
 import { mapState, mapGetters } from 'vuex';
 import { s__ } from '~/locale';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
@@ -17,6 +17,8 @@ export default {
     GlEmptyState,
     GlSprintf,
     GlLink,
+    GlFormInputGroup,
+    GlFormInput,
   },
   i18n: {
     quickStart: QUICK_START,
@@ -43,10 +45,9 @@ export default {
   <gl-empty-state
     :title="s__('ContainerRegistry|There are no container images stored for this project')"
     :svg-path="config.noContainersImage"
-    class="container-message"
   >
     <template #description>
-      <p class="js-no-container-images-text">
+      <p>
         <gl-sprintf :message="$options.i18n.introText">
           <template #docLink="{content}">
             <gl-link :href="config.helpPagePath" target="_blank">{{ content }}</gl-link>
@@ -54,7 +55,7 @@ export default {
         </gl-sprintf>
       </p>
       <h5>{{ $options.i18n.quickStart }}</h5>
-      <p class="js-not-logged-in-to-registry-text">
+      <p>
         <gl-sprintf :message="$options.i18n.notLoggedInMessage">
           <template #twofaDocLink="{content}">
             <gl-link :href="config.twoFactorAuthHelpLink" target="_blank">{{ content }}</gl-link>
@@ -66,42 +67,49 @@ export default {
           </template>
         </gl-sprintf>
       </p>
-      <div class="input-group append-bottom-10">
-        <input :value="dockerLoginCommand" type="text" class="form-control monospace" readonly />
-        <span class="input-group-append">
+      <gl-form-input-group class="gl-mb-4">
+        <gl-form-input
+          :value="dockerLoginCommand"
+          readonly
+          type="text"
+          class="gl-font-monospace!"
+        />
+        <template #append>
           <clipboard-button
             :text="dockerLoginCommand"
             :title="$options.i18n.copyLoginTitle"
-            class="input-group-text"
+            class="gl-m-0!"
           />
-        </span>
-      </div>
-      <p></p>
-      <p>
+        </template>
+      </gl-form-input-group>
+      <p class="gl-mb-4">
         {{ $options.i18n.addImageText }}
       </p>
-
-      <div class="input-group append-bottom-10">
-        <input :value="dockerBuildCommand" type="text" class="form-control monospace" readonly />
-        <span class="input-group-append">
+      <gl-form-input-group class="gl-mb-4 ">
+        <gl-form-input
+          :value="dockerBuildCommand"
+          readonly
+          type="text"
+          class="gl-font-monospace!"
+        />
+        <template #append>
           <clipboard-button
             :text="dockerBuildCommand"
             :title="$options.i18n.copyBuildTitle"
-            class="input-group-text"
+            class="gl-m-0!"
           />
-        </span>
-      </div>
-
-      <div class="input-group">
-        <input :value="dockerPushCommand" type="text" class="form-control monospace" readonly />
-        <span class="input-group-append">
+        </template>
+      </gl-form-input-group>
+      <gl-form-input-group>
+        <gl-form-input :value="dockerPushCommand" readonly type="text" class="gl-font-monospace!" />
+        <template #append>
           <clipboard-button
             :text="dockerPushCommand"
             :title="$options.i18n.copyPushTitle"
-            class="input-group-text"
+            class="gl-m-0!"
           />
-        </span>
-      </div>
+        </template>
+      </gl-form-input-group>
     </template>
   </gl-empty-state>
 </template>

app/assets/javascripts/registry/explorer/pages/list.vue

@@ -217,7 +217,6 @@ export default {
             :svg-path="config.noContainersImage"
             data-testid="emptySearch"
             :title="$options.i18n.EMPTY_RESULT_TITLE"
-            class="container-message"
           >
             <template #description>
               {{ $options.i18n.EMPTY_RESULT_MESSAGE }}

app/assets/stylesheets/pages/container_registry.scss

-/**
- * Container Registry
- */
-
-.container-message {
-  span .btn {
-    margin: 0;
-  }
-}
-
-.container-image {
-  border-bottom: 1px solid $white-normal;
-}
-
-.container-image-head {
-  padding: 0 16px;
-  line-height: 4em;
-
-  .btn-link {
-    padding: 0;
-
-    &:focus {
-      outline: none;
-    }
-  }
-}
-
-.table.tags {
-  margin-bottom: 0;
-
-  .registry-image-row {
-    .check {
-      padding-right: $gl-padding;
-      width: 5%;
-    }
-
-    .action-buttons {
-      opacity: 0;
-    }
-
-    &:hover {
-      .action-buttons {
-        opacity: 1;
-      }
-    }
-  }
-}

spec/frontend/registry/explorer/components/list_page/__snapshots__/group_empty_state_spec.js.snap

@@ -2,13 +2,10 @@
 
 exports[`Registry Group Empty state to match the default snapshot 1`] = `
 <div
-  class="container-message"
   svg-path="foo"
   title="There are no container images available in this group"
 >
-  <p
-    class="js-no-container-images-text"
-  >
+  <p>
     With the Container Registry, every project can have its own space to store its Docker images. Push at least one Docker image in one of this group's projects in order to show up here. 
     <gl-link-stub
       href="baz"

spec/frontend/registry/explorer/components/list_page/__snapshots__/project_empty_state_spec.js.snap

@@ -2,13 +2,10 @@
 
 exports[`Registry Project Empty state to match the default snapshot 1`] = `
 <div
-  class="container-message"
   svg-path="bazFoo"
   title="There are no container images stored for this project"
 >
-  <p
-    class="js-no-container-images-text"
-  >
+  <p>
     With the Container Registry, every project can have its own space to store its Docker images. 
     <gl-link-stub
       href="baz"
@@ -22,9 +19,7 @@ exports[`Registry Project Empty state to match the default snapshot 1`] = `
     CLI Commands
   </h5>
    
-  <p
-    class="js-not-logged-in-to-registry-text"
-  >
+  <p>
     If you are not already logged in, you need to authenticate to the Container Registry by using your GitLab username and password. If you have 
     <gl-link-stub
       href="barBaz"
@@ -42,78 +37,50 @@ exports[`Registry Project Empty state to match the default snapshot 1`] = `
      instead of a password.
   </p>
    
-  <div
-    class="input-group append-bottom-10"
+  <gl-form-input-group-stub
+    class="gl-mb-4"
+    predefinedoptions="[object Object]"
+    value=""
   >
-    <input
-      class="form-control monospace"
-      readonly="readonly"
+    <gl-form-input-stub
+      class="gl-font-monospace!"
+      readonly=""
       type="text"
+      value="docker login bar"
     />
-     
-    <span
-      class="input-group-append"
-    >
-      <clipboard-button-stub
-        class="input-group-text"
-        cssclass="btn-default"
-        text="docker login bar"
-        title="Copy login command"
-        tooltipplacement="top"
-      />
-    </span>
-  </div>
+  </gl-form-input-group-stub>
    
-  <p />
-   
-  <p>
+  <p
+    class="gl-mb-4"
+  >
     
       You can add an image to this registry with the following commands:
     
   </p>
    
-  <div
-    class="input-group append-bottom-10"
+  <gl-form-input-group-stub
+    class="gl-mb-4 "
+    predefinedoptions="[object Object]"
+    value=""
   >
-    <input
-      class="form-control monospace"
-      readonly="readonly"
+    <gl-form-input-stub
+      class="gl-font-monospace!"
+      readonly=""
       type="text"
+      value="docker build -t foo ."
     />
-     
-    <span
-      class="input-group-append"
-    >
-      <clipboard-button-stub
-        class="input-group-text"
-        cssclass="btn-default"
-        text="docker build -t foo ."
-        title="Copy build command"
-        tooltipplacement="top"
-      />
-    </span>
-  </div>
+  </gl-form-input-group-stub>
    
-  <div
-    class="input-group"
+  <gl-form-input-group-stub
+    predefinedoptions="[object Object]"
+    value=""
   >
-    <input
-      class="form-control monospace"
-      readonly="readonly"
+    <gl-form-input-stub
+      class="gl-font-monospace!"
+      readonly=""
       type="text"
+      value="docker push foo"
     />
-     
-    <span
-      class="input-group-append"
-    >
-      <clipboard-button-stub
-        class="input-group-text"
-        cssclass="btn-default"
-        text="docker push foo"
-        title="Copy push command"
-        tooltipplacement="top"
-      />
-    </span>
-  </div>
+  </gl-form-input-group-stub>
 </div>
 `;