Fixed issues on loading and saving for custom buildpacks

dashboard/src/components/repo-selector/BuildpackSelection.tsx

@@ -324,6 +324,7 @@ export const AddCustomBuildpackForm: React.FC<{
       name: buildpackUrl,
       config: null,
     };
+    setBuildpackUrl("");
     onAdd(buildpack);
   };
 

dashboard/src/main/home/cluster-dashboard/expanded-chart/BuildSettingsTab.tsx

@@ -4,7 +4,7 @@ import KeyValueArray from "components/form-components/KeyValueArray";
 import SelectRow from "components/form-components/SelectRow";
 import Loading from "components/Loading";
 import MultiSaveButton from "components/MultiSaveButton";
-import { unionBy } from "lodash";
+import _, { unionBy } from "lodash";
 import React, { useContext, useEffect, useMemo, useState } from "react";
 import api from "shared/api";
 import { Context } from "shared/Context";
@@ -21,6 +21,7 @@ import { AddCustomBuildpackForm } from "components/repo-selector/BuildpackSelect
 
 const DEFAULT_PAKETO_STACK = "paketobuildpacks/builder:full";
 const DEFAULT_HEROKU_STACK = "heroku/buildpacks:20";
+const URLRegex = /[(http(s)?):\/\/(www\.)?a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/;
 
 type Buildpack = {
   name: string;
@@ -395,8 +396,19 @@ const BuildpackConfigSection: React.FC<{
           }
         );
 
+        const customBuildpacks: any = currentBuildConfig.buildpacks
+          .filter(
+            (buildpack) =>
+              URLRegex.test(buildpack) &&
+              !buildpack.includes("gcr.io/paketo-buildpacks")
+          )
+          .map((b) => ({ buildpack: b, name: b }));
+
+        console.log(customBuildpacks);
+        console.log(userAddedBuildpacks);
+
         const detectedBuildpacks = unionBy(
-          userAddedBuildpacks,
+          [...userAddedBuildpacks, ...customBuildpacks],
           defaultBuilder.detected,
           "buildpack"
         );
@@ -501,10 +513,18 @@ const BuildpackConfigSection: React.FC<{
     return buildpacks?.map((buildpack) => {
       const icon = `devicon-${buildpack?.name?.toLowerCase()}-plain colored`;
 
+      let disableIcon = false;
+      if (
+        URLRegex.test(buildpack.buildpack) &&
+        !buildpack.buildpack.includes("gcr.io/paketo-buildpacks")
+      ) {
+        disableIcon = true;
+      }
+
       return (
         <StyledCard>
           <ContentContainer>
-            <Icon className={icon} />
+            <Icon disableMarginRight={disableIcon} className={icon} />
             <EventInformation>
               <EventName>{buildpack?.name}</EventName>
             </EventInformation>
@@ -598,13 +618,16 @@ const BuildpackConfigSection: React.FC<{
         {!!selectedBuildpacks?.length &&
           renderBuildpacksList(selectedBuildpacks, "remove")}
 
+        <Helper>Available buildpacks:</Helper>
         {!!availableBuildpacks?.length && (
-          <>
-            <Helper>Available buildpacks:</Helper>
-            {renderBuildpacksList(availableBuildpacks, "add")}
-          </>
+          <>{renderBuildpacksList(availableBuildpacks, "add")}</>
         )}
 
+        <Helper>
+          You may also add buildpacks by directly providing their GitHub links
+          or links to ZIP files that contain the buildpack source code.
+        </Helper>
+
         <AddCustomBuildpackForm onAdd={handleAddCustomBuildpack} />
       </>
     </BuildpackConfigurationContainer>
@@ -685,10 +708,14 @@ const ContentContainer = styled.div`
   align-items: center;
 `;
 
-const Icon = styled.span`
+const Icon = styled.span<{ disableMarginRight: boolean }>`
   font-size: 20px;
   margin-left: 10px;
-  margin-right: 20px;
+  ${(props) => {
+    if (!props.disableMarginRight) {
+      return "margin-right: 20px";
+    }
+  }}
 `;
 
 const EventInformation = styled.div`