add filters for asset explorer (#1056)

* add filters for asset explorer

* use decentraland/oddish-action

* move 'Filter' to enum

* move IAsset type determination to fn

Author: nicoecheza

.github/workflows/ci.yml

@@ -115,7 +115,7 @@ jobs:
         run: make install
 
       - name: update version of packages/@dcl/sdk/package.json, this version will be used for all packages
-        uses: menduz/oddish-action@master
+        uses: decentraland/oddish-action@master
         with:
           cwd: ./packages/@dcl/sdk
           deterministic-snapshot: true
@@ -136,7 +136,7 @@ jobs:
 
       - name: publish @dcl/js-runtime package
         id: publish_dcl_js_runtime
-        uses: menduz/oddish-action@master
+        uses: decentraland/oddish-action@master
         with:
           registry-url: 'https://registry.npmjs.org'
           access: public
@@ -158,7 +158,7 @@ jobs:
           AWS_SECRET_ACCESS_KEY: ${{ secrets.SDK_TEAM_AWS_SECRET }}
 
       - name: publish @dcl/ecs package
-        uses: menduz/oddish-action@master
+        uses: decentraland/oddish-action@master
         id: publish_ecs
         with:
           registry-url: 'https://registry.npmjs.org'
@@ -194,7 +194,7 @@ jobs:
 
       - name: publish @dcl/react-ecs package
         id: publish_dcl_react_ecs
-        uses: menduz/oddish-action@master
+        uses: decentraland/oddish-action@master
         with:
           registry-url: 'https://registry.npmjs.org'
           access: public
@@ -216,7 +216,7 @@ jobs:
           AWS_SECRET_ACCESS_KEY: ${{ secrets.SDK_TEAM_AWS_SECRET }}
 
       - name: publish @dcl/inspector package
-        uses: menduz/oddish-action@master
+        uses: decentraland/oddish-action@master
         id: publish_decentraland_inspector
         with:
           registry-url: 'https://registry.npmjs.org'
@@ -253,7 +253,7 @@ jobs:
           INSPECTOR_URL: ${{ secrets.SDK_TEAM_S3_BASE_URL }}/${{ steps.publish_decentraland_inspector.outputs.s3-bucket-key }}
 
       - name: publish @dcl/sdk-commands package
-        uses: menduz/oddish-action@master
+        uses: decentraland/oddish-action@master
         id: publish_decentraland_sdk_commands
         with:
           registry-url: 'https://registry.npmjs.org'
@@ -297,7 +297,7 @@ jobs:
           SDK_COMMANDS_S3_URL: ${{ secrets.SDK_TEAM_S3_BASE_URL }}/${{ steps.publish_decentraland_sdk_commands.outputs.s3-bucket-key }}
 
       - name: publish @dcl/sdk package
-        uses: menduz/oddish-action@master
+        uses: decentraland/oddish-action@master
         id: publish_decentraland_sdk
         with:
           registry-url: 'https://registry.npmjs.org'
@@ -326,7 +326,7 @@ jobs:
           AWS_SECRET_ACCESS_KEY: ${{ secrets.SDK_TEAM_AWS_SECRET }}
 
       - name: publish @dcl/playground-assets package
-        uses: menduz/oddish-action@master
+        uses: decentraland/oddish-action@master
         id: publish_playground_assets
         with:
           registry-url: 'https://registry.npmjs.org'

packages/@dcl/inspector/src/components/ImportAsset/ImportAsset.css

@@ -10,6 +10,14 @@
   height: 100%;
 }
 
+.ImportAsset .children {
+  height: 100%;
+}
+
+.ImportAsset .children.hidden {
+  display: none;
+}
+
 .ImportAssetHover {
   padding: 8px;
 }

packages/@dcl/inspector/src/components/ImportAsset/ImportAsset.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, useCallback, useEffect, useState } from 'react'
+import React, { PropsWithChildren, useCallback, useEffect, useState, useMemo } from 'react'
 import cx from 'classnames'
 import { HiOutlineUpload } from 'react-icons/hi'
 
