Merge pull request #1999 from porter-dev/nico/por-456-disable-url-checking-on-custom

[POR-456] Disable url checking for custom buildpacks

dashboard/src/assets/devicons-name-list.ts

@@ -0,0 +1,279 @@
+export const DeviconsNameList = [
+  { name: "adonisjs" },
+  { name: "aftereffects" },
+  { name: "amazonwebservices" },
+  { name: "android" },
+  { name: "androidstudio" },
+  { name: "aarch64" },
+  { name: "angularjs" },
+  { name: "ansible" },
+  { name: "apache" },
+  { name: "apachekafka" },
+  { name: "appcelerator" },
+  { name: "apple" },
+  { name: "appwrite" },
+  { name: "arduino" },
+  { name: "atom" },
+  { name: "azure" },
+  { name: "babel" },
+  { name: "backbonejs" },
+  { name: "bamboo" },
+  { name: "bash" },
+  { name: "behance" },
+  { name: "bitbucket" },
+  { name: "bootstrap" },
+  { name: "bulma" },
+  { name: "bower" },
+  { name: "c" },
+  { name: "cakephp" },
+  { name: "canva" },
+  { name: "centos" },
+  { name: "ceylon" },
+  { name: "chrome" },
+  { name: "circleci" },
+  { name: "clojure" },
+  { name: "cmake" },
+  { name: "clojurescript" },
+  { name: "codecov" },
+  { name: "codeigniter" },
+  { name: "codepen" },
+  { name: "coffeescript" },
+  { name: "composer" },
+  { name: "confluence" },
+  { name: "couchdb" },
+  { name: "cplusplus" },
+  { name: "csharp" },
+  { name: "css3" },
+  { name: "cucumber" },
+  { name: "crystal" },
+  { name: "d3js" },
+  { name: "dart" },
+  { name: "debian" },
+  { name: "denojs" },
+  { name: "devicon" },
+  { name: "django" },
+  { name: "docker" },
+  { name: "doctrine" },
+  { name: "dot-net" },
+  { name: "dotnetcore" },
+  { name: "drupal" },
+  { name: "digitalocean" },
+  { name: "discordjs" },
+  { name: "electron" },
+  { name: "eleventy" },
+  { name: "elixir" },
+  { name: "elm" },
+  { name: "ember" },
+  { name: "embeddedc" },
+  { name: "erlang" },
+  { name: "eslint" },
+  { name: "express" },
+  { name: "facebook" },
+  { name: "feathersjs" },
+  { name: "figma" },
+  { name: "filezilla" },
+  { name: "firebase" },
+  { name: "firefox" },
+  { name: "flask" },
+  { name: "flutter" },
+  { name: "foundation" },
+  { name: "fsharp" },
+  { name: "gatling" },
+  { name: "gatsby" },
+  { name: "rect" },
+  { name: "gcc" },
+  { name: "gentoo" },
+  { name: "gimp" },
+  { name: "git" },
+  { name: "github" },
+  { name: "gitlab" },
+  { name: "gitter" },
+  { name: "go" },
+  { name: "google" },
+  { name: "googlecloud" },
+  { name: "gradle" },
+  { name: "grafana" },
+  { name: "grails" },
+  { name: "graphql" },
+  { name: "groovy" },
+  { name: "grunt" },
+  { name: "gulp" },
+  { name: "godot" },
+  { name: "haskell" },
+  { name: "handlebars" },
+  { name: "haxe" },
+  { name: "heroku" },
+  { name: "html5" },
+  { name: "hugo" },
+  { name: "ie10" },
+  { name: "ifttt" },
+  { name: "illustrator" },
+  { name: "inkscape" },
+  { name: "intellij" },
+  { name: "ionic" },
+  { name: "jamstack" },
+  { name: "jasmine" },
+  { name: "java" },
+  { name: "javascript" },
+  { name: "jeet" },
+  { name: "jest" },
+  { name: "jenkins" },
+  { name: "jetbrains" },
+  { name: "jira" },
+  { name: "jquery" },
+  { name: "julia" },
+  { name: "jupyter" },
+  { name: "kaggle" },
+  { name: "karma" },
+  { name: "kotlin" },
+  { name: "knockout" },
+  { name: "krakenjs" },
+  { name: "kubernetes" },
+  { name: "labview" },
+  { name: "laravel" },
+  { name: "latex" },
+  { name: "less" },
+  { name: "linkedin" },
+  { name: "lua" },
+  { name: "linux" },
+  { name: "materialui" },
+  { name: "matlab" },
+  { name: "magento" },
+  { name: "markdown" },
+  { name: "maya" },
+  { name: "meteor" },
+  { name: "minitab" },
+  { name: "mocha" },
+  { name: "modx" },
+  { name: "mongodb" },
+  { name: "moodle" },
+  { name: "msdos" },
+  { name: "mysql" },
+  { name: "neo4j" },
+  { name: "nestjs" },
+  { name: "networkx" },
+  { name: "nextjs" },
+  { name: "nginx" },
+  { name: "nixos" },
+  { name: "nodejs" },
+  { name: "nodewebkit" },
+  { name: "npm" },
+  { name: "nuget" },
+  { name: "numpy" },
+  { name: "nuxtjs" },
+  { name: "objectivec" },
+  { name: "opera" },
+  { name: "ocaml" },
+  { name: "openal" },
+  { name: "opengl" },
+  { name: "opensuse" },
+  { name: "oracle" },
+  { name: "pandas" },
+  { name: "perl" },
+  { name: "phalcon" },
+  { name: "photoshop" },
+  { name: "php" },
+  { name: "phpstorm" },
+  { name: "podman" },
+  { name: "polygon" },
+  { name: "postgresql" },
+  { name: "premierepro" },
+  { name: "processing" },
+  { name: "protractor" },
+  { name: "putty" },
+  { name: "pycharm" },
+  { name: "python" },
+  { name: "pytorch" },
+  { name: "raspberrypi" },
+  { name: "phoenix" },
+  { name: "qt" },
+  { name: "r" },
+  { name: "rails" },
+  { name: "react" },
+  { name: "redhat" },
+  { name: "redis" },
+  { name: "redux" },
+  { name: "rocksdb" },
+  { name: "ruby" },
+  { name: "rubymine" },
+  { name: "rust" },
+  { name: "safari" },
+  { name: "salesforce" },
+  { name: "sdl" },
+  { name: "rstudio" },
+  { name: "sass" },
+  { name: "scala" },
+  { name: "selenium" },
+  { name: "sequelize" },
+  { name: "shopware" },
+  { name: "shotgrid" },
+  { name: "sketch" },
+  { name: "slack" },
+  { name: "socketio" },
+  { name: "solidity" },
+  { name: "sourcetree" },
+  { name: "spring" },
+  { name: "spss" },
+  { name: "sqlalchemy" },
+  { name: "sqlite" },
+  { name: "subversion" },
+  { name: "microsoftsqlserver" },
+  { name: "ssh" },
+  { name: "stylus" },
+  { name: "svelte" },
+  { name: "swift" },
+  { name: "symfony" },
+  { name: "storybook" },
+  { name: "tailwindcss" },
+  { name: "tensorflow" },
+  { name: "terraform" },
+  { name: "threejs" },
+  { name: "tomcat" },
+  { name: "tortoisegit" },
+  { name: "towergit" },
+  { name: "travis" },
+  { name: "thealgorithms" },
+  { name: "trello" },
+  { name: "twitter" },
+  { name: "typescript" },
+  { name: "typo3" },
+  { name: "ubuntu" },
+  { name: "unity" },
+  { name: "unix" },
+  { name: "unrealengine" },
+  { name: "uwsgi" },
+  { name: "vagrant" },
+  { name: "vim" },
+  { name: "visualstudio" },
+  { name: "vuejs" },
+  { name: "vuestorefront" },
+  { name: "vscode" },
+  { name: "webflow" },
+  { name: "weblate" },
+  { name: "webpack" },
+  { name: "webstorm" },
+  { name: "windows8" },
+  { name: "woocommerce" },
+  { name: "wordpress" },
+  { name: "xamarin" },
+  { name: "xcode" },
+  { name: "xd" },
+  { name: "yarn" },
+  { name: "yii" },
+  { name: "yunohost" },
+  { name: "zend" },
+  { name: "zig" },
+  { name: "pytest" },
+  { name: "opencv" },
+  { name: "fastapi" },
+  { name: "k3s" },
+  { name: "packer" },
+  { name: "anaconda" },
+  { name: "rspec" },
+  { name: "argocd" },
+  { name: "prometheus" },
+  { name: "blender" },
+  { name: "dropwizard" },
+  { name: "vuetify" },
+  { name: "fedora" },
+];

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

