chore: type safe icons (#17617)

* refactor: move svg provider to root util directory

* chore: typesafe config icons

* refactor: improve types

* chore: improve comment

* chore: update ignore files

* refactor: move typedEntries to array utils

* chore: fix action panel types

* refactor: simplify naming

* chore: conversation actions type

* chore: svg provider mocks type

* chore: context menu type

* chore: remove license from non-gh file

* chore: remove comment

Author: PatrykBuniX

.eslintrc.js

@@ -21,6 +21,7 @@ module.exports = {
     'src/ext/',
     'src/script/localization/**/webapp*.js',
     'src/worker/',
+    'src/script/generated/',
     '*.js',
   ],
   parserOptions: {

.gitignore

@@ -8,6 +8,7 @@
 /keys
 /package-lock.json
 /resource
+/src/script/generated
 /temp
 CHANGELOG.md
 node_modules

.prettierignore

@@ -7,6 +7,7 @@ src/i18n/
 /resource
 /assets
 /src/ext
+/src/script/generated
 CHANGELOG.md
 node_modules
 npm-debug.log

bin/generate_icon_names.ts

@@ -0,0 +1,37 @@
+/*
+ * Wire
+ * Copyright (C) 2024 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+import fs from 'fs';
+
+const fileLocation = 'resource/image/icon';
+const fileList = fs.readdirSync(fileLocation).filter(file => file.endsWith('.svg'));
+
+const fileContent = `
+/* 
+  * This file is generated by bin/generate_icons.ts
+  * To refetch all the icons and regenerate their names, run yarn configure.
+*/
+export const iconFileNames = [${fileList.map(name => `'${name}'`).join(', ')}] as const;
+`;
+
+const dir = 'src/script/generated';
+
+if (!fs.existsSync(dir)) {
+  fs.mkdirSync(dir);
+}
+fs.writeFileSync(`${dir}/iconFileNames.ts`, fileContent);

package.json

@@ -176,7 +176,8 @@
     "changelog:production": "ts-node ./bin/changelog.ts production",
     "changelog:staging": "ts-node ./bin/changelog.ts staging",
     "changelog:rc": "ts-node ./bin/changelog.ts production master",
-    "configure": "copy-config",
+    "configure": "copy-config && yarn generate-icon-names",
+    "generate-icon-names": "ts-node ./bin/generate_icon_names.ts",
     "deploy": "yarn build:prod && eb deploy",
     "dev": "yarn start",
     "docker": "node ./bin/push_docker.js",

src/script/auth/component/WirelessContainer.tsx

@@ -24,10 +24,11 @@ import {FormattedMessage, useIntl} from 'react-intl';
 
 import {CloseIcon, Content, Footer, Header, Link, Small} from '@wireapp/react-ui-kit';
 
+import {getSVG} from 'Util/SVGProvider';
+
 import {Config} from '../../Config';
 import {cookiePolicyStrings, footerStrings} from '../../strings';
 import {EXTERNAL_ROUTE} from '../externalRoute';
-import {getSVG} from '../util/SVGProvider';
 
 export interface Props extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;

src/script/auth/page/CustomEnvironmentRedirect.test.tsx

@@ -26,7 +26,7 @@ import {initialRootState} from '../module/reducer';
 import {mockStoreFactory} from '../util/test/mockStoreFactory';
 import {mountComponent} from '../util/test/TestUtil';
 
-jest.mock('../util/SVGProvider');
+jest.mock('Util/SVGProvider');
 function createMockedURLSearchParams(value: string) {
   return class MockedURLSearchParams extends window.URLSearchParams {
     constructor() {

src/script/auth/page/CustomEnvironmentRedirect.tsx

@@ -27,6 +27,7 @@ import {AnyAction, Dispatch} from 'redux';
 import {Runtime, UrlUtil} from '@wireapp/commons';
 import {COLOR, ContainerXS, FlexBox, Text} from '@wireapp/react-ui-kit';
 
+import {getSVG} from 'Util/SVGProvider';
 import {afterRender} from 'Util/util';
 
 import {Page} from './Page';
@@ -35,7 +36,6 @@ import {customEnvRedirectStrings} from '../../strings';
 import {actionRoot} from '../module/action';
 import {bindActionCreators} from '../module/reducer';
 import {QUERY_KEY} from '../route';
-import {getSVG} from '../util/SVGProvider';
 
 const REDIRECT_DELAY = 5000;
 const CustomEnvironmentRedirectComponent = ({doNavigate, doSendNavigationEvent}: DispatchProps) => {

src/script/auth/page/Index.test.tsx

@@ -29,7 +29,7 @@ import {ROUTE} from '../route';
 import {mockStoreFactory} from '../util/test/mockStoreFactory';
 import {mountComponent} from '../util/test/TestUtil';
 
-jest.mock('../util/SVGProvider');
+jest.mock('Util/SVGProvider');
 
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),

src/script/auth/page/Index.tsx

@@ -28,6 +28,8 @@ import {AnyAction, Dispatch} from 'redux';
 import {UrlUtil} from '@wireapp/commons';
 import {Button, ButtonVariant, ContainerXS, ErrorMessage, Text} from '@wireapp/react-ui-kit';
 
+import {getSVG} from 'Util/SVGProvider';
+
 import {Page} from './Page';
 
 import {Config} from '../../Config';
@@ -36,7 +38,6 @@ import {indexStrings, logoutReasonStrings} from '../../strings';
 import {bindActionCreators, RootState} from '../module/reducer';
 import * as AuthSelector from '../module/selector/AuthSelector';
 import {QUERY_KEY, ROUTE} from '../route';
-import {getSVG} from '../util/SVGProvider';
 
 type Props = React.HTMLProps<HTMLDivElement>;