feat: move users collection to site section and change icon to users (#…

…4323)
tinacms · Nov 10, 2023 · c2bec67 · c2bec67
1 parent b1be5de
commit c2bec67
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 5 deletions.
diff --git a/packages/tinacms/src/admin/components/Sidebar.tsx b/packages/tinacms/src/admin/components/Sidebar.tsx
@@ -4,7 +4,7 @@
 
 import React from 'react'
 import { NavLink } from 'react-router-dom'
-import { ImFilesEmpty } from 'react-icons/im'
+import { ImFilesEmpty, ImUsers } from 'react-icons/im'
 import type { IconType } from 'react-icons/lib'
 
 import { Button, Nav } from '@tinacms/toolkit'
@@ -71,6 +71,13 @@ const Sidebar = ({ cms }: { cms: TinaCMS }) => {
               Icon={ImFilesEmpty}
             />
           )}
+          AuthRenderNavCollection={({ collection }) => (
+            <SidebarLink
+              label={collection.label ? collection.label : collection.name}
+              to={`/collections/${collection.name}/~`}
+              Icon={ImUsers}
+            />
+          )}
         />
       )}
       {!renderDesktopNav && (
@@ -119,6 +126,18 @@ const Sidebar = ({ cms }: { cms: TinaCMS }) => {
                     }}
                   />
                 )}
+                AuthRenderNavCollection={({ collection }) => (
+                  <SidebarLink
+                    label={
+                      collection.label ? collection.label : collection.name
+                    }
+                    to={`/collections/${collection.name}/~`}
+                    Icon={ImUsers}
+                    onClick={() => {
+                      setMenuIsOpen(false)
+                    }}
+                  />
+                )}
               >
                 <div className="absolute top-8 right-0 transform translate-x-full overflow-hidden">
                   <Button

diff --git a/packages/tinacms/src/toolkit/react-sidebar/components/nav.tsx b/packages/tinacms/src/toolkit/react-sidebar/components/nav.tsx
@@ -11,14 +11,20 @@ import { SyncStatus, SyncErrorWidget, SyncStatusModal } from './sync-status'
 import { useCMS } from '@toolkit/react-core'
 import { CloudConfigPlugin } from '@toolkit/react-cloud-config'
 
+interface NavCollection {
+  label?: string
+  name: string
+  isAuthCollection?: boolean
+}
+
 interface NavProps {
   isLocalMode: boolean
   children?: any
   className?: string
   userName?: string
   showCollections: boolean
   collectionsInfo: {
-    collections: { label?: string; name: string }[]
+    collections: NavCollection[]
   }
   contentCreators?: any
   screens?: ScreenPlugin[]
@@ -29,6 +35,9 @@ interface NavProps {
   RenderNavCollection: React.ComponentType<{
     collection: { label: string; name: string }
   }>
+  AuthRenderNavCollection: React.ComponentType<{
+    collection: { label: string; name: string }
+  }>
 }
 
 export const Nav = ({
@@ -44,11 +53,32 @@ export const Nav = ({
   RenderNavSite,
   RenderNavCloud,
   RenderNavCollection,
+  AuthRenderNavCollection,
   ...props
 }: NavProps) => {
   const cms = useCMS()
   const { setEdit } = useEditState()
   const [eventsOpen, setEventsOpen] = React.useState(false)
+  const { contentCollections, authCollection } =
+    collectionsInfo.collections.reduce(
+      (
+        acc: {
+          contentCollections: NavCollection[]
+          authCollection?: NavCollection
+        },
+        collection: NavCollection
+      ) => {
+        if (collection.isAuthCollection) {
+          acc.authCollection = collection
+        } else {
+          acc.contentCollections.push(collection)
+        }
+        return acc
+      },
+      {
+        contentCollections: [],
+      }
+    )
 
   function closeEventsModal() {
     setEventsOpen(false)
@@ -181,7 +211,7 @@ export const Nav = ({
             </h4>
             <CollectionsList
               RenderNavCollection={RenderNavCollection}
-              {...collectionsInfo}
+              collections={contentCollections}
             />
           </>
         )}
@@ -204,6 +234,12 @@ export const Nav = ({
                   <CreateContentNavItem key={`plugin-${idx}`} plugin={plugin} />
                 )
               })}
+              {authCollection && (
+                <CollectionsList
+                  RenderNavCollection={AuthRenderNavCollection}
+                  collections={[authCollection]}
+                />
+              )}
             </ul>
           </>
         )}

diff --git a/packages/tinacms/src/toolkit/react-sidebar/components/sidebar.tsx b/packages/tinacms/src/toolkit/react-sidebar/components/sidebar.tsx
@@ -7,14 +7,15 @@
 import * as React from 'react'
 
 import { BiExpandAlt, BiLinkExternal, BiMenu, BiPencil } from 'react-icons/bi'
+import { IconType } from 'react-icons/lib'
 import { ScreenPlugin, ScreenPluginModal } from '@toolkit/react-screens'
 import { SidebarState, SidebarStateOptions } from '../sidebar'
 import { useCMS, useSubscribable } from '@toolkit/react-core'
 import { useState } from 'react'
 
 import { Button } from '@toolkit/styles'
 import { FormsView } from './sidebar-body'
-import { ImFilesEmpty } from 'react-icons/im'
+import { ImFilesEmpty, ImUsers } from 'react-icons/im'
 import { IoMdClose } from 'react-icons/io'
 import { BillingWarning, LocalWarning } from './local-warning'
 import { MdOutlineArrowBackIos } from 'react-icons/md'
@@ -287,6 +288,15 @@ const Sidebar = ({
                   collection={collection}
                 />
               )}
+              AuthRenderNavCollection={({ collection }) => (
+                <SidebarCollectionLink
+                  onClick={() => {
+                    setMenuIsOpen(false)
+                  }}
+                  collection={collection}
+                  Icon={ImUsers}
+                />
+              )}
             />
           )}
           <SidebarBody>
@@ -349,6 +359,15 @@ const Sidebar = ({
                       collection={collection}
                     />
                   )}
+                  AuthRenderNavCollection={({ collection }) => (
+                    <SidebarCollectionLink
+                      onClick={() => {
+                        setMenuIsOpen(false)
+                      }}
+                      collection={collection}
+                      Icon={ImUsers}
+                    />
+                  )}
                 >
                   <div className="absolute top-8 right-0 transform translate-x-full overflow-hidden">
                     <Button
@@ -555,9 +574,11 @@ const SidebarCloudLink = ({ config }: { config: CloudConfigPlugin }) => {
 }
 
 const SidebarCollectionLink = ({
+  Icon = ImFilesEmpty,
   collection,
   onClick,
 }: {
+  Icon?: IconType
   collection: {
     label: string
     name: string
@@ -574,7 +595,7 @@ const SidebarCollectionLink = ({
       }/collections/${collection.name}/~`}
       className="text-base tracking-wide text-gray-500 hover:text-blue-600 flex items-center opacity-90 hover:opacity-100"
     >
-      <ImFilesEmpty className="mr-2 h-6 opacity-80 w-auto" />{' '}
+      <Icon className="mr-2 h-6 opacity-80 w-auto" />{' '}
       {collection.label ? collection.label : collection.name}
     </a>
   )