suggestion: Unused import 'generateKey' removed.

suggestion: Removed unused interface IResourceItemExtraOptions.

suggestion: Removed unused component ResourceItemExtraOptions.

suggestion: Removed unused component RenderItem.

suggestion: Unused import 'generateKey' removed.

suggestion: Removed unused component RenderItem.

suggestion: Added validation for imageUrl format.

suggestion: Remove console.log statement.

Consider removing the console.log statement before merging.

issue (complexity): Consider removing commented-out code and simplifying validation logic.

The new code introduces several complexities that could be avoided:

1. Commented Out Code: The presence of commented-out code (e.g., RepoSelector) clutters the codebase and can be confusing for future developers. It's better to remove unused code entirely.

2. Inline Validation: The inline validation for imageUrl using Yup.string().matches() is harder to read, especially with complex regex patterns. Consider simplifying or documenting the regex for clarity.

3. Redundant Code: The TextInput component for imageUrl is added directly in the JSX, but the commented-out RepoSelector code remains. This makes it unclear whether RepoSelector is intended to be removed or reused.

4. Error Handling: Error handling for imageUrl is done directly in the JSX, which can be less clear than a more centralized approach.

Consider refactoring to remove unnecessary comments, simplify validation logic, and handle errors more clearly. This will make the code easier to read, understand, and maintain.

issue (complexity): Consider removing commented-out code to improve readability and maintainability.

The new code introduces several complexities that could be avoided:

1. Commented Out Code: The code has several lines commented out instead of being removed, which clutters the codebase and makes it harder to read and maintain.
2. Inline Regex Duplication: The regex for validating imageUrl is duplicated, making future updates error-prone. Consider defining the regex once and reusing it.
3. Unnecessary Component Change: Replacing RepoSelector with TextInput might lead to a loss of functionality or user experience that RepoSelector provided.
4. Error Handling: The new error handling within TextInput might not be as robust as the previous implementation.

Here is a suggested refactor to address these issues:

import { useAppState } from '~/console/page-components/app-states';
import useForm, { dummyEvent } from '~/root/lib/client/hooks/use-form';
import Yup from '~/root/lib/server/helpers/yup';
import { parseName } from '~/console/server/r-utils/common';
import { FadeIn } from '~/console/page-components/util';
import { NameIdView } from '~/console/components/name-id-view';
import { BottomNavigation, GitDetailRaw } from '~/console/components/commons';
import { useOutletContext } from '@remix-run/react';
import AppBuildIntegration from '~/console/page-components/app/app-build-integration';
import { keyconstants } from '~/console/server/r-utils/key-constants';
import { constants } from '~/console/server/utils/constants';
import { Button } from '~/components/atoms/button';
import { useEffect, useState } from 'react';
import { toast } from '~/components/molecule/toast';
import ResourceExtraAction from '~/console/components/resource-extra-action';
import { ArrowClockwise, GitMerge, PencilSimple } from '~/console/components/icons';
import { TextInput } from '~/components/atoms/input';
import { IEnvironmentContext } from '../_layout';
import { getImageTag } from './app-utils';
import BuildSelectionDialog from './app-build-selection-dialog';

const imageUrlRegex = /^\w(\w|[-/])+?(?::(\w|[-])+)?\w$/;

const ExtraButton = ({ onNew, onExisting }: { onNew: () => void; onExisting: () => void; }) => {
  // ... rest of the component code
};

const validationSchema = Yup.object({
  name: Yup.string().required(),
  displayName: Yup.string().required(),
  imageUrl: Yup.string().matches(imageUrlRegex, 'Invalid image format'),
  manualRepo: Yup.string().when(['imageUrl', 'imageMode'], ([imageUrl, imageMode], schema) => {
    if (imageMode === 'git') {
      return schema;
    }
    if (!imageUrl) {
      return schema.required().matches(imageUrlRegex, 'Invalid image format');
    }
    return schema;
  }),
  imageMode: Yup.string().required(),
});

// ... rest of the component code

<TextInput
  size="lg"
  label="Image name"
  placeholder="Enter Image name"
  value={values.imageUrl}
  onChange={handleChange('imageUrl')}
  error={!!errors.imageUrl}
  message={errors.imageUrl}
/>

// ... rest of the component code

This refactor removes commented-out code, avoids regex duplication, and maintains the existing functionality.