fix: review comments

Author: Elessar1802

src/Assets/IconV2/ic-delete-dots.svg

@@ -24,8 +24,7 @@ const ShortcutKeyComboTooltipContent = ({ text, combo }: TooltipProps['shortcutK
         {!!combo?.length && (
             <div className="flexbox dc__gap-4 dc__align-items-center flex-wrap">
                 {combo.map((key) => (
-                    // TODO: check styling for this since span was replaced by kbd
-                    <kbd key={key} className="shortcut-keys__chip dc__capitalize lh-16 fs-11 fw-5 flex">
+                    <kbd key={key} className="shortcut-keys__chip dc__capitalize lh-16 fs-11 fw-5 flex text__white">
                         {KEYBOARD_KEYS_MAP[key]}
                     </kbd>
                 ))}

src/Common/Tooltip/ShortcutKeyComboTooltipContent.tsx

@@ -28,12 +28,12 @@ export enum ClusterFiltersType {
 
 export enum InstallationClusterStatus {
     Creating = 'Creating',
-    Deleting = 'Deleting',
+    Updated = 'Updated',
     Updating = 'Updating',
     Installed = 'Installed',
     Failed = 'Failed',
-    Superseded = 'Superseded',
-    Undefined = 'Undefined',
+    Deleting = 'Deleting',
+    Deleted = 'Deleted',
 }
 
 export enum ClusterStatusType {

src/Pages/ResourceBrowser/types.ts

@@ -39,6 +39,7 @@ import { ReactComponent as ICCpu } from '@IconsV2/ic-cpu.svg'
 import { ReactComponent as ICCrown } from '@IconsV2/ic-crown.svg'
 import { ReactComponent as ICCube } from '@IconsV2/ic-cube.svg'
 import { ReactComponent as ICDelete } from '@IconsV2/ic-delete.svg'
+import { ReactComponent as ICDeleteDots } from '@IconsV2/ic-delete-dots.svg'
 import { ReactComponent as ICDeleteLightning } from '@IconsV2/ic-delete-lightning.svg'
 import { ReactComponent as ICDelhivery } from '@IconsV2/ic-delhivery.svg'
 import { ReactComponent as ICDevtron } from '@IconsV2/ic-devtron.svg'
@@ -157,6 +158,7 @@ export const iconMap = {
     'ic-cpu': ICCpu,
     'ic-crown': ICCrown,
     'ic-cube': ICCube,
+    'ic-delete-dots': ICDeleteDots,
     'ic-delete-lightning': ICDeleteLightning,
     'ic-delete': ICDelete,
     'ic-delhivery': ICDelhivery,

src/Shared/Components/Icon/Icon.tsx

@@ -438,3 +438,15 @@ export const SelectPickerGroupHeading = <OptionValue,>({
 export const renderLoadingMessage = () => (
     <p className="m-0 cn-7 fs-13 fw-4 lh-20 py-6 px-8 dc__loading-dots">Loading</p>
 )
+
+export const ValueContainerWithLoadingShimmer = (props: ValueContainerProps) => {
+    const {
+        selectProps: { isLoading },
+    } = props
+
+    if (!isLoading) {
+        return <components.ValueContainer {...props} />
+    }
+
+    return <div className="shimmer w-150 h-22" />
+}

src/Shared/Components/SelectPicker/common.tsx

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+export { ValueContainerWithLoadingShimmer } from './common'
 export { default as FilterSelectPicker } from './FilterSelectPicker'
 export { default as SelectPicker } from './SelectPicker.component'
 export * from './SelectPickerTextArea.component'

src/Shared/Components/SelectPicker/index.ts

@@ -34,6 +34,7 @@ export enum StatusType {
     INPROGRESS = 'INPROGRESS',
     HIBERNATING = 'HIBERNATING',
     TIMED_OUT = 'TIMED_OUT',
+    DELETING = 'DELETING',
 }
 
 export interface StatusComponentProps {

src/Shared/Components/StatusComponent/types.ts

@@ -71,6 +71,10 @@ export const getIconName = (status: string, showAnimatedIcon: boolean): IconName
         case 'timedout':
         case 'timed_out':
             return 'ic-timeout-two-dash'
+        case 'deleting':
+            return 'ic-delete-dots'
+        case 'deleted':
+            return 'ic-delete'
         default:
             return null
     }
@@ -93,6 +97,8 @@ export const getIconColor = (status: string): IconsProps['color'] => {
             return 'O500'
         case 'timedout':
         case 'timed_out':
+        case 'deleting':
+        case 'deleted':
             return 'R500'
         default:
             return null