Disabled tiles

Author: tim-we

src/main/ui/common/DonutChart.tsx

@@ -20,8 +20,8 @@ const DonutChart: FunctionComponent<ChartProps> = ({ data }) => {
   return (
     <svg class="donut-chart" viewBox="0 0 100 100" aria-hidden="true">
       {data.map((dp, i) => {
-        const size = Math.ceil(circumference * dp.amount / total);
-        const angle = Math.round((360 * offset) - 90);
+        const size = Math.ceil(circumference * (dp.amount / total));
+        const angle = Math.round(360 * offset - 90);
         offset += dp.amount / total;
 
         return (

src/main/ui/tiles/DynamicAnalysisTile.tsx

@@ -7,7 +7,7 @@ type Props = ExtensionData["dynamicAnalysis"];
 
 const DynamicAnalysisTile: FunctionComponent<Props> = ({ supported, background, jsType }) => {
   return (
-    <Tile title="Dynamic Analysis" cssClass="da" popup={createPopupOptions}>
+    <Tile title="Dynamic Analysis" cssClass="da">
       <ul>
         <li>{supported ? "supported" : "not supported"}</li>
         <li>{background ? "has background scripts" : "no background scripts"}</li>
@@ -18,10 +18,3 @@ const DynamicAnalysisTile: FunctionComponent<Props> = ({ supported, background,
 };
 
 export default DynamicAnalysisTile;
-
-function createPopupOptions() {
-  return {
-    title: "Dynamic Analysis",
-    content: "Not yet implemented."
-  };
-}

src/main/ui/tiles/Tile.tsx

@@ -10,7 +10,7 @@ import "./tiles.css";
 
 type Props = {
   title: string;
-  popup: (extId: ExtensionData["id"]) => PopupWindowOptions;
+  popup?: (extId: ExtensionData["id"]) => PopupWindowOptions;
   cssClass?: string;
 };
 
@@ -19,23 +19,30 @@ const Tile: FunctionComponent<Props> = ({ title, cssClass, popup: popupOptions,
   const color = useContext(ExtensionColorContext);
   const [hasWindow, setHasWindow] = useState(false);
 
-  const clickHandler = (e: Event) => {
-    e.stopPropagation();
-    if (hasWindow) {
-      return;
-    }
+  const clickHandler = popupOptions
+    ? (e: Event) => {
+        e.stopPropagation();
+        if (hasWindow) {
+          return;
+        }
 
-    const options = {
-      color,
-      ...popupOptions(extensionId)
-    };
+        const options = {
+          color,
+          ...popupOptions(extensionId)
+        };
 
-    showPopupWindow(extensionId, options).then(() => setHasWindow(false));
-    setHasWindow(true);
-  };
+        showPopupWindow(extensionId, options).then(() => setHasWindow(false));
+        setHasWindow(true);
+      }
+    : undefined;
 
   return (
-    <button class={`tile ${cssClass ?? ""}`} onClick={clickHandler} type="button">
+    <button
+      class={`tile ${cssClass ?? ""}`}
+      onClick={clickHandler}
+      type="button"
+      disabled={!popupOptions}
+    >
       <h3>{title}</h3>
       <div class="content">{children}</div>
     </button>

src/main/ui/tiles/TranslationsTile.tsx

@@ -15,8 +15,21 @@ const TranslationsTile: FunctionComponent<ExtensionData["translations"]> = (meta
           { amount: 1 - percentage, color: "rgb(128, 128, 128)" }
         ];
 
+  function createPopupOptions(id: ExtensionData["id"]): PopupWindowOptions {
+    return {
+      title: "Translations",
+      content: <TranslationsViewer extId={id} meta={meta} />,
+      initialWidth: 1280,
+      initialHeight: 720
+    };
+  }
+
   return (
-    <Tile title="Translations" cssClass="translations" popup={(id) => createPopupOptions(id, meta)}>
+    <Tile
+      title="Translations"
+      cssClass="translations"
+      popup={locales.length > 0 ? createPopupOptions : undefined}
+    >
       {locales.length === 0 ? (
         <span class="none">no translations</span>
       ) : (
@@ -51,15 +64,3 @@ const TranslationsTile: FunctionComponent<ExtensionData["translations"]> = (meta
 };
 
 export default TranslationsTile;
-
-function createPopupOptions(
-  id: ExtensionData["id"],
-  data: ExtensionData["translations"]
-): PopupWindowOptions {
-  return {
-    title: "Translations",
-    content: <TranslationsViewer extId={id} meta={data} />,
-    initialWidth: 1280,
-    initialHeight: 720
-  };
-}