fix: tags dialog fixes and improvements (#176)

* refactor: split secret components into files

* fix: misc improvements to tag selection and creator ui

* fix: correctly handle state changes when closing / opening dialog

* fix: don't trigger property update if tags are unchanged

* fix: button cursor when disabled

* chore: remove unused imports

* fix: import

frontend/app/[team]/apps/[app]/environments/[environment]/page.tsx

@@ -1,12 +1,6 @@
 'use client'
 
-import {
-  ApiEnvironmentSyncStatusChoices,
-  EnvironmentSyncType,
-  EnvironmentType,
-  SecretInput,
-  SecretType,
-} from '@/apollo/graphql'
+import { EnvironmentType, SecretInput, SecretType } from '@/apollo/graphql'
 import UnlockKeyringDialog from '@/components/auth/UnlockKeyringDialog'
 import { KeyringContext } from '@/contexts/keyringContext'
 import { GetSecrets } from '@/graphql/queries/secrets/getSecrets.gql'
@@ -26,27 +20,22 @@ import { useMutation, useQuery } from '@apollo/client'
 import { Fragment, useContext, useEffect, useRef, useState } from 'react'
 import { Button } from '@/components/common/Button'
 import {
-  FaArrowRight,
   FaChevronDown,
   FaDownload,
   FaExchangeAlt,
   FaPlus,
   FaSearch,
-  FaSync,
   FaTimesCircle,
   FaUndo,
 } from 'react-icons/fa'
 import SecretRow from '@/components/environments/SecretRow'
 import clsx from 'clsx'
 import { toast } from 'react-toastify'
 import { organisationContext } from '@/contexts/organisationContext'
-import { Menu, Popover, Transition } from '@headlessui/react'
+import { Menu, Transition } from '@headlessui/react'
 import { usePathname, useSearchParams } from 'next/navigation'
 import Link from 'next/link'
 import { Alert } from '@/components/common/Alert'
-import { SyncStatusIndicator } from '@/components/syncing/SyncStatusIndicator'
-import { SyncCard } from '@/components/syncing/SyncCard'
-import { StatusIndicator } from '@/components/common/StatusIndicator'
 import { EnvSyncStatus } from '@/components/syncing/EnvSyncStatus'
 
 type EnvKeyring = {

frontend/components/common/Button.tsx

@@ -53,7 +53,7 @@ export function Button(buttonProps: ButtonProps) {
     'inline-flex gap-1 justify-center items-center overflow-hidden text-sm font-medium transition-all ease-in-out',
     variantStyles[variant],
     classString,
-    (buttonProps.disabled || isLoading) && 'opacity-60 pointer-events-none'
+    (buttonProps.disabled || isLoading) && 'opacity-60 cursor-not-allowed'
   )
 
   let arrowIcon = (

frontend/components/environments/SecretPropertyDiffs.tsx

@@ -1,8 +1,8 @@
 import { SecretEventType, SecretTagType, SecretType } from '@/apollo/graphql'
 import { areTagsAreSame } from '@/utils/tags'
-import { Tag } from './SecretRow'
 import { FaRedoAlt, FaUndoAlt } from 'react-icons/fa'
 import { Button } from '../common/Button'
+import { Tag } from './Tag'
 
 export const SecretPropertyDiffs = (props: {
   secret: SecretType