UI: Fixes suffix icon on project selector not work (apache#6671)

* fix the animation suffix icon of select

* move style code

Author: Hoang Nguyen

ui/src/components/header/ProjectMenu.vue

@@ -33,7 +33,7 @@
             <span>{{ $t('label.projects') }}</span>
           </template>
           <span class="custom-suffix-icon">
-            <ProjectOutlined v-if="!loading" />
+            <ProjectOutlined v-if="!loading" class="ant-select-suffix" />
             <LoadingOutlined v-else />
           </span>
         </a-tooltip>

ui/src/components/header/SamlDomainSwitcher.vue

@@ -36,7 +36,7 @@
             <span>{{ $t('label.domain') }}</span>
           </template>
           <span class="custom-suffix-icon">
-            <BlockOutlined v-if="!loading" />
+            <BlockOutlined v-if="!loading" class="ant-select-suffix" />
             <LoadingOutlined v-else />
           </span>
         </a-tooltip>

ui/src/style/ant-overwrite/ant-form.less

@@ -18,3 +18,11 @@
 .ant-form .ant-form-item {
   margin-bottom: 6px;
 }
+
+.ant-select-arrow .ant-select-suffix svg {
+  transition: transform .3s, -webkit-transform .3s;
+}
+
+.ant-select-open .ant-select-arrow .ant-select-suffix svg {
+  transform: rotateZ(-180deg);
+}

ui/src/views/AutogenView.vue

@@ -64,7 +64,7 @@
                     :filterOption="(input, option) => {
                       return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                     }" >
-                    <template #suffixIcon><filter-outlined /></template>
+                    <template #suffixIcon><filter-outlined class="ant-select-suffix" /></template>
                     <a-select-option
                       v-if="['Admin', 'DomainAdmin'].includes($store.getters.userInfo.roletype) && ['vm', 'iso', 'template'].includes($route.name)"
                       key="all"