fix: catch orb parse error, clear search box, hide filter select

Author: Jaryt

src/components/menus/definitions/OrbDefinitionsMenu.tsx

@@ -23,6 +23,7 @@ import CollapsibleList from '../../containers/CollapsibleList';
 
 export class OrbImportWithMeta extends orb.OrbImport {
   logo_url: string;
+  url: string;
 
   constructor(
     alias: string,
@@ -31,12 +32,14 @@ export class OrbImportWithMeta extends orb.OrbImport {
     manifest: OrbImportManifest,
     version: string,
     logo_url: string,
+    url: string,
     description?: string,
     display?: OrbDisplayMeta,
   ) {
     super(alias, namespace, orb, version, manifest, description, display);
 
     this.logo_url = logo_url;
+    this.url = url;
   }
 }
 
@@ -116,11 +119,13 @@ const OrbDefinitionContainer = (props: {
 const OrbDefinitionsMenu = (props: OrbDefinitionProps) => {
   const orbs = useStoreState((state) => state.definitions.orbs);
   const importOrb = useStoreActions((actions) => actions.importOrb);
+  const unimportOrb = useStoreActions((actions) => actions.unimportOrb);
   const [orb, setOrb] = useState<OrbImportWithMeta>();
+  const [error, setError] = useState(false);
 
   useEffect(() => {
-    loadOrb(`${props.namespace}/${props.name}@${props.version}`).then(
-      ({ manifest }) => {
+    loadOrb(`${props.namespace}/${props.name}@${props.version}`)
+      .then(({ manifest }) => {
         setOrb(
           new OrbImportWithMeta(
             props.name,
@@ -129,11 +134,14 @@ const OrbDefinitionsMenu = (props: OrbDefinitionProps) => {
             manifest,
             props.version,
             props.logo_url,
+            props.url,
             props.description,
           ),
         );
-      },
-    );
+      })
+      .catch(() => {
+        setError(true);
+      });
   }, [setOrb, props]);
 
   const inProject = Object.values(orbs).find(
@@ -151,8 +159,8 @@ const OrbDefinitionsMenu = (props: OrbDefinitionProps) => {
             <h2 className="text-circle-gray-400">{props.version}</h2>
             <a
               className="flex ml-auto cursor-pointer tracking-wide hover:underline leading-6 text-sm text-circle-blue font-medium"
-              href={orb?.display?.source_url}
-              target="circleci_docs"
+              href={orb?.url}
+              target="circleci_devhub"
               onClick={(e) => {
                 e.stopPropagation();
               }}
@@ -195,7 +203,16 @@ const OrbDefinitionsMenu = (props: OrbDefinitionProps) => {
           </div>
           <Footer>
             {inProject ? (
-              <Button variant="dangerous">Remove Orb from Config</Button>
+              <Button
+                onClick={() => {
+                  if (orb) {
+                    unimportOrb(orb);
+                  }
+                }}
+                variant="dangerous"
+              >
+                Remove Orb from Config
+              </Button>
             ) : (
               <Button
                 onClick={() => {
@@ -210,6 +227,11 @@ const OrbDefinitionsMenu = (props: OrbDefinitionProps) => {
             )}
           </Footer>
         </div>
+      ) : error ? (
+        <p className="font-medium pl-3 py-4 text-circle-red-dangerous">
+          Error loading orb. It likely uses an advanced feature not yet
+          supported. Sorry for the inconvenience!
+        </p>
       ) : (
         <div className="flex m-auto">
           <Loading />

src/components/menus/definitions/OrbImportMenu.tsx

@@ -1,4 +1,5 @@
 import algoliasearch from 'algoliasearch/lite';
+import { useState } from 'react';
 import {
   Hits,
   HitsPerPage,
@@ -87,6 +88,7 @@ const SearchBox = (
   props: UseSearchBoxProps & { className?: string; placeholder?: string },
 ) => {
   const { refine, clear } = useSearchBox(props);
+  const [value, setValue] = useState('');
   const { results } = useInstantSearch();
 
   return (
@@ -96,11 +98,22 @@ const SearchBox = (
         className="my-2 rounded border w-fullborder-circle-gray-300 hover:border-circle-gray-700 flex flex-row"
       >
         <input
+          value={value}
           placeholder={props.placeholder}
           className="pl-4 p-2 m-0 flex-grow"
-          onChange={(e) => refine(e.target.value)}
+          onChange={(e) => {
+            setValue(e.target.value);
+            refine(e.target.value);
+          }}
         />
-        <button type="button" className="mx-4" onClick={() => clear()}>
+        <button
+          type="button"
+          className="mx-4"
+          onClick={() => {
+            setValue('');
+            clear();
+          }}
+        >
           <DeleteItemIcon className="w-3 h-3" />
         </button>
       </div>
@@ -127,9 +140,9 @@ const OrbImportMenu = (props: InspectorDefinitionProps) => {
           <InstantSearch searchClient={searchClient} indexName="orbs-prod">
             {/* <RefinementList attribute="brand" /> */}
             <p className="font-bold leading-5 tracking-wide">Search Filters</p>
-            <Select className="mt-2 w-full">
-              <option>Recommended Orbs</option>
-            </Select>
+            {/* <Select className="mt-2 w-full">
+              <option>Recommended Orbs</option> TODO: implement select for recommended orbs
+            </Select> */}
             <SearchBox placeholder="Search Orb Directory..." />
             <HitsPerPage
               hidden

src/components/panes/WorkflowsPane.tsx

@@ -86,6 +86,7 @@ const WorkflowsPane = () => {
                             manifest,
                             orb.version,
                             '',
+                            '', // TODO: implement refetching of url
                             orb.description,
                           ),
                         };

src/state/Store.tsx

@@ -472,9 +472,8 @@ const Actions: StoreActions = {
   }),
 
   unimportOrb: action((state, payload) => {
-    // state.definitions.orbs = state.definitions.orbs.filter(
-    //   (orb) => orb.name !== payload.name && orb.namespace !== payload.namespace,
-    // );
+    state.definitions.orbs = { ...state.definitions.orbs };
+    delete state.definitions.orbs[payload.alias];
   }),
 
   error: action((state, payload) => {
@@ -724,18 +723,19 @@ const Actions: StoreActions = {
     state.toast = payload ?? undefined;
   }),
   // this is just to trigger the set toast action
-  triggerToast: action((_, __) => {}),
+  triggerToast: action(() => {}),
   triggerConfirmation: action((state, payload) => {
     state.confirm = payload;
   }),
   triggerConfigRefresh: thunkOn(
     (actions) => [
       actions.importOrb,
-      ...generateLifeCycleMatrix(actions),
+      actions.unimportOrb,
       actions.addWorkflowElement,
       actions.setWorkflowElements,
       actions.removeWorkflowElement,
       actions.updateWorkflowElement,
+      ...generateLifeCycleMatrix(actions),
     ],
     (actions) => {
       actions.generateConfig();