MM-33599 Add support for data uri icons for slash commands (#5393)

* Add support for data uri icons for slash commands * Address PR feedback * Fix lint * Use only one style for http and data icons
2021-07-19 16:26:39 +02:00 · 2021-07-19 16:26:39 +02:00 · 00a21b646e
commit 00a21b646e
parent bbd9bb3265
5 changed files with 72 additions and 8 deletions
--- a/app/components/autocomplete/slash_suggestion/slash_suggestion.tsx
+++ b/app/components/autocomplete/slash_suggestion/slash_suggestion.tsx
@ -196,7 +196,7 @@ export default class SlashSuggestion extends PureComponent<Props, State> {
                Suggestion: '/' + item.trigger,
                Hint: item.auto_complete_hint,
                Description: item.auto_complete_desc,
-                IconData: item.icon_url,
+                IconData: item.icon_url || item.autocomplete_icon_data || '',
            };
        });
    }
--- a/app/components/autocomplete/slash_suggestion/slash_suggestion_item.tsx
+++ b/app/components/autocomplete/slash_suggestion/slash_suggestion_item.tsx
@ -10,6 +10,9 @@ import {Theme} from '@mm-redux/types/preferences';
 import TouchableWithFeedback from '@components/touchable_with_feedback';
 import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
 import FastImage from 'react-native-fast-image';
+import {SvgXml} from 'react-native-svg';
+import base64 from 'base-64';
+
 const slashIcon = require('@assets/images/autocomplete/slash_command.png');
 const bangIcon = require('@assets/images/autocomplete/slash_command_error.png');

@ -26,6 +29,10 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme: Theme) => {
            alignItems: 'center',
            marginTop: 8,
        },
+        uriIcon: {
+            width: 16,
+            height: 16,
+        },
        iconColor: {
            tintColor: theme.centerChannelColor,
        },
@ -112,9 +119,27 @@ const SlashSuggestionItem = (props: Props) => {
        image = (
            <FastImage
                source={{uri: props.icon}}
-                style={{width: 16, height: 16}}
+                style={style.uriIcon}
            />
        );
+    } else if (props.icon && props.icon.startsWith('data:')) {
+        if (props.icon.startsWith('data:image/svg+xml')) {
+            const xml = base64.decode(props.icon.substring('data:image/svg+xml;base64,'.length));
+            image = (
+                <SvgXml
+                    xml={xml}
+                    width={32}
+                    height={32}
+                />
+            );
+        } else {
+            image = (
+                <Image
+                    source={{uri: props.icon}}
+                    style={style.uriIcon}
+                />
+            );
+        }
    }

    return (
--- a/app/mm-redux/types/integrations.ts
+++ b/app/mm-redux/types/integrations.ts
@ -51,6 +51,7 @@ export type Command = {
    'display_name': string;
    'description': string;
    'url': string;
+    'autocomplete_icon_data'?: string;
 };

 // AutocompleteSuggestion represents a single suggestion downloaded from the server.
--- a/package-lock.json
+++ b/package-lock.json
@ -21,6 +21,7 @@
        "@rudderstack/rudder-sdk-react-native": "1.0.12",
        "@sentry/react-native": "2.6.0",
        "analytics-react-native": "1.2.0",
+        "base-64": "1.0.0",
        "commonmark": "0.30.0",
        "commonmark-react-renderer": "4.3.5",
        "deep-equal": "2.0.5",
@ -103,6 +104,7 @@
        "@storybook/react-native": "5.3.25",
        "@storybook/react-native-server": "5.3.23",
        "@testing-library/react-native": "7.2.0",
+        "@types/base-64": "1.0.0",
        "@types/enzyme": "3.10.9",
        "@types/enzyme-adapter-react-16": "1.0.6",
        "@types/jest": "26.0.24",
@ -8406,6 +8408,12 @@
        "@babel/types": "^7.3.0"
      }
    },
+    "node_modules/@types/base-64": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@types/base-64/-/base-64-1.0.0.tgz",
+      "integrity": "sha512-AvCJx/HrfYHmOQRFdVvgKMplXfzTUizmh0tz9GFTpDePWgCY4uoKll84zKlaRoeiYiCr7c9ZnqSTzkl0BUVD6g==",
+      "dev": true
+    },
    "node_modules/@types/cacheable-request": {
      "version": "6.0.2",
      "resolved": "https://registry.npmjs.org/@types/cacheable-request/-/cacheable-request-6.0.2.tgz",
@ -9759,6 +9767,11 @@
        "react-native": "*"
      }
    },
