Support illustrations.svg in Vite
What does this MR do and why?
This MR adds support for illustration.svg from gitlab-svgs project, which is now directly imported in GitLab UI.
This change uses the same hack that's used from the sprites_icon (icons.svg), which points the URL at the Rails asset pipeline, instead of Webpack/Vite.
Addresses Support SVG imports in dev mode (#569526 - closed).
How to set up and validate locally
- Open any merge request
- Apply this patch:
diff --git a/app/assets/javascripts/diffs/components/diffs_file_tree.vue b/app/assets/javascripts/diffs/components/diffs_file_tree.vue
--- a/app/assets/javascripts/diffs/components/diffs_file_tree.vue (revision b614dd26d67ad3148e4abb16b68c364da37f27e1)
+++ b/app/assets/javascripts/diffs/components/diffs_file_tree.vue (date 1757593105791)
@@ -1,5 +1,6 @@
<script>
import { debounce } from 'lodash';
+import { GlEmptyState } from '@gitlab/ui';
import { mapActions } from 'pinia';
import PanelResizer from '~/vue_shared/components/panel_resizer.vue';
import { getCookie, setCookie } from '~/lib/utils/common_utils';
@@ -16,7 +17,7 @@
export default {
name: 'DiffsFileTree',
- components: { FileBrowserHeight, TreeList, PanelResizer },
+ components: { FileBrowserHeight, TreeList, PanelResizer, GlEmptyState },
minTreeWidth: MIN_TREE_WIDTH,
maxTreeWidth: window.innerWidth / 2,
props: {
@@ -134,6 +135,7 @@
class="rd-app-sidebar diff-tree-list"
:class="{ 'diff-tree-list-floating': floating }"
>
+ <gl-empty-state title="Empty" illustration-name="empty-search-md" />
<div
data-testid="file-browser-floating-wrapper"
class="diff-tree-list-floating-wrapper"
- Observe the empty state icon in the file browser