From ad7a53d72884ce1a76b4fc2c6745d7425dae5deb Mon Sep 17 00:00:00 2001
From: julia-zielke <julia.zielke@direktiv.io>
Date: Tue, 9 Jan 2024 12:19:55 +0100
Subject: [PATCH] Version 2 - only two cases: emptyDirectory or pathNotFound

Signed-off-by: julia-zielke <julia.zielke@direktiv.io>
---
 public/locales/en/translation.json      |   3 -
 src/componentsNext/FilePicker/index.tsx | 259 ++++++++++--------------
 src/design/Filepicker/index.tsx         |  20 +-
 3 files changed, 113 insertions(+), 169 deletions(-)

diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
index 74a1921b4..a69f34e0d 100644
--- a/public/locales/en/translation.json
+++ b/public/locales/en/translation.json
@@ -1241,9 +1241,6 @@
     "filepicker": {
       "buttonText": "Browse Files",
       "placeholder": "No File selected",
-      "emptyNamespace": {
-        "title": "The namespace \"{{namespace}}\" is empty."
-      },
       "emptyDirectory": {
         "title": "The directory \"{{path}}\" is empty."
       },
diff --git a/src/componentsNext/FilePicker/index.tsx b/src/componentsNext/FilePicker/index.tsx
index 0525884ca..60b97c3d8 100644
--- a/src/componentsNext/FilePicker/index.tsx
+++ b/src/componentsNext/FilePicker/index.tsx
@@ -41,171 +41,134 @@ const FilePicker = ({
     path,
     namespace,
   });
-  //const isError = true;
 
   const { t } = useTranslation();
 
   const { parent, isRoot, segments } = analyzePath(path);
 
   const results = data?.children?.results ?? [];
-
   const noResults = data?.children?.results.length ? false : true;
 
-  const scrollableLength =
-    data?.children == undefined || data.children.results.length < 8
-      ? false
-      : true;
-
-  namespace = namespace || data?.namespace;
-
-  const emptyNamespace = isRoot && noResults;
-  const emptyDirectory = !isRoot && !isError && noResults;
-
-  console.log("data " + data);
-  console.log("isRoot " + isRoot);
+  const emptyDirectory = !isError && noResults;
+  const pathNotFound = isError;
+  const folderUpButton = !isRoot && data && !isError;
 
   return (
     <ButtonBar>
-      {emptyNamespace ? (
-        <Filepicker
-          buttonText={t("components.filepicker.buttonText")}
-          onClick={() => {
-            setPath(convertFileToPath(inputValue));
-          }}
-          className="w-44"
-        >
-          <FilepickerHeading>
-            <div className="py-3">
-              {t("components.filepicker.emptyNamespace.title", { namespace })}
+      <Filepicker
+        buttonText={t("components.filepicker.buttonText")}
+        onClick={() => {
+          setPath(convertFileToPath(inputValue));
+        }}
+        className="w-44"
+      >
+        <FilepickerHeading>
+          <BreadcrumbRoot className="py-3">
+            <Breadcrumb
+              noArrow
+              onClick={() => {
+                setPath("/");
+              }}
+              className="h-5 hover:underline"
+            >
+              <Home />
+            </Breadcrumb>
+            {segments.map((file) => {
+              const isEmpty = file.absolute === "";
+
+              if (isEmpty) return null;
+              return (
+                <Breadcrumb
+                  key={file.relative}
+                  onClick={() => {
+                    setPath(file.absolute);
+                  }}
+                  className="h-5 hover:underline"
+                >
+                  {file.relative}
+                </Breadcrumb>
+              );
+            })}
+          </BreadcrumbRoot>
+        </FilepickerHeading>
+        <FilepickerSeparator />
+        {folderUpButton && (
+          <>
+            <div
+              onClick={() => {
+                parent ? setPath(parent.absolute) : null;
+              }}
+              className="h-auto w-full cursor-pointer p-0 font-normal text-gray-11 hover:underline focus:bg-transparent focus:ring-0 focus:ring-transparent focus:ring-offset-0 dark:text-gray-dark-11 dark:focus:bg-transparent"
+            >
+              <FilepickerListItem icon={FolderUp}>..</FilepickerListItem>
             </div>
-          </FilepickerHeading>
-        </Filepicker>
-      ) : (
-        <Filepicker
-          buttonText={t("components.filepicker.buttonText")}
-          onClick={() => {
-            setPath(convertFileToPath(inputValue));
-          }}
-          className="w-44"
-        >
-          <FilepickerHeading>
-            <BreadcrumbRoot className="py-3">
-              <Breadcrumb
-                noArrow
-                onClick={() => {
-                  setPath("/");
-                }}
-                className="h-5 hover:underline"
-              >
-                <Home />
-              </Breadcrumb>
-              {segments.map((file) => {
-                const isEmpty = file.absolute === "";
-
-                if (isEmpty) return null;
-                return (
-                  <Breadcrumb
-                    key={file.relative}
+            <FilepickerSeparator />
+          </>
+        )}
+        {emptyDirectory && (
+          <FilepickerMessage>
+            {t("components.filepicker.emptyDirectory.title", { path })}
+          </FilepickerMessage>
+        )}
+        {pathNotFound && (
+          <>
+            <div
+              onClick={() => {
+                setPath("/");
+              }}
+              className="h-auto w-full cursor-pointer p-0 font-normal text-gray-11 hover:underline focus:bg-transparent focus:ring-0 focus:ring-transparent focus:ring-offset-0 dark:text-gray-dark-11 dark:focus:bg-transparent"
+            >
+              <FilepickerListItem icon={ArrowLeftToLineIcon}>
+                {t("components.filepicker.error.linkText")}
+              </FilepickerListItem>
+            </div>
+            <FilepickerSeparator />
+            <FilepickerMessage>
+              {t("components.filepicker.error.title", { path })}
+            </FilepickerMessage>
+          </>
+        )}
+        <FilepickerList>
+          {results.map((file) => {
+            const isSelectable = selectable?.(file) ?? true;
+            return (
+              <Fragment key={file.name}>
+                {file.type === "directory" ? (
+                  <div
                     onClick={() => {
-                      setPath(file.absolute);
+                      setPath(file.path);
                     }}
-                    className="h-5 hover:underline"
+                    className="h-auto w-full cursor-pointer text-gray-11 hover:underline focus:bg-transparent focus:ring-0 focus:ring-transparent focus:ring-offset-0 dark:text-gray-dark-11 dark:focus:bg-transparent"
                   >
-                    {file.relative}
-                  </Breadcrumb>
-                );
-              })}
-            </BreadcrumbRoot>
-          </FilepickerHeading>
-
-          <FilepickerSeparator />
-          <div>
-            {!isRoot && data && (
-              <>
-                <div
-                  onClick={() => {
-                    parent ? setPath(parent.absolute) : null;
-                  }}
-                  className="h-auto w-full cursor-pointer p-0 font-normal text-gray-11 hover:underline focus:bg-transparent focus:ring-0 focus:ring-transparent focus:ring-offset-0 dark:text-gray-dark-11 dark:focus:bg-transparent"
-                >
-                  <FilepickerListItem icon={FolderUp}>..</FilepickerListItem>
-                </div>
-                <FilepickerSeparator />
-              </>
-            )}
-            {isError ? (
-              <>
-                <div
-                  onClick={() => {
-                    setPath("/");
-                  }}
-                  className="h-auto w-full cursor-pointer p-0 font-normal text-gray-11 hover:underline focus:bg-transparent focus:ring-0 focus:ring-transparent focus:ring-offset-0 dark:text-gray-dark-11 dark:focus:bg-transparent"
-                >
-                  <FilepickerListItem icon={ArrowLeftToLineIcon}>
-                    {t("components.filepicker.error.linkText")}
-                  </FilepickerListItem>
-                </div>
-                <FilepickerMessage>
-                  {t("components.filepicker.error.title", { path })}
-                </FilepickerMessage>
-              </>
-            ) : (
-              <div>
-                {emptyDirectory ? (
-                  <FilepickerMessage>
-                    {t("components.filepicker.emptyDirectory.title", { path })}
-                  </FilepickerMessage>
+                    <FilepickerListItem icon={fileTypeToIcon(file.type)}>
+                      {file.name}
+                    </FilepickerListItem>
+                  </div>
                 ) : (
-                  <FilepickerList scrollableLength={scrollableLength}>
-                    {results.map((file) => {
-                      const isSelectable = selectable?.(file) ?? true;
-                      return (
-                        <Fragment key={file.name}>
-                          {file.type === "directory" ? (
-                            <div
-                              onClick={() => {
-                                setPath(file.path);
-                              }}
-                              className="h-auto w-full cursor-pointer text-gray-11 hover:underline focus:bg-transparent focus:ring-0 focus:ring-transparent focus:ring-offset-0 dark:text-gray-dark-11 dark:focus:bg-transparent"
-                            >
-                              <FilepickerListItem
-                                icon={fileTypeToIcon(file.type)}
-                              >
-                                {file.name}
-                              </FilepickerListItem>
-                            </div>
-                          ) : (
-                            <FilepickerClose
-                              className={twMergeClsx(
-                                "h-auto w-full text-gray-11 hover:underline dark:text-gray-dark-11",
-                                !isSelectable && "cursor-not-allowed opacity-70"
-                              )}
-                              disabled={!isSelectable}
-                              onClick={() => {
-                                setPath(file.parent);
-                                setInputValue(file.path);
-                                onChange?.(file.path);
-                              }}
-                            >
-                              <FilepickerListItem
-                                icon={fileTypeToIcon(file.type)}
-                              >
-                                {file.name}
-                              </FilepickerListItem>
-                            </FilepickerClose>
-                          )}
-
-                          <FilepickerSeparator />
-                        </Fragment>
-                      );
-                    })}
-                  </FilepickerList>
+                  <FilepickerClose
+                    className={twMergeClsx(
+                      "h-auto w-full text-gray-11 hover:underline dark:text-gray-dark-11",
+                      !isSelectable && "cursor-not-allowed opacity-70"
+                    )}
+                    disabled={!isSelectable}
+                    onClick={() => {
+                      setPath(file.parent);
+                      setInputValue(file.path);
+                      onChange?.(file.path);
+                    }}
+                  >
+                    <FilepickerListItem icon={fileTypeToIcon(file.type)}>
+                      {file.name}
+                    </FilepickerListItem>
+                  </FilepickerClose>
                 )}
-              </div>
-            )}
-          </div>
-        </Filepicker>
-      )}
+
+                <FilepickerSeparator />
+              </Fragment>
+            );
+          })}
+        </FilepickerList>
+      </Filepicker>
       <Input
         placeholder={t("components.filepicker.placeholder")}
         value={inputValue}
diff --git a/src/design/Filepicker/index.tsx b/src/design/Filepicker/index.tsx
index 6262fb311..51cf164a7 100644
--- a/src/design/Filepicker/index.tsx
+++ b/src/design/Filepicker/index.tsx
@@ -44,28 +44,12 @@ const FilepickerMessage: FC<PropsWithChildren> = ({ children }) => (
   </div>
 );
 
-const Content: FC<PropsWithChildren> = ({ children }) => (
-  <div className="max-h-96 min-h-fit w-full overflow-x-hidden">{children}</div>
-);
-
-const ScrollableContent: FC<PropsWithChildren> = ({ children }) => (
-  <div className="max-h-96 min-h-fit w-full overflow-x-hidden overflow-y-scroll">
+const FilepickerList: FC<PropsWithChildren> = ({ children }) => (
+  <div className={twMergeClsx("max-h-96 min-h-fit w-full overflow-x-hidden")}>
     {children}
   </div>
 );
 
-export type FilepickerListProps = PropsWithChildren & {
-  scrollableLength: boolean;
-};
-
-const FilepickerList: FC<FilepickerListProps> = ({
-  children,
-  scrollableLength,
-}) => {
-  const Comp = scrollableLength ? ScrollableContent : Content;
-  return <Comp>{children}</Comp>;
-};
-
 // asChild only works with exactly one child, so when asChild is true, we can not have a loading property
 type AsChildOrLoading =
   | {