hunk.code_window:       }) || [];
     }
     // Function to handle selction of options
     const onSelectOptions = (value: string | undefined) => {
       if (value) {
         if (props.isMultiSelect) {
           if (Array.isArray(selectedValue)) {
             if (!selectedValue.includes(value))
               (selectedValue as string[]).push(value);
  
hunk.labels: keep keep keep keep replace keep keep keep keep
hunk.after_edit:     if (!_.isNil(value)) {
  
hunk.file_path: app/client/src/components/formControls/DropDownControl.tsx
hunk.type: replace
file: /* eslint-disable @typescript-eslint/ban-types */
  // TODO(abhinav): This file may not be used anymore.
  import React from "react";
  import styled from "styled-components";
  import { NavLink } from "react-router-dom";
  import AnalyticsUtil from "utils/AnalyticsUtil";
  import { Colors } from "constants/Colors";
  
  type MenuBarItemProps = {
    icon: Function;
    path: string;
    title: string;
    exact?: boolean;
    width: number;
    height: number;
    external?: boolean;
    className?: string;
    highlight?: boolean;
    onClick?: Function;
    isActive: (currentPath: string, expectedPath: string) => boolean;
  };
  
  type Props = MenuBarItemProps;
  
  const IconContainer = styled.div<{
    width: number;
    height: number;
  }>`
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    margin-bottom: 5px;
    background-color: ${(props) => props.theme.colors.menuButtonBGInactive};
    border-radius: ${(props) => props.theme.radii[1]}px;
    width: ${(props) => props.width + 8}px;
    height: ${(props) => props.width + 8}px;
    svg path {
      fill: ${(props) => props.theme.colors.menuIconColorInactive};
    }
  `;
  
  const ItemContainer = styled.div`
    && {
      a {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: ${(props) => props.theme.spaces[5]}px 0;
        color: ${(props) => props.theme.colors.textOnDarkBG};
        font-size: ${(props) => props.theme.fontSizes[1]}px;
        cursor: pointer;
        &:hover {
          background: ${Colors.TUNDORA};
          text-decoration: none;
        }
        &.active {
          background: ${Colors.TUNDORA};
          color: ${(props) => props.theme.colors.textOnDarkBG};
          & > div {
            background-color: ${(props) => props.theme.colors.primaryOld};
            svg path {
              fill: ${(props) => props.theme.colors.textOnDarkBG};
            }
          }
        }
      }
      span {
        width: 100%;
        display: inline-block;
        text-align: center;
      }
    }
  `;
  
  class NavBarItem extends React.Component<Props> {
    render(): React.ReactNode {
      const {
        exact,
        height,
        icon,
        isActive,
        onClick,
        path,
        title,
        width,
      } = this.props;
  
      return (
        <ItemContainer>
          <NavLink
            className={this.props.className}
            exact={exact}
            isActive={(match, location) => {
              return isActive(path, location.pathname);
            }}
            onClick={() => {
              onClick && onClick();
              AnalyticsUtil.logEvent("SIDEBAR_NAVIGATION", {
                navPage: this.props.title.toUpperCase(),
              });
            }}
            to={path}
          >
            <IconContainer height={height} width={width}>
              {icon({ width, height })}
            </IconContainer>
            <span>{title}</span>
          </NavLink>
        </ItemContainer>
      );
    }
  }
  
  export default NavBarItem;
  