feat: renamed react props to include components name + removed redundant default export

Signed-off-by: Kamil Wolny <mrwolny@gmail.com>

plugins/github-issues/src/components/GitHubIssues/GitHubIssues.tsx

@@ -28,10 +28,7 @@ import {
 import { IssueList } from './IssuesList';
 import { NoRepositoriesInfo } from './NoRepositoriesInfo';
 
-export type PluginMode = 'page' | 'card';
-
-export type Props = {
-  mode: PluginMode;
+export type GitHubIssuesProps = {
   itemsPerPage?: number;
   itemsPerRepo?: number;
 };
@@ -39,7 +36,7 @@ export type Props = {
 export const GitHubIssues = ({
   itemsPerPage = 10,
   itemsPerRepo = 40,
-}: Props) => {
+}: GitHubIssuesProps) => {
   const [isLoading, setIsLoading] = React.useState(true);
 
   const [issuesByRepository, setIssuesByRepository] =

plugins/github-issues/src/components/GitHubIssues/IssueCard/Assignees.tsx

@@ -13,10 +13,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React, { FunctionComponent } from 'react';
+import React from 'react';
 import { Typography, Box, Avatar, makeStyles } from '@material-ui/core';
 
-type Props = {
+type AssigneesProps = {
   name?: string;
   avatar?: string;
 };
@@ -32,7 +32,7 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-export const Assignees: FunctionComponent<Props> = (props: Props) => {
+export const Assignees = (props: AssigneesProps) => {
   const { name, avatar } = props;
   const classes = useStyles();
 
@@ -57,5 +57,3 @@ export const Assignees: FunctionComponent<Props> = (props: Props) => {
     </Box>
   );
 };
-
-export default Assignees;

plugins/github-issues/src/components/GitHubIssues/IssueCard/CommentsCount.tsx

@@ -13,15 +13,15 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React, { FunctionComponent } from 'react';
+import React from 'react';
 import { ChatIcon } from '@backstage/core-components';
 import { Box, Badge } from '@material-ui/core';
 
-type Props = {
+type CommentsCountProps = {
   commentsCount: number;
 };
 
-export const CommentsCount: FunctionComponent<Props> = (props: Props) => {
+export const CommentsCount = (props: CommentsCountProps) => {
   const { commentsCount } = props;
 
   return (

plugins/github-issues/src/components/GitHubIssues/IssueCard/IssueCard.tsx

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React, { FunctionComponent } from 'react';
+import React from 'react';
 import { DateTime } from 'luxon';
 
 import {
@@ -23,12 +23,12 @@ import {
   CardActionArea,
   Link,
 } from '@material-ui/core';
-import Assignees from './Assignees';
+import { Assignees } from './Assignees';
 import { CommentsCount } from './CommentsCount';
 
 import Divider from '@material-ui/core/Divider';
 
-type Props = {
+type IssueCardProps = {
   title: string;
   createdAt: string;
   updatedAt?: string;
@@ -45,7 +45,7 @@ type Props = {
 const getElapsedTime = (isoDate: string) =>
   DateTime.fromISO(isoDate).toRelative();
 
-export const IssueCard: FunctionComponent<Props> = (props: Props) => {
+export const IssueCard = (props: IssueCardProps) => {
   const {
     title,
     createdAt,

plugins/github-issues/src/components/GitHubIssues/IssuesList/Filters/Filters.tsx

@@ -14,16 +14,11 @@
  * limitations under the License.
  */
 import React from 'react';
-import { Select, SelectedItems } from '@backstage/core-components';
+import { Select, SelectedItems, SelectItem } from '@backstage/core-components';
 import { makeStyles, Box, Typography } from '@material-ui/core';
 
-export type FilterItem = {
-  label: string;
-  value: string;
-};
-
-type Props = {
-  items: Array<FilterItem>;
+type RepositoryFiltersProps = {
+  items: Array<SelectItem>;
   totalIssuesInGitHub: number;
   placeholder: string;
   onChange: (active: Array<string>) => void;
@@ -47,7 +42,11 @@ const checkSelectedItems: (
   return onChange(active as Array<string>);
 };
 
-export const Filters = ({ items, onChange, placeholder }: Props) => {
+export const RepositoryFilters = ({
+  items,
+  onChange,
+  placeholder,
+}: RepositoryFiltersProps) => {
   const css = useStyles();
 
   return (

plugins/github-issues/src/components/GitHubIssues/IssuesList/IssuesList.tsx

@@ -20,11 +20,11 @@ import { Pagination } from '@material-ui/lab';
 
 import { IssueCard } from '../IssueCard';
 import { RepoIssues } from '../../../hooks/useGetIssuesByRepoFromGitHub';
-import { Filters } from './Filters';
+import { RepositoryFilters } from './Filters';
 
 export type PluginMode = 'page' | 'card';
 
-export type Props = {
+export type IssueListProps = {
   itemsPerPage?: number;
   issuesByRepository?: Record<string, RepoIssues>;
 };
@@ -37,7 +37,10 @@ const getIssuesCountForFilterLabel = (
     issuesAvailable < totalIssues ? '*' : ''
   }`;
 
-export const IssueList = ({ itemsPerPage = 10, issuesByRepository }: Props) => {
+export const IssueList = ({
+  itemsPerPage = 10,
+  issuesByRepository,
+}: IssueListProps) => {
   const [currentPage, setCurrentPage] = React.useState(1);
   const [activeFilter, setActiveFilter] = React.useState<Array<string>>([]);
 
@@ -108,7 +111,7 @@ export const IssueList = ({ itemsPerPage = 10, issuesByRepository }: Props) => {
   return (
     <Box>
       {issues.length > 0 && (
-        <Filters
+        <RepositoryFilters
           placeholder={`All repositories ${getIssuesCountForFilterLabel(
             totalIssuesInGitHub,
             issues.length,