feat: enhance AppListFilters with pulsating dot indicator and update styles

Author: RohitRaj011

src/components/app/list-new/AppListFilters.tsx

@@ -221,29 +221,32 @@ const AppListFilters = ({
                     size={ComponentSizeType.medium}
                 />
                 {window._env_.FEATURE_GROUPED_APP_LIST_FILTERS_ENABLE && (
-                    <GroupedFilterSelectPicker<AppListUrlFilters>
-                        id="app-list-filters"
-                        width={200}
-                        isFilterApplied={
-                            !!(
-                                selectedAppStatus.length ||
-                                selectedProjects.length ||
-                                selectedEnvironments.length ||
-                                selectedTemplateTypes.length ||
-                                selectedClusters.length ||
-                                selectedNamespaces.length
-                            )
-                        }
-                        options={getAppListFilters({
-                            clusterIdsCsv,
-                            isExternalArgo,
-                            isExternalFlux,
-                            isArgoInstalled,
-                            serverMode,
-                            selectedEnvironments,
-                        })}
-                        filterSelectPickerPropsMap={appListFiltersSelectPickerMap}
-                    />
+                    <div className="dc__position-rel">
+                        <GroupedFilterSelectPicker<AppListUrlFilters>
+                            id="app-list-filters"
+                            width={200}
+                            isFilterApplied={
+                                !!(
+                                    selectedAppStatus.length ||
+                                    selectedProjects.length ||
+                                    selectedEnvironments.length ||
+                                    selectedTemplateTypes.length ||
+                                    selectedClusters.length ||
+                                    selectedNamespaces.length
+                                )
+                            }
+                            options={getAppListFilters({
+                                clusterIdsCsv,
+                                isExternalArgo,
+                                isExternalFlux,
+                                isArgoInstalled,
+                                serverMode,
+                                selectedEnvironments,
+                            })}
+                            filterSelectPickerPropsMap={appListFiltersSelectPickerMap}
+                        />
+                        {showPulsatingDot && <div className="dc__position-abs dc__pulsating-dot-new" />}
+                    </div>
                 )}
             </div>
 

src/css/base.scss

@@ -4872,6 +4872,20 @@ textarea::placeholder {
     animation-timing-function: linear;
 }
 
+// TODO: rename this to `dc__pulsating-dot` and remove existing `dc__pulsating-dot`(above class) when removing `FEATURE_GROUPED_APP_LIST_FILTERS_ENABLE` flag
+.dc__pulsating-dot-new {
+    width: 12px;
+    height: 12px;
+    background-color: var(--O500);
+    top: -6px;
+    right: -6px;
+    border-radius: 50%;
+    animation-name: pulse;
+    animation-duration: 2s;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+}
+
 .security-policy--whitelist,
 .security-policy--whitelisted {
     color: var(--G500);