add header to push pop-up component

neel1996 · neel1996 · commit 9e8c5977c7da · 2020-11-24T17:11:54.000Z
diff --git a/ui/src/Components/DashBoard/Repository/GitComponents/GitOperation/CommitComponent.js b/ui/src/Components/DashBoard/Repository/GitComponents/GitOperation/CommitComponent.js
@@ -57,7 +57,7 @@ export default function CommitComponent(props) {
 
   function commitHandler(commitMsg) {
     setLoadingCommit(true);
-    commitMsg = commitMsg.replace(/"/gi, '\\"');
+    commitMsg = commitMsg.replace(/"/gi, '"');
     if (commitMsg.split("\n") && commitMsg.split("\n").length > 0) {
       commitMsg = commitMsg.toString().split("\n").join("||");
     }
diff --git a/ui/src/Components/DashBoard/Repository/GitComponents/GitOperation/PushComponent.js b/ui/src/Components/DashBoard/Repository/GitComponents/GitOperation/PushComponent.js
@@ -188,6 +188,9 @@ export default function PushComponent(props) {
       {!pushDone ? (
         <>
           <div className="git-ops--push">
+            <div className="text-center font-sans font-semibold mx-auto w-full p-3 text-2xl border-b-2 border-dashed text-gray-800">
+              Push To Remote
+            </div>
             <div className="flex mx-auto justify-around items-center align-middle gap-4">
               <div className="w-2/3 font-sans text-xl font-semibold text-gray-600">
                 Available remotes
diff --git a/ui/src/Components/DashBoard/Repository/RepoComponents/RepoDetails/FileExplorerComponent.js b/ui/src/Components/DashBoard/Repository/RepoComponents/RepoDetails/FileExplorerComponent.js
@@ -134,6 +134,7 @@ export default function FileExplorerComponent(props) {
       }
 
       setCwd(directoryName);
+      setIsLoading(true);
 
       axios({
         url: globalAPIEndpoint,
@@ -154,6 +155,7 @@ export default function FileExplorerComponent(props) {
         },
       })
         .then((res) => {
+          setIsLoading(false);
           if (res.data.data && !res.data.error) {
             const localFolderContent = res.data.data.gitFolderContent;
 
@@ -188,12 +190,14 @@ export default function FileExplorerComponent(props) {
               }
             }
           } else {
+            setIsLoading(false);
             console.log(
               "ERROR: Error occurred while fetching the folder content!"
             );
           }
         })
         .catch((err) => {
+          setIsLoading(false);
           if (err) {
             console.log(
               "ERROR: Error occurred while fetching the folder content!",
diff --git a/ui/src/Components/DashBoard/Repository/RepoComponents/RepoDetails/RepoDetailBackdrop/FetchPullActionComponent.js b/ui/src/Components/DashBoard/Repository/RepoComponents/RepoDetails/RepoDetailBackdrop/FetchPullActionComponent.js
@@ -179,71 +179,88 @@ export default function FetchFromRemoteComponent(props) {
 
   return (
     <>
-      <div className="repo-backdrop--fetchpull">
+      <div className="repo-backdrop--fetchpull pt-4">
         {actionType === "fetch" ? (
-          <div
-            className="fetchpull--fetch-global xl:w-3/5 lg:w-3/4 md:w-3/4 sm:w-11/12"
-            onClick={() => {
-              actionHandler();
-            }}
-          >
-            <div className="text-2xl text-indigo-800 mx-4">
-              <FontAwesomeIcon
-                icon={["fas", "exclamation-circle"]}
-              ></FontAwesomeIcon>
+          <div>
+            <div className="text-center font-sans font-semibold mx-auto w-full p-3 text-2xl border-b-2 border-dashed text-gray-800">
+              Fetch from Remote
+            </div>
+            <div
+              className="fetchpull--fetch-global xl:w-3/5 lg:w-3/4 md:w-3/4 sm:w-11/12"
+              onClick={() => {
+                actionHandler();
+              }}
+            >
+              <div className="text-2xl text-indigo-800 mx-4">
+                <FontAwesomeIcon
+                  icon={["fas", "exclamation-circle"]}
+                ></FontAwesomeIcon>
+              </div>
+              <div>Click to Fetch from default remote and branch</div>
             </div>
-            <div>Click to Fetch without branch selection</div>
           </div>
         ) : null}
-        <div className="m-3 text-2xl font-sans text-gray-800">
-          Available remote repos
-        </div>
-        <div>
-          <select
-            className="fetchpull--select"
-            defaultValue="checked"
-            disabled={remoteData ? false : true}
-            onChange={() => {
-              setIsRemoteSet(true);
-            }}
-            onClick={() => {
-              setResult([]);
-            }}
-            ref={remoteRef}
-          >
-            <option disabled hidden value="checked">
-              {remoteData
-                ? "Select the remote repo"
-                : "Loading available remotes..."}
-            </option>
-            {remoteData ? remoteHostGenerator() : null}
-          </select>
-        </div>
-
-        {isRemoteSet ? (
-          <div>
+        {actionType === "pull" ? (
+          <div className="text-center font-sans font-semibold mx-auto w-full p-3 text-2xl border-b-2 border-dashed text-gray-800">
+            Pull from Remote
+          </div>
+        ) : null}
+        <div className="flex flex-wrap w-3/4 mx-auto my-4 justify-around items-center align-middle gap-4">
+          <div className="w-full font-sans text-xl font-semibold text-gray-600">
+            Available remotes
+          </div>
+          <div className="w-full mb-6">
             <select
               className="fetchpull--select"
               defaultValue="checked"
+              disabled={remoteData ? false : true}
               onChange={() => {
-                setIsBranchSet(true);
+                setIsRemoteSet(true);
               }}
               onClick={() => {
                 setResult([]);
               }}
-              ref={branchRef}
+              ref={remoteRef}
             >
               <option disabled hidden value="checked">
-                Select upstream branch
+                {remoteData
+                  ? "Select the remote repo"
+                  : "Loading available remotes..."}
               </option>
-              {remoteData ? branchListGenerator() : null}
+              {remoteData ? remoteHostGenerator() : null}
             </select>
           </div>
+        </div>
+
+        {isRemoteSet ? (
+          <div className="flex flex-wrap w-3/4 mx-auto my-4 justify-around items-center align-middle gap-4">
+            <div className="w-full font-sans text-xl font-semibold text-gray-600">
+              Available Branches
+            </div>
+            <div className="w-full mb-6">
+              <select
+                className="fetchpull--select"
+                defaultValue="checked"
+                onChange={() => {
+                  setIsBranchSet(true);
+                }}
+                onClick={() => {
+                  setResult([]);
+                }}
+                ref={branchRef}
+              >
+                <option disabled hidden value="checked">
+                  Select upstream branch
+                </option>
+                {remoteData ? branchListGenerator() : null}
+              </select>
+            </div>
+          </div>
         ) : null}
 
         {isRemoteSet && isBranchSet && !loading ? (
           <div
-            className="fetchpull--btn"
+            className="fetchpull--btn mt-10 rounded-b"
             onClick={(event) => {
               const remoteHost = remoteRef.current.value;
               const branchName = branchRef.current.value;
diff --git a/ui/src/Components/styles/RepositoryDetailsBackdrop.css b/ui/src/Components/styles/RepositoryDetailsBackdrop.css
@@ -774,7 +774,6 @@
   margin-right: auto;
   margin-top: auto;
   margin-bottom: auto;
-  padding: 1.5rem;
   border-radius: 0.25rem;
   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
   --bg-opacity: 1;
@@ -821,28 +820,23 @@
 .fetchpull--select {
   border-width: 1px;
   padding: 0.75rem;
-  margin-top: 1rem;
-  margin-bottom: 1rem;
   font-size: 1.25rem;
   border-radius: 0.25rem;
   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
 }
 
 .fetchpull--btn {
-  margin-top: 1rem;
-  margin-bottom: 1rem;
   text-align: center;
   --bg-opacity: 1;
   background-color: #7f9cf5;
   background-color: rgba(127, 156, 245, var(--bg-opacity));
-  border-radius: 0.25rem;
   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
   --text-opacity: 1;
   color: #fff;
   color: rgba(255, 255, 255, var(--text-opacity));
   font-size: 1.25rem;
   font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  padding: 0.5rem;
+  padding: 1rem;
   margin-left: auto;
   margin-right: auto;
   cursor: pointer;

Original file line number	Diff line number	Diff line change
`@@ -57,7 +57,7 @@ export default function CommitComponent(props) {`
`57`	`57`
`58`	`58`	`function commitHandler(commitMsg) {`
`59`	`59`	`setLoadingCommit(true);`
`60`		`- commitMsg = commitMsg.replace(/"/gi, '\\"');`
	`60`	`+ commitMsg = commitMsg.replace(/"/gi, '"');`
`61`	`61`	`if (commitMsg.split("\n") && commitMsg.split("\n").length > 0) {`
`62`	`62`	`commitMsg = commitMsg.toString().split("\n").join("\|\|");`
`63`	`63`	`}`