clear buildpacks when builder changes

dashboard/src/main/home/app-dashboard/types/buildpack.ts

@@ -29,8 +29,13 @@ export const DEFAULT_HEROKU_STACK = "heroku/buildpacks:20";
 
 export const BUILDPACK_TO_NAME: { [key: string]: string } = {
   "heroku/nodejs": "NodeJS",
+  "gcr.io/paketo-buildpacks/nodejs": "NodeJS",
   "heroku/python": "Python",
+  "gcr.io/paketo-buildpacks/python": "Python",
   "heroku/java": "Java",
+  "gcr.io/paketo-buildpacks/java": "Java",
   "heroku/ruby": "Ruby",
+  "gcr.io/paketo-buildpacks/ruby": "Ruby",
   "heroku/go": "Go",
+  "gcr.io/paketo-buildpacks/go": "Go",
 };

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

@@ -10,6 +10,7 @@ interface Props {
   onClickFn: (buildpack: string) => void;
   index: number;
   draggable: boolean;
+  showFullBuildpackName: boolean;
 }
 
 const BuildpackCard: React.FC<Props> = ({
@@ -18,6 +19,7 @@ const BuildpackCard: React.FC<Props> = ({
   onClickFn,
   index,
   draggable,
+  showFullBuildpackName,
 }) => {
   const iconClassName = useMemo(() => {
     if (!buildpack.name) {
@@ -39,6 +41,9 @@ const BuildpackCard: React.FC<Props> = ({
   }, [buildpack.name]);
 
   const renderedBuildpackName = useMemo(() => {
+    if (buildpack.name && buildpack.buildpack && showFullBuildpackName) {
+      return `${buildpack.name} (${buildpack.buildpack})`;
+    }
     return buildpack.name ?? buildpack.buildpack;
   }, [buildpack.name]);
 

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

@@ -48,6 +48,7 @@ const BuildpackConfigurationModal: React.FC<Props> = ({
           isDetectingBuildpacks={isDetectingBuildpacks}
           detectBuildpacksError={detectBuildpacksError}
           droppableId={"modal"}
+          showFullBuildpackName={true}
         />
         <Spacer y={0.5} />
         <Text>Custom buildpacks</Text>

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

@@ -21,6 +21,7 @@ interface Props {
   isDetectingBuildpacks: boolean;
   detectBuildpacksError: string;
   droppableId: string;
+  showFullBuildpackName?: boolean;
 }
 const BuildpackList: React.FC<Props> = ({
   build,
@@ -30,6 +31,7 @@ const BuildpackList: React.FC<Props> = ({
   isDetectingBuildpacks,
   detectBuildpacksError,
   droppableId,
+  showFullBuildpackName = false,
 }) => {
   const { control } = useFormContext<PorterAppFormData>();
   const { remove, append, swap } = useFieldArray({
@@ -100,6 +102,7 @@ const BuildpackList: React.FC<Props> = ({
             index={index}
             draggable={false}
             key={`${buildpack.name}-${index}-available`}
+            showFullBuildpackName={showFullBuildpackName}
           />
         );
       });
@@ -129,6 +132,7 @@ const BuildpackList: React.FC<Props> = ({
                   index={index}
                   draggable={true}
                   key={`${buildpack.name}-${index}-selected`}
+                  showFullBuildpackName={showFullBuildpackName}
                 />
               ))}
               {provided.placeholder}

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

@@ -63,6 +63,7 @@ const BuildpackSettings: React.FC<Props> = ({
       source.git_repo_name,
       source.git_branch,
       build.context,
+      build.builder,
       isModalOpen,
     ],
     async () => {
@@ -121,7 +122,7 @@ const BuildpackSettings: React.FC<Props> = ({
 
     const defaultBuilder =
       data.find(
-        (builder) => builder.name.toLowerCase() === DEFAULT_BUILDER_NAME
+        (builder) => builder.builders != null && builder.builders.includes(build.builder)
       ) ?? data[0];
 
     const allBuildpacks = defaultBuilder.others.concat(