fix(admin-ui): Lint all UI files (#3459)

packages/admin-ui/ui/src/hooks/use-clipboard.js

@@ -7,7 +7,7 @@ import React from "react"
  * @param {Object} options
  * @param {number} options.successDuration - Duration of the success state in milliseconds
  * @param {function} options.onCopied - Callback function to call after copying
- * @returns {Array} returns tuple containing isCopied state and handleCopy function
+ * @return {Array} returns tuple containing isCopied state and handleCopy function
  */
 const useClipboard = (text, options = {}) => {
   const [isCopied, setIsCopied] = React.useState(false)

packages/admin-ui/ui/src/hooks/use-computed-height.ts

@@ -9,7 +9,7 @@ export const useComputedHeight = (bottomPad: number) => {
 
   useLayoutEffect(() => {
     if (ref.current) {
-      let { top } = ref.current.getBoundingClientRect()
+      const { top } = ref.current.getBoundingClientRect()
       // take the inner height of the window, subtract 32 from it (for the bottom padding), then subtract that from the top position of our grid row (wherever that is)
       heightRef.current = height - bottomPad - top
     }

packages/admin-ui/ui/src/hooks/use-imperative-dialog.tsx

@@ -23,11 +23,11 @@ const DeleteDialog = ({
         <Modal.Content className="!py-large">
           <div className="flex flex-col">
             <span className="inter-large-semibold">{heading}</span>
-            <span className="mt-1 inter-base-regular text-grey-50">{text}</span>
+            <span className="inter-base-regular text-grey-50 mt-1">{text}</span>
           </div>
           {extraConfirmation && (
-            <div className="flex flex-col my-base">
-              <span className="mt-1 inter-base-regular text-grey-50">
+            <div className="my-base flex flex-col">
+              <span className="inter-base-regular text-grey-50 mt-1">
                 Type the name{" "}
                 <span className="font-semibold">"{entityName}"</span> to
                 confirm.
@@ -44,10 +44,10 @@ const DeleteDialog = ({
           )}
         </Modal.Content>
         <Modal.Footer className="border-none !pt-0">
-          <div className="flex justify-end w-full">
+          <div className="flex w-full justify-end">
             <Button
               variant="secondary"
-              className="justify-center mr-2 text-small"
+              className="text-small mr-2 justify-center"
               size="small"
               onClick={onCancel}
             >
@@ -55,7 +55,7 @@ const DeleteDialog = ({
             </Button>
             <Button
               size="small"
-              className="justify-center text-small"
+              className="text-small justify-center"
               variant="nuclear"
               onClick={onConfirm}
               disabled={extraConfirmation && entityName !== confirmationString}

packages/admin-ui/ui/src/hooks/use-notification.tsx

@@ -1,4 +1,3 @@
-import React from "react"
 import { toast } from "react-hot-toast"
 import Notification, {
   NotificationTypes,

packages/admin-ui/ui/src/hooks/use-query-filters.ts

@@ -202,9 +202,10 @@ const useQueryFilters = (defaultFilters: Partial<FilterState>) => {
   /* ********* VALUES ********* */
 
   const queryObject = useMemo(() => getQueryObject(state), [state])
-  const representationObject = useMemo(() => getRepresentationObject(state), [
-    state,
-  ])
+  const representationObject = useMemo(
+    () => getRepresentationObject(state),
+    [state]
+  )
   const representationString = useMemo(() => getRepresentationString(), [state])
 
   return {

packages/admin-ui/ui/src/hooks/use-scroll.ts

@@ -7,7 +7,7 @@ type useScrollProps = {
 export const useScroll = ({ threshold = 0 }: useScrollProps) => {
   const [isScrolled, setIsScrolled] = useState(false)
 
-  const scrollListener = e => {
+  const scrollListener = (e) => {
     const currentScrollY = e.target.scrollTop
     if (currentScrollY > threshold) {
       setIsScrolled(true)