fix: Completed replacing crypto.randomUUID with natural keys (#74)

* fix: Completed replacing crypto.randomUUID with natural keys. Removed redundant keys in several components

* fix: Removed unused component

Author: JayLim2

packages/editor/src/components/GraphQlOperationViewer.tsx

@@ -14,12 +14,12 @@
  * limitations under the License.
  */
 
+import { Link, List, ListItem, ListItemIcon, ListItemText, Skeleton } from '@mui/material'
+import { SpecLogo } from '@netcracker/qubership-apihub-ui-shared/components/SpecLogo'
 import type { FC } from 'react'
 import { memo } from 'react'
-import { Link, List, ListItem, ListItemIcon, ListItemText, Skeleton } from '@mui/material'
 import type { To } from 'react-router-dom'
 import { NavLink } from 'react-router-dom'
-import { SpecLogo } from '@netcracker/qubership-apihub-ui-shared/components/SpecLogo'
 
 export type ApiDocumentListProps = {
   isLoading: boolean
@@ -29,19 +29,19 @@ export type ApiDocumentListProps = {
 export const ApiDocumentList: FC<ApiDocumentListProps> = memo<ApiDocumentListProps>(({ value, isLoading }) => {
   if (isLoading) {
     return (
-      <Skeleton variant="rectangular" width={150}/>
+      <Skeleton variant="rectangular" width={150} />
     )
   }
 
   return (
     <List>
       {value.map(({ type, title, url, subtitle }) => (
         <ListItem
-          key={crypto.randomUUID()}
+          key={`api-document-${type}-${title}`}
           sx={{ px: 0, alignItems: 'start' }}
         >
           <ListItemIcon sx={{ minWidth: 2, mt: 0, mr: 1 }}>
-            <SpecLogo value={type}/>
+            <SpecLogo value={type} />
           </ListItemIcon>
           <ListItemText
             primary={

packages/portal/src/components/ApiDocumentList.tsx

@@ -29,7 +29,6 @@ export const GraphQlOperationViewer: FC<GraphQlOperationViewerProps> = memo<Grap
   return (
     <Box lineHeight={1.5} height="100%">
       <GraphQLOperationViewer
-        key={`graphql-operation-viewer-${displayMode}`}
         source={source}
         displayMode={displayMode}
       />

packages/portal/src/components/GraphQlOperationViewer.tsx

@@ -21,10 +21,11 @@ import { Box, Skeleton, TableCell, TableRow } from '@mui/material'
 export const OpenApiTableTreeSkeleton: FC = memo(() => {
   return (
     <>
-      {Array(2).fill(0).map(() => {
+      {/* eslint-disable-next-line @typescript-eslint/no-unused-vars */}
+      {Array(2).fill(0).map((_, index) => {
         return (
-          <TableRow key={crypto.randomUUID()}>
-            <TableCell key={crypto.randomUUID()}>
+          <TableRow key={index}>
+            <TableCell>
               <Box display="flex" flexDirection="column">
                 <Skeleton sx={{ width: '100%', height: '32px' }}/>
                 <Skeleton sx={{ width: '25%', height: '18px' }}/>

packages/portal/src/routes/root/PortalPage/VersionPage/OpenApiViewer/OpenApiTableTreeSkeleton.tsx

@@ -104,7 +104,7 @@ export const Selector: FC<SelectorProps> = memo<SelectorProps>(({
                 >
                   {options?.map((option) => (
                     <MenuItem
-                      key={crypto.randomUUID()}
+                      key={`selector-option-${option.value}`}
                       onClick={() => {
                         onChange?.(option)
                         setAnchor(undefined)