@@ -117,6 +117,8 @@ const ImportAsset = React.forwardRef<InputRef, PropsWithChildren<PropTypes>>(({
     [assets]
   )
 
+  const isImportActive = useMemo(() => !files.length && isHover, [files, isHover])
+
   return (
     <div className={cx('ImportAsset', { ImportAssetHover: isHover })}>
       <FileInput
@@ -127,16 +129,15 @@ const ImportAsset = React.forwardRef<InputRef, PropsWithChildren<PropTypes>>(({
         accept={ACCEPTED_FILE_TYPES}
         multiple
       >
-        {!files.length && isHover ? (
+        {isImportActive && (
           <>
             <div className="upload-icon">
               <HiOutlineUpload />
             </div>
             <span className="text">Drop {ACCEPTED_FILE_TYPES_STR} files</span>
           </>
-        ) : (
-          children
         )}
+        <div className={cx('children', { hidden: isImportActive })}>{children}</div>
         <Modal
           isOpen={!!files.length}
           onRequestClose={handleCloseModal}

packages/@dcl/inspector/src/components/ProjectAssetExplorer/Filters/Filters.css

@@ -0,0 +1,33 @@
+.ProjectFilters {
+  display: flex;
+  flex-direction: column;
+  padding: 10px;
+  height: calc(100% - 30px);
+  overflow-y: auto;
+  user-select: none;
+}
+
+.ProjectFilters .filter {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 10px;
+  cursor: pointer;
+  margin-bottom: 10px;
+  border-radius: 8px;
+}
+
+.ProjectFilters .filter:last-child {
+  margin: 0;
+}
+
+.ProjectFilters .filter:hover,
+.ProjectFilters .filter.active {
+  background-color: var(--accent-blue-07);
+}
+
+.ProjectFilters .filter svg {
+  width: 20px;
+  height: 20px;
+  margin-bottom: 4px;
+}

packages/@dcl/inspector/src/components/ProjectAssetExplorer/Filters/Filters.tsx

@@ -0,0 +1,48 @@
+import { useCallback } from 'react'
+import cx from 'classnames'
+import { AiOutlineSound as AudioIcon } from 'react-icons/ai'
+import { IoIosImage as ImageIcon } from 'react-icons/io'
+import { IoCubeOutline as ModelIcon, IoVideocamOutline as VideoIcon } from 'react-icons/io5'
+import { FaFile as AssetIcon } from 'react-icons/fa'
+import { GoClock as RecentIcon } from 'react-icons/go'
+
+import { PropTypes, Filter } from './types'
+
+import './Filters.css'
+
+export function Filters({ filters, active, onClick }: PropTypes) {
+  const getFilter = useCallback((type: Filter) => {
+    switch (type) {
+      case Filter.All:
+        return { title: 'All Assets', icon: AssetIcon }
+      case Filter.Recents:
+        return { title: 'Recents', icon: RecentIcon }
+      case Filter.Models:
+        return { title: 'Models', icon: ModelIcon }
+      case Filter.Images:
+        return { title: 'Images', icon: ImageIcon }
+      case Filter.Audio:
+        return { title: 'Audio', icon: AudioIcon }
+      case Filter.Video:
+        return { title: 'Video', icon: VideoIcon }
+      default:
+        return { title: 'Other', icon: AssetIcon }
+    }
+  }, [])
+
+  const handleClick = useCallback((type: Filter) => () => onClick(type), [])
+
+  return (
+    <div className="ProjectFilters">
+      {filters.map(($) => {
+        const _filter = getFilter($)
+        return (
+          <div className={cx('filter', { active: $ === active })} onClick={handleClick($)}>
+            {<_filter.icon />}
+            {_filter.title}
+          </div>
+        )
+      })}
+    </div>
+  )
+}

packages/@dcl/inspector/src/components/ProjectAssetExplorer/Filters/index.ts

@@ -0,0 +1 @@
+export { Filters } from './Filters'

packages/@dcl/inspector/src/components/ProjectAssetExplorer/Filters/types.ts

@@ -0,0 +1,15 @@
+export enum Filter {
+  All = 'all',
+  Recents = 'recents',
+  Models = 'models',
+  Images = 'images',
+  Video = 'video',
+  Audio = 'audio',
+  Other = 'other'
+}
+
+export type PropTypes = {
+  filters: Filter[]
+  active?: Filter
+  onClick(type: Filter): void
+}

packages/@dcl/inspector/src/components/ProjectAssetExplorer/ProjectAssetExplorer.css

@@ -4,8 +4,8 @@
 }
 
 .ProjectView > .Tree-View {
-  border-right: 0.1px solid;
-  border-color: var(--border-gray);
+  border-right: 0.1px solid var(--border-gray);
+  border-left: 0.1px solid var(--border-gray);
 }
 
 .ProjectView > .Tree-View > .with-context-menu > .editor-assets-tree {