Merge pull request #200 from KodingDev/fix/volumes-dropdown

fix: volumes dropdown

packages/interface/src/components/primitive/Listbox.tsx

@@ -1,7 +1,7 @@
-import { Listbox as ListboxPrimitive, Transition } from '@headlessui/react';
+import { Listbox as ListboxPrimitive } from '@headlessui/react';
 import { CheckIcon, SelectorIcon } from '@heroicons/react/solid';
 import clsx from 'clsx';
-import React, { Fragment, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 interface ListboxOption {
 	option: string;
@@ -25,9 +25,9 @@ export default function Listbox(props: { options: ListboxOption[]; className?: s
 					<ListboxPrimitive.Button
 						className={clsx(
 							`relative w-full py-2 pl-3 pr-10 text-left bg-white dark:bg-gray-500 
-              rounded-lg shadow-md cursor-default focus:outline-none focus-visible:ring-2 
-              focus-visible:ring-opacity-75 focus-visible:ring-white focus-visible:ring-offset-orange-300 
-              focus-visible:ring-offset-2 focus-visible:border-indigo-500 sm:text-sm`,
+								rounded-lg shadow-md cursor-default focus:outline-none focus-visible:ring-2 
+								focus-visible:ring-opacity-75 focus-visible:ring-white focus-visible:ring-offset-orange-300 
+								focus-visible:ring-offset-2 focus-visible:border-indigo-500 sm:text-sm`,
 							props.className
 						)}
 					>
@@ -36,64 +36,57 @@ export default function Listbox(props: { options: ListboxOption[]; className?: s
 						) : (
 							<span className="block truncate opacity-70">Nothing selected...</span>
 						)}
+
 						<span className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
 							<SelectorIcon className="w-5 h-5 text-gray-400" aria-hidden="true" />
 						</span>
 					</ListboxPrimitive.Button>
-					<Transition
-						as={Fragment}
-						leave="transition ease-in duration-100"
-						leaveFrom="opacity-100"
-						leaveTo="opacity-0"
-					>
-						<ListboxPrimitive.Options
-							className={`
-                absolute w-full mt-1 overflow-auto rounded-md sm:text-sm
-                text-base bg-white dark:bg-gray-500 shadow-lg max-h-60 
-                ring-1 ring-black ring-opacity-5 focus:outline-none
-                `}
-						>
-							{props.options.map((person, personIdx) => (
-								<ListboxPrimitive.Option
-									key={personIdx}
-									className={({ active }) =>
-										`cursor-default select-none relative rounded m-1 py-2 pl-8 pr-4 dark:text-white focus:outline-none  ${
-											active
-												? 'text-primary-900 bg-primary-600'
-												: 'text-gray-900 dark:hover:bg-gray-600 dark:hover:bg-opacity-20'
-										}`
-									}
-									value={person}
-								>
-									{({ selected }) => (
-										<>
-											<span
-												className={`block truncate ${selected ? 'font-medium' : 'font-normal'}`}
-											>
-												{person.option}
-												{person.description && (
-													<span
-														className={clsx(
-															'text-gray-300 leading-5 ml-3 text-xs',
-															selected && 'text-white'
-														)}
-													>
-														{person.description}
-													</span>
-												)}
-											</span>
 
-											{selected ? (
-												<span className="absolute inset-y-0 left-0 flex items-center pl-2 text-white">
-													<CheckIcon className="w-5 h-5" aria-hidden="true" />
+					<ListboxPrimitive.Options
+						className={`
+							absolute w-full mt-1 overflow-auto rounded-md sm:text-sm
+							text-base bg-white dark:bg-gray-500 shadow-lg max-h-60 
+							ring-1 ring-black ring-opacity-5 focus:outline-none
+						`}
+					>
+						{props.options.map((option, index) => (
+							<ListboxPrimitive.Option
+								key={option.key}
+								className={({ active }) =>
+									`cursor-default select-none relative rounded m-1 py-2 pl-8 pr-4 dark:text-white focus:outline-none  ${
+										active
+											? 'text-primary-900 bg-primary-600'
+											: 'text-gray-900 dark:hover:bg-gray-600 dark:hover:bg-opacity-20'
+									}`
+								}
+								value={option}
+							>
+								{({ selected }) => (
+									<>
+										<span className={`block truncate ${selected ? 'font-medium' : 'font-normal'}`}>
+											{option.option}
+											{option.description && (
+												<span
+													className={clsx(
+														'text-gray-300 leading-5 ml-3 text-xs',
+														selected && 'text-white'
+													)}
+												>
+													{option.description}
 												</span>
-											) : null}
-										</>
-									)}
-								</ListboxPrimitive.Option>
-							))}
-						</ListboxPrimitive.Options>
-					</Transition>
+											)}
+										</span>
+
+										{selected ? (
+											<span className="absolute inset-y-0 left-0 flex items-center pl-2 text-white">
+												<CheckIcon className="w-5 h-5" aria-hidden="true" />
+											</span>
+										) : null}
+									</>
+								)}
+							</ListboxPrimitive.Option>
+						))}
+					</ListboxPrimitive.Options>
 				</div>
 			</ListboxPrimitive>
 		</>

packages/interface/src/screens/settings/GeneralSettings.tsx

@@ -46,11 +46,14 @@ export default function GeneralSettings() {
 					<div className="flex flex-grow">
 						<Listbox
 							options={
-								volumes?.map((volume) => ({
-									key: volume.name,
-									option: volume.name,
-									description: volume.mount_point
-								})) ?? []
+								volumes?.map((volume) => {
+									const name = volume.name && volume.name.length ? volume.name : volume.mount_point;
+									return {
+										key: name,
+										option: name,
+										description: volume.mount_point
+									};
+								}) ?? []
 							}
 						/>
 					</div>