allow typing in dockerfile along with file select (#4389)

dashboard/src/main/home/app-dashboard/validate-apply/build-settings/FileSelector.tsx

@@ -95,7 +95,7 @@ const FileSelector: React.FC<Props> = ({
                     {relativePath}
                   </FileItem>
                 ))
-                .with({ type: "dir" }, (content) => (
+                .with({ type: "dir" }, () => (
                   <Item
                     key={i}
                     onClick={() => {
@@ -107,7 +107,7 @@ const FileSelector: React.FC<Props> = ({
                     {relativePath}
                   </Item>
                 ))
-                .with({ type: "symlink" }, (content) => (
+                .with({ type: "symlink" }, () => (
                   <FileItem
                     key={i}
                     onClick={() => ({})}

dashboard/src/main/home/app-dashboard/validate-apply/build-settings/docker/DockerfileSettings.tsx

@@ -1,92 +1,129 @@
-import React, { useState } from 'react';
+import React, { useEffect, useRef, useState } from "react";
+import { Controller, useFormContext } from "react-hook-form";
+import styled from "styled-components";
+
+import Container from "components/porter/Container";
+import Input from "components/porter/Input";
+import Spacer from "components/porter/Spacer";
 import Text from "components/porter/Text";
-import Spacer from 'components/porter/Spacer';
-import { Controller, useFormContext } from 'react-hook-form';
-import { PorterAppFormData } from 'lib/porter-apps';
-import Input from 'components/porter/Input';
-import FileSelector from '../FileSelector';
-import styled from 'styled-components';
-import Button from 'components/porter/Button';
+import { type PorterAppFormData } from "lib/porter-apps";
+
+import folder from "assets/folder_v2.svg";
+
+import FileSelector from "../FileSelector";
 
 type Props = {
-    projectId: number;
-    repoId: number;
-    repoOwner: string;
-    repoName: string;
-    branch: string;
-}
+  projectId: number;
+  repoId: number;
+  repoOwner: string;
+  repoName: string;
+  branch: string;
+};
 const DockerfileSettings: React.FC<Props> = ({
-    projectId,
-    repoId,
-    repoOwner,
-    repoName,
-    branch,
+  projectId,
+  repoId,
+  repoOwner,
+  repoName,
+  branch,
 }) => {
-    const { control, watch } = useFormContext<PorterAppFormData>();
-    const [showFileSelector, setShowFileSelector] = useState<boolean>(false);
+  const { control, watch } = useFormContext<PorterAppFormData>();
+  const [showFileSelector, setShowFileSelector] = useState<boolean>(false);
 
-    const path = watch("app.build.dockerfile", "")
+  const path = watch("app.build.dockerfile", "");
 
-    return (
-        <Controller
-            name="app.build.dockerfile"
-            control={control}
-            render={({ field: { onChange } }) => (
-                <div>
-                    <Text>
-                        Dockerfile path
-                    </Text>
-                    <Spacer y={0.5} />
-                    <InputWrapper
-                        onClick={(e) => {
-                            e.stopPropagation();
-                            if (!showFileSelector) {
-                                onChange("");
-                                setShowFileSelector(true);
-                            }
-                        }}
-                    >
-                        <Input
-                            width="300px"
-                            placeholder="ex: ./Dockerfile"
-                            value={path}
-                            setValue={() => ({})}
-                            hideCursor={true}
-                        />
-                        {showFileSelector &&
-                            <Button
-                                disabled={path === ""}
-                                onClick={() => setShowFileSelector(false)}
-                                color="#b91133"
-                            >
-                                Close
-                            </Button>
-                        }
-                    </InputWrapper>
-                    {showFileSelector && <div>
-                        <Spacer y={0.5} />
-                        <FileSelector 
-                            projectId={projectId} 
-                            repoId={repoId} 
-                            repoOwner={repoOwner} 
-                            repoName={repoName} 
-                            branch={branch}
-                            onFileSelect={(path: string) => onChange(`./${path}`)} 
-                            isFileSelectable={(path: string) => path.toLowerCase().includes("dockerfile")}
-                            headerText={"Select your Dockerfile:"}
-                        />
-                    </div>}
-                </div>
-            )}
-        />
-    );
+  const fileSelectorRef = useRef(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event: { target: unknown }): void => {
+      if (
+        fileSelectorRef.current &&
+        !fileSelectorRef.current?.contains(event.target)
+      ) {
+        setShowFileSelector(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [fileSelectorRef]);
+
+  return (
+    <Controller
+      name="app.build.dockerfile"
+      control={control}
+      render={({ field: { onChange } }) => (
+        <div>
+          <Text>Dockerfile path</Text>
+          <Spacer y={0.5} />
+          <Container row>
+            <Input
+              width="300px"
+              placeholder="ex: ./Dockerfile"
+              value={path}
+              setValue={(val: string) => {
+                onChange(val);
+              }}
+            />
+            <Spacer inline x={0.5} />
+            <FileDirectoryToggleButton
+              onClick={() => {
+                setShowFileSelector(!showFileSelector);
+              }}
+              color="#b91133"
+            >
+              <img src={folder} />
+            </FileDirectoryToggleButton>
+          </Container>
+          {showFileSelector && (
+            <div ref={fileSelectorRef}>
+              <FileSelector
+                projectId={projectId}
+                repoId={repoId}
+                repoOwner={repoOwner}
+                repoName={repoName}
+                branch={branch}
+                onFileSelect={(path: string) => {
+                  onChange(`./${path}`);
+                  setShowFileSelector(false);
+                }}
+                isFileSelectable={(path: string) =>
+                  path.toLowerCase().includes("dockerfile")
+                }
+                headerText={"Select your Dockerfile:"}
+                widthPercent={100}
+              />
+            </div>
+          )}
+        </div>
+      )}
+    />
+  );
 };
 
 export default DockerfileSettings;
 
-const InputWrapper = styled.div`
-    margin-bottom: -7px;
-    width: 500px;
-    display: flex;
-    justify-content: space-between;
-`;
+const FileDirectoryToggleButton = styled.div`
+  height: 30px;
+  min-width: 30px;
+  width: 30px;
+  border-radius: 5px;
+  border: 1px solid #383a3f;
+  cursor: pointer;
+  margin-right: 22px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  > img {
+    height: 16px;
+    width: 16px;
+    opacity: 0.5;
+  }
+
+  :hover {
+    border: 1px solid ${(props) => props.theme.text.primary};
+    > img {
+      opacity: 0.9;
+    }
+  }
+`;