Remove unused flex controls code (#6653)

This PR removes some unused flex controls and some related code

Author: bkrmendy

editor/src/components/inspector/sections/layout-section/flex-container-subsection/flex-container-controls.tsx

@@ -1,28 +1,20 @@
 import React from 'react'
-import type { FlexAlignment, FlexJustifyContent } from 'utopia-api/core'
 import { FlexWrap } from 'utopia-api/core'
 import type { ControlStatus } from '../../../common/control-status'
 import type { ControlStyles } from '../../../common/control-styles'
 import { InspectorContextMenuWrapper } from '../../../../context-menu-wrapper'
 import type { OptionChainOption } from '../../../controls/option-chain-control'
-import { OptionChainControl } from '../../../controls/option-chain-control'
-import {
-  InspectorPropsContext,
-  stylePropPathMappingFn,
-  useInspectorLayoutInfo,
-} from '../../../common/property-path-hooks'
+import { useInspectorLayoutInfo } from '../../../common/property-path-hooks'
 import type { SelectOption } from '../../../controls/select-control'
 import type { OptionsType } from 'react-select'
 import { unsetPropertyMenuItem } from '../../../common/context-menu-items'
 import { UIGridRow } from '../../../widgets/ui-grid-row'
-import { PropertyLabel } from '../../../widgets/property-label'
 import {
   PopupList,
   useWrappedEmptyOrUnknownOnSubmitValue,
   NumberInput,
   Icons,
 } from '../../../../../uuiui'
-import { useContextSelector } from 'use-context-selector'
 import type { FlexDirection } from '../../../common/css-utils'
 import { when } from '../../../../../utils/react-conditionals'
 import { Substores, useEditorState } from '../../../../editor/store/store-hook'
@@ -79,86 +71,6 @@ export interface FlexFieldControlProps<T> {
   onUnset: () => void
 }
 
-interface FlexDirectionControlProps extends FlexFieldControlProps<FlexDirection> {
-  flexWrap: FlexWrap
-}
-
-export const FlexDirectionControl = React.memo((props: FlexDirectionControlProps) => {
-  return (
-    <InspectorContextMenuWrapper
-      id={`flexDirection-context-menu`}
-      items={[unsetPropertyMenuItem('Flex Direction', props.onUnset)]}
-      data={{}}
-      style={{
-        display: 'flex',
-        flexDirection: 'column',
-      }}
-    >
-      <OptionChainControl
-        id='flex.container.flexDirection'
-        key='flex.container.flexDirection'
-        testId='flex.container.flexDirection'
-        value={props.value}
-        DEPRECATED_controlOptions={{
-          labelBelow: 'Direction',
-        }}
-        controlStatus={props.controlStatus}
-        controlStyles={props.controlStyles}
-        options={flexDirectionOptions(props.flexWrap)}
-        onSubmitValue={props.onSubmitValue}
-      />
-    </InspectorContextMenuWrapper>
-  )
-})
-
-interface FlexAlignItemsControlProps extends FlexFieldControlProps<FlexAlignment> {
-  alignDirection: uglyLabel
-  alignItemsFlexStart: uglyLabel
-  alignItemsFlexEnd: uglyLabel
-}
-
-export const FlexAlignItemsControl = React.memo((props: FlexAlignItemsControlProps) => {
-  const targetPath = useContextSelector(InspectorPropsContext, (contextData) => {
-    return contextData.targetPath
-  })
-  const alignItemsProp = React.useMemo(() => {
-    return [stylePropPathMappingFn('alignItems', targetPath)]
-  }, [targetPath])
-  return (
-    <InspectorContextMenuWrapper
-      id={`alignItems-context-menu`}
-      items={[unsetPropertyMenuItem('Align Items', props.onUnset)]}
-      data={{}}
-    >
-      <UIGridRow padded={true} variant='<---1fr--->|------172px-------|'>
-        <PropertyLabel target={alignItemsProp}>Align</PropertyLabel>
-        <div
-          style={{
-            textAlign: 'center',
-            display: 'flex',
-            flexDirection: 'row',
-          }}
-        >
-          <OptionChainControl
-            id='flex.container.alignItems'
-            key='flex.container.alignItems'
-            testId='flex.container.alignItems'
-            value={props.value}
-            controlStatus={props.controlStatus}
-            controlStyles={props.controlStyles}
-            options={alignItemsOptions(
-              props.alignDirection,
-              props.alignItemsFlexStart,
-              props.alignItemsFlexEnd,
-            )}
-            onSubmitValue={props.onSubmitValue}
-          />
-        </div>
-      </UIGridRow>
-    </InspectorContextMenuWrapper>
-  )
-})
-
 interface FlexWrapControlProps extends FlexFieldControlProps<FlexWrap> {}
 
 const FlexWrapOptions: OptionsType<SelectOption> = [
@@ -216,44 +128,6 @@ export const FlexWrapControl = React.memo((props: FlexWrapControlProps) => {
   )
 })
 
-interface FlexJustifyContentControlProps extends FlexFieldControlProps<FlexJustifyContent> {
-  flexDirection: FlexDirection
-  justifyFlexStart: uglyLabel
-  justifyFlexEnd: uglyLabel
-}
-
-export const FlexJustifyContentControl = React.memo((props: FlexJustifyContentControlProps) => {
-  return (
-    <InspectorContextMenuWrapper
-      id={`justifyContent-context-menu`}
-      items={[unsetPropertyMenuItem('Justify Content', props.onUnset)]}
-      data={{}}
-      style={{
-        display: 'flex',
-        flexDirection: 'column',
-      }}
-    >
-      <OptionChainControl
-        id='flex.container.justifyContent'
-        key='flex.container.justifyContent'
-        testId='flex.container.justifyContent'
-        value={props.value}
-        DEPRECATED_controlOptions={{
-          labelBelow: 'Justify',
-        }}
-        options={justifyContentOptions(
-          props.flexDirection,
-          props.justifyFlexStart,
-          props.justifyFlexEnd,
-        )}
-        onSubmitValue={props.onSubmitValue}
-        controlStatus={props.controlStatus}
-        controlStyles={props.controlStyles}
-      />
-    </InspectorContextMenuWrapper>
-  )
-})
-
 const flexGapControlsForHoverAndFocused: {
   hovered: Array<CanvasControlWithProps<SubduedFlexGapControlProps>>
   focused: Array<CanvasControlWithProps<SubduedFlexGapControlProps>>
@@ -350,69 +224,6 @@ export const FlexGapControl = React.memo(() => {
   )
 })
 
-const justifyContentOptions = (
-  alignDirection: FlexDirection,
-  justifyFlexStart: uglyLabel,
-  justifyFlexEnd: uglyLabel,
-) =>
-  [
-    {
-      value: 'flex-start',
-      tooltip: PrettyLabel[justifyFlexStart],
-      icon: {
-        category: `layout/flex`,
-        type: `justifyContent-${alignDirection}-${justifyFlexStart}`,
-        color: 'secondary',
-        width: 16,
-        height: 16,
-      },
-    },
-    {
-      value: 'center',
-      tooltip: 'Center',
-      icon: {
-        category: `layout/flex`,
-        type: `justifyContent-${alignDirection}-center`,
-        color: 'secondary',
-        width: 16,
-        height: 16,
-      },
-    },
-    {
-      value: 'flex-end',
-      tooltip: PrettyLabel[justifyFlexEnd],
-      icon: {
-        category: `layout/flex`,
-        type: `justifyContent-${alignDirection}-${justifyFlexEnd}`,
-        color: 'secondary',
-        width: 16,
-        height: 16,
-      },
-    },
-    {
-      value: 'space-between',
-      tooltip: 'Space Between',
-      icon: {
-        category: `layout/flex`,
-        type: `justifyContent-${alignDirection}-spaceBetween`,
-        color: 'secondary',
-        width: 16,
-        height: 16,
-      },
-    },
-    {
-      value: 'space-around',
-      tooltip: 'Space Around',
-      icon: {
-        category: `layout/flex`,
-        type: `justifyContent-${alignDirection}-spaceAround`,
-        color: 'secondary',
-        width: 16,
-        height: 16,
-      },
-    },
-  ] as Array<OptionChainOption<string | number>>
-
 export const alignItemsOptions = (
   alignDirection: string,
   alignItemsFlexStart: uglyLabel,