Improve filter behavior in container registry
# Problem to solve #### 1. Root image is not filterable Since this name is appended in the frontend this is not searchable in the API call, thus misleading the users: ![Screen_Recording_2022-01-21_at_12.32.02](/uploads/8531bfea2968359e2f5cd80c0738b4a6/Screen_Recording_2022-01-21_at_12.32.02.gif) #### 2. Only part of the path works with the filter The filter mechanism only works on the image repo name. ![Screen_Recording_2022-01-21_at_12.20.09](/uploads/71b3052b12a470fc1f5cd46f95ddf4df/Screen_Recording_2022-01-21_at_12.20.09.gif) #### 3. Displaying the entire path on the UI is not very legible We've heard in customer research that it can be difficult to find the image repository you're searching for as there is so much text on the screen ![Screen_Shot_2022-01-21_at_15.10.50](/uploads/ce1003307a53c4dfbe857ed6c96f63a7/Screen_Shot_2022-01-21_at_15.10.50.png) # Solution ## How the path displays in UI This proposal was informed by the following [survey](https://gitlab.com/gitlab-org/ux-research/-/issues/1868) * Stop appending `Root image` in the frontend. * Keep the sub repositories in the path `sub1/sub2/sub3` * Hide the `company/group/sub-group` from the path in the UI by default, with an option to expand it: ![Screen_Shot_2022-06-03_at_11.36.29](/uploads/c36c404b267c6486ebaf5733f84e5099/Screen_Shot_2022-06-03_at_11.36.29.png) | Currently shown in UI | Proposal | | ------ | ------ | | `company/group/project/ Root image` | `project` | | `company/group/project/image` | `project/image` | | `company/group/project/sub1/sub2/sub3` | `project/sub1/sub2/sub3` | ## Copy button The copy button should still copy the entire path ![Screen_Shot_2022-05-19_at_14.11.53](/uploads/0255624965e22f7dafc7d5c15ed027bb/Screen_Shot_2022-05-19_at_14.11.53.png) | What's shown in the UI | What the copy button copies | | ------ | ------ | | `project/image` | `registry.gitlab.com/company/group/project/image`| ## Filtering * Filter by the entire path. Imagining the path is the UI is `project/image` | Before | After | | ------ | ------ | | Only `image` is filterable | entire path is filterable, including `/` (e.g. `project/ima`) | # Implementation ## Tracking button clicks We should track how often the ellipsis button is clicked each time the user is on the page. If the user clicks on every row to expand the full path, we know that we're inconveniencing the user. ![Screen_Shot_2022-06-03_at_13.55.48](/uploads/7951080ffd2006576c36ea69cf6f7e6c/Screen_Shot_2022-06-03_at_13.55.48.png) ## Phased rollout We could considering rolling out the truncation with the ellipsis button to a small subset of users, tracking how often users are clicking the ellipsis button and then making a determination to roll out further.
epic