+    "node_modules/analytics-react-native/node_modules/base-64": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/base-64/-/base-64-0.1.0.tgz",
+      "integrity": "sha1-eAqZyE59YAJgNhURxId2E78k9rs="
+    },
    "node_modules/anser": {
      "version": "1.4.10",
      "resolved": "https://registry.npmjs.org/anser/-/anser-1.4.10.tgz",
@ -11289,9 +11302,9 @@
      }
    },
    "node_modules/base-64": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/base-64/-/base-64-0.1.0.tgz",
-      "integrity": "sha1-eAqZyE59YAJgNhURxId2E78k9rs="
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/base-64/-/base-64-1.0.0.tgz",
+      "integrity": "sha512-kwDPIFCGx0NZHog36dj+tHiwP4QMzsZ3AgMViUBKI0+V5n4U0ufTCUMhnQ04diaRI8EX/QcPfql7zlhZ7j4zgg=="
    },
    "node_modules/base/node_modules/define-property": {
      "version": "1.0.0",
@ -32806,6 +32819,11 @@
        "glob": "7.0.6"
      }
    },
+    "node_modules/rn-fetch-blob/node_modules/base-64": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/base-64/-/base-64-0.1.0.tgz",
+      "integrity": "sha1-eAqZyE59YAJgNhURxId2E78k9rs="
+    },
    "node_modules/rn-fetch-blob/node_modules/glob": {
      "version": "7.0.6",
      "resolved": "https://registry.npmjs.org/glob/-/glob-7.0.6.tgz",
@ -45342,6 +45360,12 @@
        "@babel/types": "^7.3.0"
      }
    },
+    "@types/base-64": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@types/base-64/-/base-64-1.0.0.tgz",
+      "integrity": "sha512-AvCJx/HrfYHmOQRFdVvgKMplXfzTUizmh0tz9GFTpDePWgCY4uoKll84zKlaRoeiYiCr7c9ZnqSTzkl0BUVD6g==",
+      "dev": true
+    },
    "@types/cacheable-request": {
      "version": "6.0.2",
      "resolved": "https://registry.npmjs.org/@types/cacheable-request/-/cacheable-request-6.0.2.tgz",
@ -46508,6 +46532,13 @@
      "requires": {
        "base-64": "0.1.0",
        "type-of": "2.0.1"
+      },
+      "dependencies": {
+        "base-64": {
+          "version": "0.1.0",
+          "resolved": "https://registry.npmjs.org/base-64/-/base-64-0.1.0.tgz",
+          "integrity": "sha1-eAqZyE59YAJgNhURxId2E78k9rs="
+        }
      }
    },
    "anser": {
@ -47817,9 +47848,9 @@
      }
    },
    "base-64": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/base-64/-/base-64-0.1.0.tgz",
-      "integrity": "sha1-eAqZyE59YAJgNhURxId2E78k9rs="
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/base-64/-/base-64-1.0.0.tgz",
+      "integrity": "sha512-kwDPIFCGx0NZHog36dj+tHiwP4QMzsZ3AgMViUBKI0+V5n4U0ufTCUMhnQ04diaRI8EX/QcPfql7zlhZ7j4zgg=="
    },
    "base64-js": {
      "version": "1.5.1",
@ -64894,6 +64925,11 @@
        "glob": "7.0.6"
      },
      "dependencies": {
+        "base-64": {
+          "version": "0.1.0",
+          "resolved": "https://registry.npmjs.org/base-64/-/base-64-0.1.0.tgz",
+          "integrity": "sha1-eAqZyE59YAJgNhURxId2E78k9rs="
+        },
        "glob": {
          "version": "7.0.6",
          "resolved": "https://registry.npmjs.org/glob/-/glob-7.0.6.tgz",
--- a/package.json
+++ b/package.json
@ -19,6 +19,7 @@
    "@rudderstack/rudder-sdk-react-native": "1.0.12",
    "@sentry/react-native": "2.6.0",
    "analytics-react-native": "1.2.0",
+    "base-64": "1.0.0",
    "commonmark": "0.30.0",
    "commonmark-react-renderer": "4.3.5",
    "deep-equal": "2.0.5",
@ -101,6 +102,7 @@
    "@storybook/react-native": "5.3.25",
    "@storybook/react-native-server": "5.3.23",
    "@testing-library/react-native": "7.2.0",
+    "@types/base-64": "1.0.0",
    "@types/enzyme": "3.10.9",
    "@types/enzyme-adapter-react-16": "1.0.6",
    "@types/jest": "26.0.24",