@@ -1,3 +1,4 @@
+import { DeviconsNameList } from "assets/devicons-name-list";
 import Helper from "components/form-components/Helper";
 import InputRow from "components/form-components/InputRow";
 import SelectRow from "components/form-components/SelectRow";
@@ -12,8 +13,6 @@ const DEFAULT_BUILDER_NAME = "heroku";
 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 BuildConfig = {
   builder: string;
   buildpacks: string[];
@@ -179,9 +178,16 @@ export const BuildpackSelection: React.FC<{
     action: "remove" | "add"
   ) => {
     return buildpacks?.map((buildpack) => {
-      const icon = `devicon-${buildpack?.name?.toLowerCase()}-plain colored`;
+      const [languageName] = buildpack.name?.split("/").reverse();
+
+      const devicon = DeviconsNameList.find(
+        (devicon) => languageName.toLowerCase() === devicon.name
+      );
+
+      const icon = `devicon-${devicon?.name}-plain colored`;
+
       let disableIcon = false;
-      if (URLRegex.test(buildpack.buildpack)) {
+      if (!devicon) {
         disableIcon = true;
       }
 
@@ -314,11 +320,6 @@ export const AddCustomBuildpackForm: React.FC<{
   const [error, setError] = useState(false);
 
   const handleAddCustomBuildpack = () => {
-    if (!URLRegex.test(buildpackUrl)) {
-      setError(true);
-      return;
-    }
-
     const buildpack: Buildpack = {
       buildpack: buildpackUrl,
       name: buildpackUrl,

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

@@ -15,13 +15,9 @@ import {
 } from "shared/types";
 import styled, { keyframes } from "styled-components";
 import yaml from "js-yaml";
-import DynamicLink from "components/DynamicLink";
 import { AxiosError } from "axios";
 import { AddCustomBuildpackForm } from "components/repo-selector/BuildpackSelection";
-
-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@:%_\+.~#?&//=]*)/;
+import { DeviconsNameList } from "assets/devicons-name-list";
 
 type Buildpack = {
   name: string;
@@ -565,13 +561,16 @@ const BuildpackConfigSection: React.FC<{
     }
 
     return buildpacks?.map((buildpack, i) => {
-      const icon = `devicon-${buildpack?.name?.toLowerCase()}-plain colored`;
+      const [languageName] = buildpack.name?.split("/").reverse();
+
+      const devicon = DeviconsNameList.find(
+        (devicon) => languageName.toLowerCase() === devicon.name
+      );
+
+      const icon = `devicon-${devicon?.name}-plain colored`;
 
       let disableIcon = false;
-      if (
-        URLRegex.test(buildpack.buildpack) &&
-        !buildpack.buildpack.includes("gcr.io/paketo-buildpacks")
-      ) {
+      if (!devicon) {
         disableIcon = true;
       }