hotfix buildpack rendering (#3685)

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

@@ -1,12 +1,12 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { DeviconsNameList } from "assets/devicons-name-list";
 import styled, { keyframes } from "styled-components";
 import { Draggable } from "react-beautiful-dnd";
-import { Buildpack } from "../../types/buildpack";
+import { Buildpack } from "main/home/app-dashboard/types/buildpack";
 
 interface Props {
   buildpack: Buildpack;
-  action: 'add' | 'remove';
+  action: "add" | "remove";
   onClickFn: (buildpack: string) => void;
   index: number;
   draggable: boolean;
@@ -19,65 +19,73 @@ const BuildpackCard: React.FC<Props> = ({
   index,
   draggable,
 }) => {
-  const [languageName] = buildpack.name?.split("/").reverse();
-
-  const devicon = DeviconsNameList.find(
-    (devicon) => languageName.toLowerCase() === devicon.name
-  );
-
-  const icon = `devicon-${devicon?.name}-plain colored`;
-
-  return (
-    draggable ?
-      <Draggable
-        draggableId={buildpack.name}
-        index={index}
-        key={buildpack.name}
-      >
-        {(provided) => (
-          <StyledCard
-            marginBottom="5px"
-            {...provided.draggableProps}
-            {...provided.dragHandleProps}
-            ref={provided.innerRef}
-            key={buildpack.name}
-          >
-            <ContentContainer>
-              <Icon disableMarginRight={devicon == null} className={icon} />
-              <EventInformation>
-                <EventName>{buildpack?.name}</EventName>
-              </EventInformation>
-            </ContentContainer>
-            <ActionContainer>
-              <ActionButton
-                onClick={() => onClickFn(buildpack.buildpack)}
-              >
-                <span className="material-icons">{action === "remove" ? "delete" : "add"}</span>
-              </ActionButton>
+  const iconClassName = useMemo(() => {
+    if (!buildpack.name) {
+      return "";
+    }
 
-            </ActionContainer>
-          </StyledCard>
-        )}
-      </Draggable>
-      :
-      <StyledCard marginBottom="5px" key={buildpack.name}>
-        <ContentContainer>
-          <Icon disableMarginRight={devicon == null} className={icon} />
-          <EventInformation>
-            <EventName>{buildpack?.name}</EventName>
-          </EventInformation>
-        </ContentContainer>
-        <ActionContainer>
-          <ActionButton
-            onClick={() => onClickFn(buildpack.buildpack)}
-          >
-            <span className="material-icons">{action === "remove" ? "delete" : "add"}</span>
-          </ActionButton>
+    const splits = buildpack.name.split("/");
+    if (splits.length !== 1) {
+      return "";
+    }
 
-        </ActionContainer>
-      </StyledCard>
+    const devicon = DeviconsNameList.find(
+      (devicon) => splits[0].toLowerCase() === devicon.name
+    );
+    if (!devicon) {
+      return "";
+    }
+    return `devicon-${devicon.name}-plain colored`
+  }, [buildpack.name]);
+
+  const renderedBuildpackName = useMemo(() => {
+    return buildpack.name ?? buildpack.buildpack;
+  }, [buildpack.name]);
+
+  return draggable ? (
+    <Draggable draggableId={renderedBuildpackName} index={index} key={renderedBuildpackName}>
+      {(provided) => (
+        <StyledCard
+          marginBottom="5px"
+          {...provided.draggableProps}
+          {...provided.dragHandleProps}
+          ref={provided.innerRef}
+          key={renderedBuildpackName}
+        >
+          <ContentContainer>
+            {iconClassName && <Icon className={iconClassName} />}
+            <EventInformation>
+              <EventName>{renderedBuildpackName}</EventName>
+            </EventInformation>
+          </ContentContainer>
+          <ActionContainer>
+            <ActionButton onClick={() => onClickFn(buildpack.buildpack)}>
+              <span className="material-icons">
+                {action === "remove" ? "delete" : "add"}
+              </span>
+            </ActionButton>
+          </ActionContainer>
+        </StyledCard>
+      )}
+    </Draggable>
+  ) : (
+    <StyledCard marginBottom="5px" key={renderedBuildpackName}>
+      <ContentContainer>
+        {iconClassName && <Icon className={iconClassName} />}
+        <EventInformation>
+          <EventName>{renderedBuildpackName}</EventName>
+        </EventInformation>
+      </ContentContainer>
+      <ActionContainer>
+        <ActionButton onClick={() => onClickFn(buildpack.buildpack)}>
+          <span className="material-icons">
+            {action === "remove" ? "delete" : "add"}
+          </span>
+        </ActionButton>
+      </ActionContainer>
+    </StyledCard>
   );
-}
+};
 
 export default BuildpackCard;
 
@@ -112,14 +120,10 @@ const ContentContainer = styled.div`
   align-items: center;
 `;
 
-const Icon = styled.span<{ disableMarginRight: boolean }>`
+const Icon = styled.span`
   font-size: 20px;
   margin-left: 10px;
-  ${(props) => {
-    if (!props.disableMarginRight) {
-      return "margin-right: 20px";
-    }
-  }}
+  margin-right: 20px
 `;
 
 const EventInformation = styled.div`
@@ -154,12 +158,10 @@ const ActionButton = styled.button`
   border-radius: 50%;
   cursor: pointer;
   color: #aaaabb;
-
   :hover {
     background: #ffffff11;
     border: 1px solid #ffffff44;
   }
-
   > span {
     font-size: 20px;
   }

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { DeviconsNameList } from "assets/devicons-name-list";
 import styled, { keyframes } from "styled-components";
 import { Draggable } from "react-beautiful-dnd";
@@ -19,28 +19,43 @@ const BuildpackCard: React.FC<Props> = ({
   index,
   draggable,
 }) => {
-  const [languageName] = buildpack.name?.split("/").reverse();
+  const iconClassName = useMemo(() => {
+    if (!buildpack.name) {
+      return "";
+    }
 
-  const devicon = DeviconsNameList.find(
-    (devicon) => languageName.toLowerCase() === devicon.name
-  );
+    const splits = buildpack.name.split("/");
+    if (splits.length !== 1) {
+      return "";
+    }
 
-  const icon = `devicon-${devicon?.name}-plain colored`;
+    const devicon = DeviconsNameList.find(
+      (devicon) => splits[0].toLowerCase() === devicon.name
+    );
+    if (!devicon) {
+      return "";
+    }
+    return `devicon-${devicon.name}-plain colored`
+  }, [buildpack.name]);
+
+  const renderedBuildpackName = useMemo(() => {
+    return buildpack.name ?? buildpack.buildpack;
+  }, [buildpack.name]);
 
   return draggable ? (
-    <Draggable draggableId={buildpack.name} index={index} key={buildpack.name}>
+    <Draggable draggableId={renderedBuildpackName} index={index} key={renderedBuildpackName}>
       {(provided) => (
         <StyledCard
           marginBottom="5px"
           {...provided.draggableProps}
           {...provided.dragHandleProps}
           ref={provided.innerRef}
-          key={buildpack.name}
+          key={renderedBuildpackName}
         >
           <ContentContainer>
-            <Icon disableMarginRight={devicon == null} className={icon} />
+            {iconClassName && <Icon className={iconClassName} />}
             <EventInformation>
-              <EventName>{buildpack?.name}</EventName>
+              <EventName>{renderedBuildpackName}</EventName>
             </EventInformation>
           </ContentContainer>
           <ActionContainer>
@@ -54,11 +69,11 @@ const BuildpackCard: React.FC<Props> = ({
       )}
     </Draggable>
   ) : (
-    <StyledCard marginBottom="5px" key={buildpack.name}>
+    <StyledCard marginBottom="5px" key={renderedBuildpackName}>
       <ContentContainer>
-        <Icon disableMarginRight={devicon == null} className={icon} />
+        {iconClassName && <Icon className={iconClassName} />}
         <EventInformation>
-          <EventName>{buildpack?.name}</EventName>
+          <EventName>{renderedBuildpackName}</EventName>
         </EventInformation>
       </ContentContainer>
       <ActionContainer>
@@ -105,14 +120,10 @@ const ContentContainer = styled.div`
   align-items: center;
 `;
 
-const Icon = styled.span<{ disableMarginRight: boolean }>`
+const Icon = styled.span`
   font-size: 20px;
   margin-left: 10px;
-  ${(props) => {
-    if (!props.disableMarginRight) {
-      return "margin-right: 20px";
-    }
-  }}
+  margin-right: 20px
 `;
 
 const EventInformation = styled.div`