Add latest changes from gitlab-org/gitlab@master

4 files changed, 0 insertions, 1409 deletions

diff --git a/spec/frontend/work_items_hierarchy/components/__snapshots__/app_spec.js.snap b/spec/frontend/work_items_hierarchy/components/__snapshots__/app_spec.js.snap
deleted file mode 100644
index f4979e4e707..00000000000
--- a/spec/frontend/work_items_hierarchy/components/__snapshots__/app_spec.js.snap
+++ /dev/null
@@ -1,1197 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`WorkItemsHierarchy App when licensePlan is free matches the snapshot 1`] = `
-<div>
-  <div
-    class="gl-card gl-px-8 gl-py-6 gl-line-height-20 gl-mt-4 gl-px-5!"
-  >
-    <!---->
-     
-    <div
-      class="gl-card-body gl-display-flex gl-p-0!"
-    >
-      <div
-        class="gl-banner-illustration"
-      >
-        <img
-          alt=""
-          role="presentation"
-          src="/foo.svg"
-        />
-      </div>
-       
-      <div
-        class="gl-banner-content"
-      >
-        <h1
-          class="gl-banner-title"
-        >
-          Help us improve work items in GitLab!
-        </h1>
-         
-        <p>
-          
-      Is there a framework or type of work item you wish you had access to in GitLab? Give us your feedback and help us build the experiences valuable to you.
-    
-        </p>
-         
-        <a
-          class="btn btn-confirm btn-md gl-button"
-          data-testid="gl-banner-primary-button"
-          href="https://forms.gle/u1BmRp8rTbwj52iq5"
-        >
-          <!---->
-           
-          <!---->
-            
-          <span
-            class="gl-button-text"
-          >
-            Take the work items survey
-          </span>
-        </a>
-         
-      </div>
-       
-      <button
-        aria-label="Close banner"
-        class="btn gl-banner-close btn-default btn-sm gl-button btn-default-tertiary btn-icon"
-        type="button"
-      >
-        <!---->
-         
-        <svg
-          aria-hidden="true"
-          class="gl-button-icon gl-icon s16"
-          data-testid="close-icon"
-          role="img"
-        >
-          <use
-            href="#close"
-          />
-        </svg>
-          
-        <!---->
-      </button>
-    </div>
-     
-    <!---->
-  </div>
-   
-  <h3
-    class="gl-mt-5!"
-  >
-    Planning hierarchy
-  </h3>
-   
-  <p>
-    
-    Deliver value more efficiently by breaking down necessary work into a hierarchical structure. This structure helps teams understand scope, priorities, and how work cascades up toward larger goals.
-  
-  </p>
-   
-  <div
-    class="gl-font-weight-bold gl-mb-2"
-  >
-    Current structure
-  </div>
-   
-  <p
-    class="gl-mb-3!"
-  >
-    You can start using these items now.
-  </p>
-   
-  <div>
-    <div
-      class="gl-mb-3"
-    >
-      <span
-        class="gl-border-gray-100 gl-border-1 gl-border-solid gl-rounded-base gl-pl-2 gl-pt-2 gl-pb-2 gl-pr-3 gl-display-inline-flex gl-align-items-center gl-justify-content-center gl-line-height-normal"
-        data-testid="work-item-wrapper"
-      >
-        <span
-          class="gl-rounded-base gl-mr-2 gl-display-inline-flex justify-content-center align-items-center hierarchy-icon-wrapper"
-          style="background-color: rgb(203, 226, 249); color: rgb(16, 104, 191);"
-        >
-          <svg
-            aria-hidden="true"
-            class="gl-icon s12"
-            data-testid="issues-icon"
-            role="img"
-          >
-            <use
-              href="#issues"
-            />
-          </svg>
-        </span>
-        
-
-      Issue
-    
-      </span>
-       
-      <!---->
-       
-      <!---->
-    </div>
-    <div
-      class="gl-mb-3"
-    >
-      <span
-        class="gl-border-gray-100 gl-border-1 gl-border-solid gl-rounded-base gl-pl-2 gl-pt-2 gl-pb-2 gl-pr-3 gl-display-inline-flex gl-align-items-center gl-justify-content-center gl-line-height-normal"
-        data-testid="work-item-wrapper"
-      >
-        <span
-          class="gl-rounded-base gl-mr-2 gl-display-inline-flex justify-content-center align-items-center hierarchy-icon-wrapper"
-          style="background-color: rgb(195, 230, 205); color: rgb(33, 118, 69);"
-        >
-          <svg
-            aria-hidden="true"
-            class="gl-icon s12"
-            data-testid="task-done-icon"
-            role="img"
-          >
-            <use
-              href="#task-done"
-            />
-          </svg>
-        </span>
-        
-
-      Task
-    
-      </span>
-       
-      <!---->
-       
-      <!---->
-    </div>
-    <div
-      class="gl-mb-3"
-    >
-      <span
-        class="gl-border-gray-100 gl-border-1 gl-border-solid gl-rounded-base gl-pl-2 gl-pt-2 gl-pb-2 gl-pr-3 gl-display-inline-flex gl-align-items-center gl-justify-content-center gl-line-height-normal"
-        data-testid="work-item-wrapper"
-      >
-        <span
-          class="gl-rounded-base gl-mr-2 gl-display-inline-flex justify-content-center align-items-center hierarchy-icon-wrapper"
-          style="background-color: rgb(219, 42, 15); color: rgb(253, 212, 205);"
-        >
-          <svg
-            aria-hidden="true"
-            class="gl-icon s16"
-            data-testid="issue-type-incident-icon"
-            role="img"
-          >
-            <use
-              href="#issue-type-incident"
-            />
-          </svg>
-        </span>
-        
-
-      Incident
-    
-      </span>
-       
-      <!---->
-       
-      <!---->
-    </div>
-  </div>
-   
-  <div
-    class="gl-font-weight-bold gl-mt-5 gl-mb-2"
-    data-testid="unavailable-structure"
-  >
-    
-    Unavailable structure
-  
-  </div>
-   
-  <p
-    class="gl-mb-3!"
-  >
-    
-    These items are unavailable in the current structure.
-  
-  </p>
-   
-  <div>
-    <div
-      class="gl-mb-3 flex"
-    >
-      <span
-        class="gl-border-gray-100 gl-border-1 gl-border-solid gl-rounded-base gl-pl-2 gl-pt-2 gl-pb-2 gl-pr-3 gl-display-inline-flex gl-align-items-center gl-justify-content-center gl-line-height-normal"
-        data-testid="work-item-wrapper"
-      >
-        <span
-          class="gl-rounded-base gl-mr-2 gl-display-inline-flex justify-content-center align-items-center hierarchy-icon-wrapper"
-          style="background-color: rgb(225, 216, 249); color: rgb(105, 76, 192);"
-        >
-          <svg
-            aria-hidden="true"
-            class="gl-icon s12"
-            data-testid="epic-icon"
-            role="img"
-          >
-            <use
-              href="#epic"
-            />
-          </svg>
-        </span>
-        
-
-      Epic
-    
-      </span>
-       
-      <span
-        class="badge gl-ml-3 gl-align-self-center badge-info badge-pill gl-badge sm"
-      >
-        <svg
-          aria-hidden="true"
-          class="gl-badge-icon gl-icon s16 gl-mr-2"
-          data-testid="license-icon"
-          role="img"
-        >
-          <use
-            href="#license"
-          />
-        </svg>
-         Premium
-      </span>
-       
-      <!---->
-    </div>
-    <div
-      class="gl-mb-3 flex"
-    >
-      <span
-        class="gl-border-gray-100 gl-border-1 gl-border-solid gl-rounded-base gl-pl-2 gl-pt-2 gl-pb-2 gl-pr-3 gl-display-inline-flex gl-align-items-center gl-justify-content-center gl-line-height-normal"
-        data-testid="work-item-wrapper"
-      >
-        <span
-          class="gl-rounded-base gl-mr-2 gl-display-inline-flex justify-content-center align-items-center hierarchy-icon-wrapper"
-          style="background-color: rgb(245, 217, 168); color: rgb(171, 97, 0);"
-        >
-          <svg
-            aria-hidden="true"
-            class="gl-icon s12"
-            data-testid="epic-icon"
-            role="img"
-          >
-            <use
-              href="#epic"
-            />
-          </svg>
-        </span>
-        
-
-      Child epic
-    
-      </span>
-       
-      <span
-        class="badge gl-ml-3 gl-align-self-center badge-info badge-pill gl-badge sm"
-      >
-        <svg
-          aria-hidden="true"
-          class="gl-badge-icon gl-icon s16 gl-mr-2"
-          data-testid="license-icon"
-          role="img"
-        >
-          <use
-            href="#license"
-          />
-        </svg>
-         Ultimate
-      </span>
-       
-      <!---->
-    </div>
-    <div
-      class="gl-mb-3 flex"
-    >
-      <span
-        class="gl-border-gray-100 gl-border-1 gl-border-solid gl-rounded-base gl-pl-2 gl-pt-2 gl-pb-2 gl-pr-3 gl-display-inline-flex gl-align-items-center gl-justify-content-center gl-line-height-normal"
-        data-testid="work-item-wrapper"
-      >
-        <span
-          class="gl-rounded-base gl-mr-2 gl-display-inline-flex justify-content-center align-items-center hierarchy-icon-wrapper"
-          style="background-color: rgb(197, 227, 251); color: rgb(0, 104, 197);"
-        >
-          <svg
-            aria-hidden="true"
-            class="gl-icon s12"
-            data-testid="requirements-icon"
-            role="img"
-          >
-            <use
-              href="#requirements"
-            />
-          </svg>
-        </span>
-        
-
-      Requirement
-    
-      </span>
-       
-      <span
-        class="badge gl-ml-3 gl-align-self-center badge-info badge-pill gl-badge sm"
-      >
-        <svg
-          aria-hidden="true"
-          class="gl-badge-icon gl-icon s16 gl-mr-2"
-          data-testid="license-icon"
-          role="img"
-        >
-          <use
-            href="#license"
-          />
-        </svg>
-         Ultimate
-      </span>
-       
-      <!---->
-    </div>
-    <div
-      class="gl-mb-3 flex"
-    >
-      <span
-        class="gl-border-gray-100 gl-border-1 gl-border-solid gl-rounded-base gl-pl-2 gl-pt-2 gl-pb-2 gl-pr-3 gl-display-inline-flex gl-align-items-center gl-justify-content-center gl-line-height-normal"
-        data-testid="work-item-wrapper"
-      >
-        <span
-          class="gl-rounded-base gl-mr-2 gl-display-inline-flex justify-content-center align-items-center hierarchy-icon-wrapper"
-          style="background-color: rgb(0, 122, 63); color: rgb(186, 232, 203);"
-        >
-          <svg
-            aria-hidden="true"
-            class="gl-icon s16"
-            data-testid="issue-type-test-case-icon"
-            role="img"
-          >
-            <use
-              href="#issue-type-test-case"
-            />
-          </svg>
-        </span>
-        
-
-      Test case
-    
-      </span>
-       
-      <span
-        class="badge gl-ml-3 gl-align-self-center badge-info badge-pill gl-badge sm"
-      >
-        <svg
-          aria-hidden="true"
-          class="gl-badge-icon gl-icon s16 gl-mr-2"
-          data-testid="license-icon"
-          role="img"
-        >
-          <use
-            href="#license"
-          />
-        </svg>
-         Ultimate
-      </span>
-       
-      <!---->
-    </div>
-  </div>
-</div>
-`;
-
-exports[`WorkItemsHierarchy App when licensePlan is premium matches the snapshot 1`] = `
-<div>
-  <div
-    class="gl-card gl-px-8 gl-py-6 gl-line-height-20 gl-mt-4 gl-px-5!"
-  >
-    <!---->
-     
-    <div
-      class="gl-card-body gl-display-flex gl-p-0!"
-    >
-      <div
-        class="gl-banner-illustration"
-      >
-        <img
-          alt=""
-          role="presentation"
-          src="/foo.svg"
-        />
-      </div>
-       
-      <div
-        class="gl-banner-content"
-      >
-        <h1
-          class="gl-banner-title"
-        >
-          Help us improve work items in GitLab!
-        </h1>
-         
-        <p>
-          
-      Is there a framework or type of work item you wish you had access to in GitLab? Give us your feedback and help us build the experiences valuable to you.
-    
-        </p>
-         
-        <a
-          class="btn btn-confirm btn-md gl-button"
-          data-testid="gl-banner-primary-button"
-          href="https://forms.gle/u1BmRp8rTbwj52iq5"
-        >
-          <!---->
-           
-          <!---->
-            
-          <span
-            class="gl-button-text"
-          >
-            Take the work items survey
-          </span>
-        </a>
-         
-      </div>
-       
-      <button
-        aria-label="Close banner"
-        class="btn gl-banner-close btn-default btn-sm gl-button btn-default-tertiary btn-icon"
-        type="button"
-      >
-        <!---->
-         
-        <svg
-          aria-hidden="true"
-          class="gl-button-icon gl-icon s16"
-          data-testid="close-icon"
-          role="img"
-        >
-          <use
-            href="#close"
-          />
-        </svg>
-          
-        <!---->
-      </button>
-    </div>
-     
-    <!---->
-  </div>
-   
-  <h3
-    class="gl-mt-5!"
-  >
-    Planning hierarchy
-  </h3>
-   
-  <p>
-    
-    Deliver value more efficiently by breaking down necessary work into a hierarchical structure. This structure helps teams understand scope, priorities, and how work cascades up toward larger goals.
-  
-  </p>
-   
-  <div
-    class="gl-font-weight-bold gl-mb-2"
-  >
-    Current structure
-  </div>
-   
-  <p
-    class="gl-mb-3!"
-  >
-    You can start using these items now.
-  </p>
-   
-  <div>
-    <div
-      class="gl-mb-3"
-    >
-      <span
-        class="gl-border-gray-100 gl-border-1 gl-border-solid gl-rounded-base gl-pl-2 gl-pt-2 gl-pb-2 gl-pr-3 gl-display-inline-flex gl-align-items-center gl-justify-content-center gl-line-height-normal"
-        data-testid="work-item-wrapper"
-      >
-        <span
-          class="gl-rounded-base gl-mr-2 gl-display-inline-flex justify-content-center align-items-center hierarchy-icon-wrapper"
-          style="background-color: rgb(225, 216, 249); color: rgb(105, 76, 192);"
-        >
-          <svg
-            aria-hidden="true"
-            class="gl-icon s12"
-            data-testid="epic-icon"
-            role="img"
-          >
-            <use
-              href="#epic"
-            />
-          </svg>
-        </span>
-        
-
-      Epic
-    
-      </span>
-       
-      <!---->
-       
-      <div
-        class=""
-      >
-        <!---->
-         
-        <div
-          class="gl-display-block gl-mt-2 gl-ml-6"
-        >
-          <svg
-            aria-hidden="true"
-            class="gl-text-gray-400 gl-icon s16"
-            data-testid="arrow-down-icon"
-            role="img"
-          >
-            <use
-              href="#arrow-down"
-            />
-          </svg>
-        </div>
-         
-        <!---->
-         
-        <span
-          class="gl-border-gray-100 gl-border-1 gl-border-solid gl-rounded-base gl-pl-2 gl-pt-2 gl-pb-2 gl-pr-3 gl-display-inline-flex gl-align-items-center gl-justify-content-center gl-mt-2 gl-line-height-normal gl-ml-6"
-        >
-          <span
-            class="gl-rounded-base gl-mr-2 gl-display-inline-flex justify-content-center align-items-center hierarchy-icon-wrapper"
-            style="background-color: rgb(203, 226, 249); color: rgb(16, 104, 191);"
-          >
-            <svg
-              aria-hidden="true"
-              class="gl-icon s12"
-              data-testid="issues-icon"
-              role="img"
-            >
-              <use
-                href="#issues"
-              />
-            </svg>
-          </span>
-          
-
-          Issue
-        
-        </span>
-      </div>
-    </div>
-    <div
-      class="gl-mb-3"
-    >
-      <span
-        class="gl-border-gray-100 gl-border-1 gl-border-solid gl-rounded-base gl-pl-2 gl-pt-2 gl-pb-2 gl-pr-3 gl-display-inline-flex gl-align-items-center gl-justify-content-center gl-line-height-normal"
-        data-testid="work-item-wrapper"
-      >
-        <span
-          class="gl-rounded-base gl-mr-2 gl-display-inline-flex justify-content-center align-items-center hierarchy-icon-wrapper"
-          style="background-color: rgb(195, 230, 205); color: rgb(33, 118, 69);"
-        >
-          <svg
-            aria-hidden="true"
-            class="gl-icon s12"
-            data-testid="task-done-icon"
-            role="img"
-          >
-            <use
-              href="#task-done"
-            />
-          </svg>
-        </span>
-        
-
-      Task
-    
-      </span>
-       
-      <!---->
-       
-      <!---->
-    </div>
-    <div
-      class="gl-mb-3"
-    >
-      <span
-        class="gl-border-gray-100 gl-border-1 gl-border-solid gl-rounded-base gl-pl-2 gl-pt-2 gl-pb-2 gl-pr-3 gl-display-inline-flex gl-align-items-center gl-justify-content-center gl-line-height-normal"
-        data-testid="work-item-wrapper"
-      >
-        <span
-          class="gl-rounded-base gl-mr-2 gl-display-inline-flex justify-content-center align-items-center hierarchy-icon-wrapper"
-          style="background-color: rgb(219, 42, 15); color: rgb(253, 212, 205);"
-        >
-          <svg
-            aria-hidden="true"
-            class="gl-icon s16"
-            data-testid="issue-type-incident-icon"
-            role="img"
-          >
-            <use
-              href="#issue-type-incident"
-            />
-          </svg>
-        </span>
-        
-
-      Incident
-    
-      </span>
-       
-      <!---->
-       
-      <!---->
-    </div>
-  </div>
-   
-  <div
-    class="gl-font-weight-bold gl-mt-5 gl-mb-2"
-    data-testid="unavailable-structure"
-  >
-    
-    Unavailable structure
-  
-  </div>
-   
-  <p
-    class="gl-mb-3!"
-  >
-    
-    These items are unavailable in the current structure.
-  
-  </p>
-   
-  <div>
-    <div
-      class="gl-mb-3 flex"
-    >
-      <span
-        class="gl-border-gray-100 gl-border-1 gl-border-solid gl-rounded-base gl-pl-2 gl-pt-2 gl-pb-2 gl-pr-3 gl-display-inline-flex gl-align-items-center gl-justify-content-center gl-line-height-normal"
-        data-testid="work-item-wrapper"
-      >
-        <span
-          class="gl-rounded-base gl-mr-2 gl-display-inline-flex justify-content-center align-items-center hierarchy-icon-wrapper"
-          style="background-color: rgb(245, 217, 168); color: rgb(171, 97, 0);"
-        >
-          <svg
-            aria-hidden="true"
-            class="gl-icon s12"
-            data-testid="epic-icon"
-            role="img"
-          >
-            <use
-              href="#epic"
-            />
-          </svg>
-        </span>
-        
-
-      Child epic
-    
-      </span>
-       
-      <span
-        class="badge gl-ml-3 gl-align-self-center badge-info badge-pill gl-badge sm"
-      >
-        <svg
-          aria-hidden="true"
-          class="gl-badge-icon gl-icon s16 gl-mr-2"
-          data-testid="license-icon"
-          role="img"
-        >
-          <use
-            href="#license"
-          />
-        </svg>
-         Ultimate
-      </span>
-       
-      <!---->
-    </div>
-    <div
-      class="gl-mb-3 flex"
-    >
-      <span
-        class="gl-border-gray-100 gl-border-1 gl-border-solid gl-rounded-base gl-pl-2 gl-pt-2 gl-pb-2 gl-pr-3 gl-display-inline-flex gl-align-items-center gl-justify-content-center gl-line-height-normal"
-        data-testid="work-item-wrapper"
-      >
-        <span
-          class="gl-rounded-base gl-mr-2 gl-display-inline-flex justify-content-center align-items-center hierarchy-icon-wrapper"
-          style="background-color: rgb(197, 227, 251); color: rgb(0, 104, 197);"
-        >
-          <svg
-            aria-hidden="true"
-            class="gl-icon s12"
-            data-testid="requirements-icon"
-            role="img"
-          >
-            <use
-              href="#requirements"
-            />
-          </svg>
-        </span>
-        
-
-      Requirement
-    
-      </span>
-       
-      <span
-        class="badge gl-ml-3 gl-align-self-center badge-info badge-pill gl-badge sm"
-      >
-        <svg
-          aria-hidden="true"
-          class="gl-badge-icon gl-icon s16 gl-mr-2"
-          data-testid="license-icon"
-          role="img"
-        >
-          <use
-            href="#license"
-          />
-        </svg>
-         Ultimate
-      </span>
-       
-      <!---->
-    </div>
-    <div
-      class="gl-mb-3 flex"
-    >
-      <span
-        class="gl-border-gray-100 gl-border-1 gl-border-solid gl-rounded-base gl-pl-2 gl-pt-2 gl-pb-2 gl-pr-3 gl-display-inline-flex gl-align-items-center gl-justify-content-center gl-line-height-normal"
-        data-testid="work-item-wrapper"
-      >
-        <span
-          class="gl-rounded-base gl-mr-2 gl-display-inline-flex justify-content-center align-items-center hierarchy-icon-wrapper"
-          style="background-color: rgb(0, 122, 63); color: rgb(186, 232, 203);"
-        >
-          <svg
-            aria-hidden="true"
-            class="gl-icon s16"
-            data-testid="issue-type-test-case-icon"
-            role="img"
-          >
-            <use
-              href="#issue-type-test-case"
-            />
-          </svg>
-        </span>
-        
-
-      Test case
-    
-      </span>
-       
-      <span
-        class="badge gl-ml-3 gl-align-self-center badge-info badge-pill gl-badge sm"
-      >
-        <svg
-          aria-hidden="true"
-          class="gl-badge-icon gl-icon s16 gl-mr-2"
-          data-testid="license-icon"
-          role="img"
-        >
-          <use
-            href="#license"
-          />
-        </svg>
-         Ultimate
-      </span>
-       
-      <!---->
-    </div>
-  </div>
-</div>
-`;
-
-exports[`WorkItemsHierarchy App when licensePlan is ultimate matches the snapshot 1`] = `
-<div>
-  <div
-    class="gl-card gl-px-8 gl-py-6 gl-line-height-20 gl-mt-4 gl-px-5!"
-  >
-    <!---->
-     
-    <div
-      class="gl-card-body gl-display-flex gl-p-0!"
-    >
-      <div
-        class="gl-banner-illustration"
-      >
-        <img
-          alt=""
-          role="presentation"
-          src="/foo.svg"
-        />
-      </div>
-       
-      <div
-        class="gl-banner-content"
-      >
-        <h1
-          class="gl-banner-title"
-        >
-          Help us improve work items in GitLab!
-        </h1>
-         
-        <p>
-          
-      Is there a framework or type of work item you wish you had access to in GitLab? Give us your feedback and help us build the experiences valuable to you.
-    
-        </p>
-         
-        <a
-          class="btn btn-confirm btn-md gl-button"
-          data-testid="gl-banner-primary-button"
-          href="https://forms.gle/u1BmRp8rTbwj52iq5"
-        >
-          <!---->
-           
-          <!---->
-            
-          <span
-            class="gl-button-text"
-          >
-            Take the work items survey
-          </span>
-        </a>
-         
-      </div>
-       
-      <button
-        aria-label="Close banner"
-        class="btn gl-banner-close btn-default btn-sm gl-button btn-default-tertiary btn-icon"
-        type="button"
-      >
-        <!---->
-         
-        <svg
-          aria-hidden="true"
-          class="gl-button-icon gl-icon s16"
-          data-testid="close-icon"
-          role="img"
-        >
-          <use
-            href="#close"
-          />
-        </svg>
-          
-        <!---->
-      </button>
-    </div>
-     
-    <!---->
-  </div>
-   
-  <h3
-    class="gl-mt-5!"
-  >
-    Planning hierarchy
-  </h3>
-   
-  <p>
-    
-    Deliver value more efficiently by breaking down necessary work into a hierarchical structure. This structure helps teams understand scope, priorities, and how work cascades up toward larger goals.
-  
-  </p>
-   
-  <div
-    class="gl-font-weight-bold gl-mb-2"
-  >
-    Current structure
-  </div>
-   
-  <p
-    class="gl-mb-3!"
-  >
-    You can start using these items now.
-  </p>
-   
-  <div>
-    <div
-      class="gl-mb-3"
-    >
-      <span
-        class="gl-border-gray-100 gl-border-1 gl-border-solid gl-rounded-base gl-pl-2 gl-pt-2 gl-pb-2 gl-pr-3 gl-display-inline-flex gl-align-items-center gl-justify-content-center gl-line-height-normal"
-        data-testid="work-item-wrapper"
-      >
-        <span
-          class="gl-rounded-base gl-mr-2 gl-display-inline-flex justify-content-center align-items-center hierarchy-icon-wrapper"
-          style="background-color: rgb(225, 216, 249); color: rgb(105, 76, 192);"
-        >
-          <svg
-            aria-hidden="true"
-            class="gl-icon s12"
-            data-testid="epic-icon"
-            role="img"
-          >
-            <use
-              href="#epic"
-            />
-          </svg>
-        </span>
-        
-
-      Epic
-    
-      </span>
-       
-      <!---->
-       
-      <div
-        class="gl-relative"
-      >
-        <svg
-          class="hierarchy-rounded-arrow-tail gl-text-gray-400"
-          data-testid="hierarchy-rounded-arrow-tail"
-          fill="none"
-          width="2"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <line
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-width="1.5"
-            x1="0.75"
-            x2="0.75"
-            y1="1"
-            y2="100%"
-          />
-        </svg>
-         
-        <div
-          class="gl-display-block gl-mt-2 gl-ml-6"
-        >
-          <svg
-            aria-hidden="true"
-            class="gl-text-gray-400 gl-icon s16"
-            data-testid="arrow-down-icon"
-            role="img"
-          >
-            <use
-              href="#arrow-down"
-            />
-          </svg>
-        </div>
-         
-        <!---->
-         
-        <span
-          class="gl-border-gray-100 gl-border-1 gl-border-solid gl-rounded-base gl-pl-2 gl-pt-2 gl-pb-2 gl-pr-3 gl-display-inline-flex gl-align-items-center gl-justify-content-center gl-mt-2 gl-line-height-normal gl-ml-6"
-        >
-          <span
-            class="gl-rounded-base gl-mr-2 gl-display-inline-flex justify-content-center align-items-center hierarchy-icon-wrapper"
-            style="background-color: rgb(245, 217, 168); color: rgb(171, 97, 0);"
-          >
-            <svg
-              aria-hidden="true"
-              class="gl-icon s12"
-              data-testid="epic-icon"
-              role="img"
-            >
-              <use
-                href="#epic"
-              />
-            </svg>
-          </span>
-          
-
-          Child epic
-        
-        </span>
-        <div
-          class="gl-display-block gl-mt-2 gl-ml-6"
-        >
-          <svg
-            aria-hidden="true"
-            class="gl-text-gray-400 gl-icon s16"
-            data-testid="arrow-down-icon"
-            role="img"
-          >
-            <use
-              href="#arrow-down"
-            />
-          </svg>
-        </div>
-         
-        <svg
-          aria-hidden="true"
-          class="gl-text-gray-400 gl-ml-2 hierarchy-rounded-arrow gl-icon s16"
-          data-testid="level-up-icon"
-          role="img"
-        >
-          <use
-            href="#level-up"
-          />
-        </svg>
-         
-        <span
-          class="gl-border-gray-100 gl-border-1 gl-border-solid gl-rounded-base gl-pl-2 gl-pt-2 gl-pb-2 gl-pr-3 gl-display-inline-flex gl-align-items-center gl-justify-content-center gl-mt-2 gl-line-height-normal gl-ml-0"
-        >
-          <span
-            class="gl-rounded-base gl-mr-2 gl-display-inline-flex justify-content-center align-items-center hierarchy-icon-wrapper"
-            style="background-color: rgb(203, 226, 249); color: rgb(16, 104, 191);"
-          >
-            <svg
-              aria-hidden="true"
-              class="gl-icon s12"
-              data-testid="issues-icon"
-              role="img"
-            >
-              <use
-                href="#issues"
-              />
-            </svg>
-          </span>
-          
-
-          Issue
-        
-        </span>
-      </div>
-    </div>
-    <div
-      class="gl-mb-3"
-    >
-      <span
-        class="gl-border-gray-100 gl-border-1 gl-border-solid gl-rounded-base gl-pl-2 gl-pt-2 gl-pb-2 gl-pr-3 gl-display-inline-flex gl-align-items-center gl-justify-content-center gl-line-height-normal"
-        data-testid="work-item-wrapper"
-      >
-        <span
-          class="gl-rounded-base gl-mr-2 gl-display-inline-flex justify-content-center align-items-center hierarchy-icon-wrapper"
-          style="background-color: rgb(195, 230, 205); color: rgb(33, 118, 69);"
-        >
-          <svg
-            aria-hidden="true"
-            class="gl-icon s12"
-            data-testid="task-done-icon"
-            role="img"
-          >
-            <use
-              href="#task-done"
-            />
-          </svg>
-        </span>
-        
-
-      Task
-    
-      </span>
-       
-      <!---->
-       
-      <!---->
-    </div>
-    <div
-      class="gl-mb-3"
-    >
-      <span
-        class="gl-border-gray-100 gl-border-1 gl-border-solid gl-rounded-base gl-pl-2 gl-pt-2 gl-pb-2 gl-pr-3 gl-display-inline-flex gl-align-items-center gl-justify-content-center gl-line-height-normal"
-        data-testid="work-item-wrapper"
-      >
-        <span
-          class="gl-rounded-base gl-mr-2 gl-display-inline-flex justify-content-center align-items-center hierarchy-icon-wrapper"
-          style="background-color: rgb(219, 42, 15); color: rgb(253, 212, 205);"
-        >
-          <svg
-            aria-hidden="true"
-            class="gl-icon s16"
-            data-testid="issue-type-incident-icon"
-            role="img"
-          >
-            <use
-              href="#issue-type-incident"
-            />
-          </svg>
-        </span>
-        
-
-      Incident
-    
-      </span>
-       
-      <!---->
-       
-      <!---->
-    </div>
-    <div
-      class="gl-mb-3"
-    >
-      <span
-        class="gl-border-gray-100 gl-border-1 gl-border-solid gl-rounded-base gl-pl-2 gl-pt-2 gl-pb-2 gl-pr-3 gl-display-inline-flex gl-align-items-center gl-justify-content-center gl-line-height-normal"
-        data-testid="work-item-wrapper"
-      >
-        <span
-          class="gl-rounded-base gl-mr-2 gl-display-inline-flex justify-content-center align-items-center hierarchy-icon-wrapper"
-          style="background-color: rgb(197, 227, 251); color: rgb(0, 104, 197);"
-        >
-          <svg
-            aria-hidden="true"
-            class="gl-icon s12"
-            data-testid="requirements-icon"
-            role="img"
-          >
-            <use
-              href="#requirements"
-            />
-          </svg>
-        </span>
-        
-
-      Requirement
-    
-      </span>
-       
-      <!---->
-       
-      <!---->
-    </div>
-    <div
-      class="gl-mb-3"
-    >
-      <span
-        class="gl-border-gray-100 gl-border-1 gl-border-solid gl-rounded-base gl-pl-2 gl-pt-2 gl-pb-2 gl-pr-3 gl-display-inline-flex gl-align-items-center gl-justify-content-center gl-line-height-normal"
-        data-testid="work-item-wrapper"
-      >
-        <span
-          class="gl-rounded-base gl-mr-2 gl-display-inline-flex justify-content-center align-items-center hierarchy-icon-wrapper"
-          style="background-color: rgb(0, 122, 63); color: rgb(186, 232, 203);"
-        >
-          <svg
-            aria-hidden="true"
-            class="gl-icon s16"
-            data-testid="issue-type-test-case-icon"
-            role="img"
-          >
-            <use
-              href="#issue-type-test-case"
-            />
-          </svg>
-        </span>
-        
-
-      Test case
-    
-      </span>
-       
-      <!---->
-       
-      <!---->
-    </div>
-  </div>
-   
-  <!---->
-   
-  <!---->
-   
-  <div />
-</div>
-`;
diff --git a/spec/frontend/work_items_hierarchy/components/app_spec.js b/spec/frontend/work_items_hierarchy/components/app_spec.js
deleted file mode 100644
index c22c0fcb21c..00000000000
--- a/spec/frontend/work_items_hierarchy/components/app_spec.js
+++ /dev/null
@@ -1,78 +0,0 @@
-import { nextTick } from 'vue';
-import { createLocalVue, mount } from '@vue/test-utils';
-import VueApollo from 'vue-apollo';
-import { GlBanner } from '@gitlab/ui';
-import App from '~/work_items_hierarchy/components/app.vue';
-import { extendedWrapper } from 'helpers/vue_test_utils_helper';
-
-const localVue = createLocalVue();
-localVue.use(VueApollo);
-
-describe('WorkItemsHierarchy App', () => {
-  let wrapper;
-  const createComponent = (props = {}, data = {}) => {
-    wrapper = extendedWrapper(
-      mount(App, {
-        localVue,
-        provide: {
-          illustrationPath: '/foo.svg',
-          licensePlan: 'free',
-          ...props,
-        },
-        data() {
-          return data;
-        },
-      }),
-    );
-  };
-
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
-  describe.each`
-    licensePlan
-    ${'free'}
-    ${'premium'}
-    ${'ultimate'}
-  `('when licensePlan is $licensePlan', ({ licensePlan }) => {
-    beforeEach(() => {
-      createComponent({ licensePlan });
-    });
-
-    it('matches the snapshot', () => {
-      expect(wrapper.element).toMatchSnapshot();
-    });
-  });
-
-  describe('survey banner', () => {
-    it('shows when the banner is visible', () => {
-      createComponent({}, { bannerVisible: true });
-
-      expect(wrapper.find(GlBanner).exists()).toBe(true);
-    });
-
-    it('hide when close is called', async () => {
-      createComponent({}, { bannerVisible: true });
-
-      wrapper.findByTestId('close-icon').trigger('click');
-
-      await nextTick();
-
-      expect(wrapper.find(GlBanner).exists()).toBe(false);
-    });
-  });
-
-  describe('Unavailable structure', () => {
-    it.each`
-      licensePlan   | visible
-      ${'free'}     | ${true}
-      ${'premium'}  | ${true}
-      ${'ultimate'} | ${false}
-    `('visibility is $visible when plan is $licensePlan', ({ licensePlan, visible }) => {
-      createComponent({ licensePlan });
-
-      expect(wrapper.findByTestId('unavailable-structure').exists()).toBe(visible);
-    });
-  });
-});
diff --git a/spec/frontend/work_items_hierarchy/components/hierarchy_spec.js b/spec/frontend/work_items_hierarchy/components/hierarchy_spec.js
deleted file mode 100644
index 14c15fb5cbe..00000000000
--- a/spec/frontend/work_items_hierarchy/components/hierarchy_spec.js
+++ /dev/null
@@ -1,118 +0,0 @@
-import { createLocalVue, mount } from '@vue/test-utils';
-import VueApollo from 'vue-apollo';
-import { GlBadge } from '@gitlab/ui';
-import Hierarchy from '~/work_items_hierarchy/components/hierarchy.vue';
-import { extendedWrapper } from 'helpers/vue_test_utils_helper';
-import RESPONSE from '~/work_items_hierarchy/static_response';
-import { workItemTypes } from '~/work_items/constants';
-
-const localVue = createLocalVue();
-localVue.use(VueApollo);
-
-describe('WorkItemsHierarchy Hierarchy', () => {
-  let wrapper;
-
-  const workItemsFromResponse = (response) => {
-    return response.reduce(
-      (itemTypes, item) => {
-        const key = item.available ? 'available' : 'unavailable';
-        itemTypes[key].push({
-          ...item,
-          ...workItemTypes[item.type],
-          nestedTypes: item.nestedTypes
-            ? item.nestedTypes.map((type) => workItemTypes[type])
-            : null,
-        });
-        return itemTypes;
-      },
-      { available: [], unavailable: [] },
-    );
-  };
-
-  const createComponent = (props = {}) => {
-    wrapper = extendedWrapper(
-      mount(Hierarchy, {
-        localVue,
-        propsData: {
-          workItemTypes: props.workItemTypes,
-          ...props,
-        },
-      }),
-    );
-  };
-
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
-  describe('available structure', () => {
-    let items = [];
-
-    beforeEach(() => {
-      items = workItemsFromResponse(RESPONSE.ultimate).available;
-      createComponent({ workItemTypes: items });
-    });
-
-    it('renders all work items', () => {
-      expect(wrapper.findAllByTestId('work-item-wrapper')).toHaveLength(items.length);
-    });
-
-    it('does not render badges', () => {
-      expect(wrapper.find(GlBadge).exists()).toBe(false);
-    });
-  });
-
-  describe('unavailable structure', () => {
-    let items = [];
-
-    beforeEach(() => {
-      items = workItemsFromResponse(RESPONSE.premium).unavailable;
-      createComponent({ workItemTypes: items });
-    });
-
-    it('renders all work items', () => {
-      expect(wrapper.findAllByTestId('work-item-wrapper')).toHaveLength(items.length);
-    });
-
-    it('renders license badges for all work items', () => {
-      expect(wrapper.findAll(GlBadge)).toHaveLength(items.length);
-    });
-
-    it('does not render svg icon for linking', () => {
-      expect(wrapper.findByTestId('hierarchy-rounded-arrow-tail').exists()).toBe(false);
-      expect(wrapper.findByTestId('level-up-icon').exists()).toBe(false);
-    });
-  });
-
-  describe('nested work items', () => {
-    describe.each`
-      licensePlan   | arrowTailVisible | levelUpIconVisible | arrowDownIconVisible
-      ${'ultimate'} | ${true}          | ${true}            | ${true}
-      ${'premium'}  | ${false}         | ${false}           | ${true}
-      ${'free'}     | ${false}         | ${false}           | ${false}
-    `(
-      'when $licensePlan license',
-      ({ licensePlan, arrowTailVisible, levelUpIconVisible, arrowDownIconVisible }) => {
-        let items = [];
-        beforeEach(() => {
-          items = workItemsFromResponse(RESPONSE[licensePlan]).available;
-          createComponent({ workItemTypes: items });
-        });
-
-        it(`${arrowTailVisible ? 'render' : 'does not render'} arrow tail svg`, () => {
-          expect(wrapper.findByTestId('hierarchy-rounded-arrow-tail').exists()).toBe(
-            arrowTailVisible,
-          );
-        });
-
-        it(`${levelUpIconVisible ? 'render' : 'does not render'} arrow tail svg`, () => {
-          expect(wrapper.findByTestId('level-up-icon').exists()).toBe(levelUpIconVisible);
-        });
-
-        it(`${arrowDownIconVisible ? 'render' : 'does not render'} arrow tail svg`, () => {
-          expect(wrapper.findByTestId('arrow-down-icon').exists()).toBe(arrowDownIconVisible);
-        });
-      },
-    );
-  });
-});
diff --git a/spec/frontend/work_items_hierarchy/hierarchy_util_spec.js b/spec/frontend/work_items_hierarchy/hierarchy_util_spec.js
deleted file mode 100644
index 9042fa27d16..00000000000
--- a/spec/frontend/work_items_hierarchy/hierarchy_util_spec.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import { inferLicensePlan } from '~/work_items_hierarchy/hierarchy_util';
-import { LICENSE_PLAN } from '~/work_items_hierarchy/constants';
-
-describe('inferLicensePlan', () => {
-  it.each`
-    epics    | subEpics | licensePlan
-    ${true}  | ${true}  | ${LICENSE_PLAN.ULTIMATE}
-    ${true}  | ${false} | ${LICENSE_PLAN.PREMIUM}
-    ${false} | ${false} | ${LICENSE_PLAN.FREE}
-  `(
-    'returns $licensePlan when epic is $epics and sub-epic is $subEpics',
-    ({ epics, subEpics, licensePlan }) => {
-      expect(inferLicensePlan({ hasEpics: epics, hasSubEpics: subEpics })).toBe(licensePlan);
-    },
-  );
-});