lint + format

.eslintrc.js

@@ -3,10 +3,10 @@ module.exports = {
   extends: ['next', 'plugin:storybook/recommended'],
   rules: {
     'import/no-anonymous-default-export': 'off',
-    'react/no-unescaped-entities': 'off',
+    'react/no-unescaped-entities': 0,
     'react/display-name': 'off',
   },
-  ignorePatterns: ['src/**/*.stories.js'],
+  ignorePatterns: ['src/**/*.stories.js', 'src/**/*.stories.tsx', 'src/tours'],
 
   overrides: [
     {

.storybook/mocks/mocks.ts

@@ -10,6 +10,7 @@ interface Tasks {
     created: string;
     service: string;
     status: string;
+    id: string;
   }[];
   environmentSlug: string;
   projectSlug: string;
@@ -27,8 +28,9 @@ interface Task {
     status: string;
     files: TaskFile[];
     logs: string;
-    taskName?: string;
+    taskName: string;
     name?: string;
+    id: string;
   };
 }
 faker.setDefaultRefDate(new Date(`${new Date().getFullYear().toString()}-01-01`));
@@ -45,6 +47,7 @@ export function createTasks(): Tasks {
       created: faker.date.anytime().toDateString(),
       service: 'cli',
       status: faker.helpers.arrayElement(['Pending', 'In progress', 'Completed']),
+      id: faker.string.uuid(),
     };
   });
 
@@ -89,6 +92,7 @@ export function createTask(): Task {
       files,
       logs: log,
       taskName: faker.lorem.slug(2),
+      id: faker.string.uuid(),
     },
   };
 }

src/components/ActiveStandbyConfirm/index.tsx

@@ -32,7 +32,7 @@ export const ActiveStandbyConfirm: FC<ActiveStandbyConfirmProps> = ({
       <div className="margins">
         <Button action={openModal}>Switch Active/Standby environments</Button>
       </div>
-      <Modal isOpen={open} onRequestClose={closeModal} contentLabel="Confirm">
+      <Modal variant={null} isOpen={open} onRequestClose={closeModal} contentLabel="Confirm">
         <StyledActiveStandbyConfirmModal>
           <p>
             This will replace the current active environment

src/components/AddTask/components/CustomTaskConfirm.tsx

@@ -33,7 +33,7 @@ export const CustomTaskConfirm: FC<CustomTaskConfirmProps> = ({
           Confirm Task
         </Button>
       </div>
-      <Modal isOpen={open} onRequestClose={closeModal} contentLabel={`Confirm`}>
+      <Modal variant={null} isOpen={open} onRequestClose={closeModal} contentLabel={`Confirm`}>
         <React.Fragment>
           <ReactMarkdown>{taskText}</ReactMarkdown>
           <div className="form-input">

src/components/DeleteConfirm/index.stories.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 
+import { DeleteOutlined } from '@ant-design/icons';
 import { action } from '@storybook/addon-actions';
 import { Meta } from '@storybook/react';
 
@@ -41,6 +42,7 @@ export const WithConfirmationBlocked = ({
   closeModalFunction,
 }: Props) => (
   <DeleteConfirmBaseComponent
+    icon={<DeleteOutlined />}
     deleteType="environment"
     deleteName="Forty-two"
     onDelete={onDeleteFunction}

src/components/link/EnvironmentVariables.js

@@ -11,7 +11,7 @@ export const getLinkData = (environmentSlug, projectSlug) => ({
 /**
  * Links to the environment variables page given the project name and the openshift project name.
  */
-const EnvironmentVariablesLink = ({ environmentSlug, projectSlug, children, className = null, prefetch = false }) => {
+const EnvironmentVariablesLink = ({ environmentSlug, projectSlug, children, className = '', prefetch = false }) => {
   const linkData = getLinkData(environmentSlug, projectSlug);
 
   return (

src/layouts/GlobalStyles/index.tsx

@@ -7,7 +7,7 @@ import { DefaultTheme, GlobalStyleComponent, createGlobalStyle } from 'styled-co
  * Applies styles globally to any component nested inside it.
  */
 
-export const GlobalStyles: GlobalStyleComponent<{}, DefaultTheme> = createGlobalStyle`
+export const GlobalStyles: GlobalStyleComponent<Record<string, never>, DefaultTheme> = createGlobalStyle`
 * {
   box-sizing: border-box;
 }
@@ -313,4 +313,8 @@ main{
 }
 `;
 
-export default React.memo(() => <GlobalStyles />);
+const AppGlobalStyles = React.memo(() => <GlobalStyles />);
+
+AppGlobalStyles.displayName = 'GlobalStyles';
+
+export default AppGlobalStyles;

src/stories/organizations/organizationGroups.stories.tsx

@@ -36,7 +36,14 @@ export const Default: Story = {
         graphql.mutation('addGroup', (req, res, ctx) => {
           const { group } = req.variables;
 
-          const newGroup = { __typename: 'Group', name: group, id: faker.lorem.slug(), members: [], type: 'null' };
+          const newGroup = {
+            __typename: 'Group',
+            name: group,
+            id: faker.lorem.slug(),
+            members: [],
+            type: 'null',
+            memberCount: 0,
+          };
 
           // "add" into the mock group for future refetch
           mockOrganization.groups = [newGroup, ...mockOrganization.groups];