chore(console): remove get started progress dropdown (#3931)

packages/console/src/containers/AppContent/components/Topbar/index.tsx

@@ -6,7 +6,6 @@ import Logo from '@/assets/images/logo.svg';
 import Spacer from '@/components/Spacer';
 import { isCloud } from '@/consts/cloud';
 import EarlyBirdGift from '@/onboarding/components/EarlyBirdGift';
-import GetStartedProgress from '@/pages/GetStarted/components/GetStartedProgress';
 
 import UserInfo from '../UserInfo';
 
@@ -30,7 +29,6 @@ function Topbar({ className }: Props) {
         </>
       )}
       <Spacer />
-      <GetStartedProgress />
       {isCloud && <EarlyBirdGift />}
       <UserInfo />
     </div>

packages/console/src/pages/GetStarted/components/GetStartedProgress/index.module.scss

@@ -1,74 +0,0 @@
-@use '@/scss/underscore' as _;
-
-.progress {
-  display: flex;
-  align-items: center;
-  padding: _.unit(2);
-  border-radius: 8px;
-  transition: background-color 0.2s ease-in-out;
-  user-select: none;
-  cursor: pointer;
-
-  &:hover {
-    background-color: var(--color-hover-variant);
-  }
-
-  &.active {
-    background-color: var(--color-focused-variant);
-  }
-
-  .icon {
-    width: 24px;
-    height: 24px;
-    margin-right: 8px;
-  }
-
-  span {
-    font: var(--font-label-2);
-    color: var(--color-text);
-  }
-}
-
-.dropdown {
-  padding: 0;
-}
-
-.dropdownTitle {
-  @include _.section-head-1;
-  padding: _.unit(3) _.unit(5) _.unit(3) _.unit(4);
-}
-
-.dropdownItemWrapper {
-  .index {
-    width: 20px;
-    height: 20px;
-    font: var(--font-section-head-1);
-
-    > svg {
-      width: 16px;
-      height: 16px;
-    }
-  }
-
-  .dropdownItem {
-    height: 42px;
-    padding: 0 _.unit(5) 0 _.unit(4);
-    border-top: 1px solid var(--color-hover);
-    border-bottom: 1px solid transparent;
-    border-radius: unset;
-
-    &:last-child {
-      // Note: use 7px to avoid display issue with parent border-radius
-      border-bottom-left-radius: 7px;
-      border-bottom-right-radius: 7px;
-    }
-
-    &:hover:not(:last-child) {
-      border-bottom-color: var(--color-hover);
-
-      + .dropdownItem {
-        border-top-color: transparent;
-      }
-    }
-  }
-}

packages/console/src/pages/GetStarted/components/GetStartedProgress/index.tsx

@@ -1,90 +0,0 @@
-import { Theme } from '@logto/schemas';
-import classNames from 'classnames';
-import { useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-
-import TadaDark from '@/assets/images/tada-dark.svg';
-import Tada from '@/assets/images/tada.svg';
-import Dropdown, { DropdownItem } from '@/components/Dropdown';
-import DynamicT from '@/components/DynamicT';
-import Index from '@/components/Index';
-import useTheme from '@/hooks/use-theme';
-import useUserPreferences from '@/hooks/use-user-preferences';
-import { onKeyDownHandler } from '@/utils/a11y';
-
-import useGetStartedMetadata from '../../hook';
-
-import * as styles from './index.module.scss';
-
-function GetStartedProgress() {
-  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
-  const {
-    data: { getStartedHidden },
-  } = useUserPreferences();
-  const theme = useTheme();
-  const Icon = theme === Theme.Light ? Tada : TadaDark;
-  const anchorRef = useRef<HTMLDivElement>(null);
-  const [showDropdown, setShowDropdown] = useState(false);
-  const { data, completedCount, totalCount } = useGetStartedMetadata();
-
-  if (getStartedHidden) {
-    return null;
-  }
-
-  const showDropDown = () => {
-    setShowDropdown(true);
-  };
-
-  const hideDropDown = () => {
-    setShowDropdown(false);
-  };
-
-  return (
-    <>
-      <div
-        ref={anchorRef}
-        role="button"
-        tabIndex={0}
-        className={classNames(styles.progress, showDropdown && styles.active)}
-        onKeyDown={onKeyDownHandler({
-          Esc: hideDropDown,
-          Enter: showDropDown,
-          ' ': showDropDown,
-        })}
-        onClick={showDropDown}
-      >
-        <Icon className={styles.icon} />
-        <span>
-          {t('get_started.progress', {
-            completed: completedCount,
-            total: totalCount,
-          })}
-        </span>
-      </div>
-      <Dropdown
-        anchorRef={anchorRef}
-        className={styles.dropdown}
-        isOpen={showDropdown}
-        horizontalAlign="end"
-        title={t('get_started.progress_dropdown_title')}
-        titleClassName={styles.dropdownTitle}
-        onClose={hideDropDown}
-      >
-        <div className={styles.dropdownItemWrapper}>
-          {data.map(({ id, title, isComplete, onClick }, index) => (
-            <DropdownItem
-              key={id}
-              className={styles.dropdownItem}
-              icon={<Index className={styles.index} index={index + 1} isComplete={isComplete} />}
-              onClick={onClick}
-            >
-              <DynamicT forKey={title} />
-            </DropdownItem>
-          ))}
-        </div>
-      </Dropdown>
-    </>
-  );
-}
-
-export default GetStartedProgress;