<commit_before>import { FieldProps, Formik, FormikProps } from 'formik';
import { IDropdownOption, IDropdownProps, PrimaryButton } from 'office-ui-fabric-react';
import React, { useContext, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import Dropdown, { CustomDropdownProps } from '../../../../../../components/form-controls/DropDown';
import { FormControlWrapper, Layout } from '../../../../../../components/FormControlWrapper/FormControlWrapper';
import LoadingComponent from '../../../../../../components/Loading/LoadingComponent';
import { ArmObj } from '../../../../../../models/arm-obj';
import { StorageAccount, StorageAccountKeys } from '../../../../../../models/storage-account';
import { LogCategories } from '../../../../../../utils/LogCategories';
import LogService from '../../../../../../utils/LogService';
import { NewConnectionCalloutProps } from '../Callout.properties';
import { paddingTopStyle } from '../Callout.styles';
import { StorageAccountPivotContext } from './StorageAccountPivotDataLoader';
import { getErrorMessageOrStringify } from '../../../../../../ApiHelpers/ArmHelper';

interface StorageAccountPivotFormValues {
  storageAccount: ArmObj<StorageAccount> | undefined;
}

const StorageAccountPivot: React.SFC<NewConnectionCalloutProps & CustomDropdownProps & FieldProps & IDropdownProps> = props => {
  const provider = useContext(StorageAccountPivotContext);
  const { t } = useTranslation();
  const { resourceId } = props;
  const [formValues, setFormValues] = useState<StorageAccountPivotFormValues>({ storageAccount: undefined });
  const [storageAccounts, setStorageAccounts] = useState<ArmObj<StorageAccount>[] | undefined>(undefined);
  const [keyList, setKeyList] = useState<StorageAccountKeys | undefined>(undefined);

  useEffect(() => {
    if (!storageAccounts) {
      provider.fetchAzureStorageAccounts(resourceId).then(r => {
        if (!r.metadata.success) {
          LogService.trackEvent(
            LogCategories.bindingResource,
            'fetchAzureStorageAccounts',
            `Failed to get Storage Accounts: ${getErrorMessageOrStringify(r.metadata.error)}`
          );
          return;
        }
        setStorageAccounts(r.data.value);
      });
    } else if (formValues.storageAccount && !keyList) {
      provider.fetchStorageAccountKeys(formValues.storageAccount.id).then(response => {
        if (!response.metadata.success) {
          LogService.trackEvent(
            LogCategories.bindingResource,
            'fetchStorageAccountKeys',
            `Failed to get storage account keys: ${getErrorMessageOrStringify(response.metadata.error)}`
          );
          return;
        }

        setKeyList(response.data);
      });
    }

    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [formValues]);

  if (!storageAccounts) {
    return <LoadingComponent />;
  }

  const storageAccountOptions: IDropdownOption[] = [];
  storageAccounts.forEach(account => storageAccountOptions.push({ text: account.name, key: account.id, data: account }));
  if (!formValues.storageAccount && storageAccountOptions.length > 0) {
    setFormValues({ ...formValues, storageAccount: storageAccounts[0] });
  }

  return (
    <Formik
      initialValues={formValues}
      onSubmit={() =>
        setStorageAccountConnection(
          formValues,
          keyList,
          props.setNewAppSetting,
          props.setSelectedItem,
          props.setIsDialogVisible,
          setKeyList
        )
      }>
      {(formProps: FormikProps<StorageAccountPivotFormValues>) => {
        return (
          <form>
            {!!storageAccounts && storageAccounts.length === 0 ? (
              <p>{t('storageAccountPivot_noStorageAccounts')}</p>
            ) : (
              <FormControlWrapper label={t('storageAccountPivot_storageAccount')} layout={Layout.vertical}>
                <Dropdown
                  options={storageAccountOptions}
                  selectedKey={formValues.storageAccount && formValues.storageAccount.id}
                  onChange={(o, e) => {
                    setFormValues({ storageAccount: e && e.data });
                  }}
                  errorMessage={undefined}
                  {...props}
                />
              </FormControlWrapper>
            )}
            <footer style={paddingTopStyle}>
              <PrimaryButton disabled={!formValues.storageAccount} onClick={formProps.submitForm}>
                {t('ok')}
              </PrimaryButton>
            </footer>
          </form>
        );
      }}
    </Formik>
  );
};

const setStorageAccountConnection = (
  formValues: StorageAccountPivotFormValues,
  keyList: StorageAccountKeys | undefined,
  setNewAppSetting: React.Dispatch<React.SetStateAction<{ key: string; value: string }>>,
  setSelectedItem: React.Dispatch<React.SetStateAction<IDropdownOption | undefined>>,
  setIsDialogVisible: React.Dispatch<React.SetStateAction<boolean>>,
  setKeyList: React.Dispatch<React.SetStateAction<StorageAccountKeys | undefined>>
) => {
  if (formValues.storageAccount && keyList) {
    const appSettingName = `${formValues.storageAccount.name}_STORAGE`;
    const appSettingValue = `DefaultEndpointsProtocol=https;AccountName=${formValues.storageAccount.name};AccountKey=${
      keyList.keys[0].value
    }`;
    setNewAppSetting({ key: appSettingName, value: appSettingValue });
    setSelectedItem({ key: appSettingName, text: appSettingName, data: appSettingValue });
    setKeyList(undefined);
    setIsDialogVisible(false);
  }
};

export default StorageAccountPivot;
<commit_msg>set keyList undefined to trigger fetch (#4908)<commit_after>import { FieldProps, Formik, FormikProps } from 'formik';
import { IDropdownOption, IDropdownProps, PrimaryButton } from 'office-ui-fabric-react';
import React, { useContext, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import Dropdown, { CustomDropdownProps } from '../../../../../../components/form-controls/DropDown';
import { FormControlWrapper, Layout } from '../../../../../../components/FormControlWrapper/FormControlWrapper';
import LoadingComponent from '../../../../../../components/Loading/LoadingComponent';
import { ArmObj } from '../../../../../../models/arm-obj';
import { StorageAccount, StorageAccountKeys } from '../../../../../../models/storage-account';
import { LogCategories } from '../../../../../../utils/LogCategories';
import LogService from '../../../../../../utils/LogService';
import { NewConnectionCalloutProps } from '../Callout.properties';
import { paddingTopStyle } from '../Callout.styles';
import { StorageAccountPivotContext } from './StorageAccountPivotDataLoader';
import { getErrorMessageOrStringify } from '../../../../../../ApiHelpers/ArmHelper';

interface StorageAccountPivotFormValues {
  storageAccount: ArmObj<StorageAccount> | undefined;
}

const StorageAccountPivot: React.SFC<NewConnectionCalloutProps & CustomDropdownProps & FieldProps & IDropdownProps> = props => {
  const provider = useContext(StorageAccountPivotContext);
  const { t } = useTranslation();
  const { resourceId } = props;
  const [formValues, setFormValues] = useState<StorageAccountPivotFormValues>({ storageAccount: undefined });
  const [storageAccounts, setStorageAccounts] = useState<ArmObj<StorageAccount>[] | undefined>(undefined);
  const [keyList, setKeyList] = useState<StorageAccountKeys | undefined>(undefined);

  useEffect(() => {
    if (!storageAccounts) {
      provider.fetchAzureStorageAccounts(resourceId).then(r => {
        if (!r.metadata.success) {
          LogService.trackEvent(
            LogCategories.bindingResource,
            'fetchAzureStorageAccounts',
            `Failed to get Storage Accounts: ${getErrorMessageOrStringify(r.metadata.error)}`
          );
          return;
        }
        setStorageAccounts(r.data.value);
      });
    } else if (formValues.storageAccount && !keyList) {
      provider.fetchStorageAccountKeys(formValues.storageAccount.id).then(response => {
        if (!response.metadata.success) {
          LogService.trackEvent(
            LogCategories.bindingResource,
            'fetchStorageAccountKeys',
            `Failed to get storage account keys: ${getErrorMessageOrStringify(response.metadata.error)}`
          );
          return;
        }

        setKeyList(response.data);
      });
    }

    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [formValues]);

  if (!storageAccounts) {
    return <LoadingComponent />;
  }

  const storageAccountOptions: IDropdownOption[] = [];
  storageAccounts.forEach(account => storageAccountOptions.push({ text: account.name, key: account.id, data: account }));
  if (!formValues.storageAccount && storageAccountOptions.length > 0) {
    setFormValues({ ...formValues, storageAccount: storageAccounts[0] });
  }

  return (
    <Formik
      initialValues={formValues}
      onSubmit={() =>
        setStorageAccountConnection(
          formValues,
          keyList,
          props.setNewAppSetting,
          props.setSelectedItem,
          props.setIsDialogVisible,
          setKeyList
        )
      }>
      {(formProps: FormikProps<StorageAccountPivotFormValues>) => {
        return (
          <form>
            {!!storageAccounts && storageAccounts.length === 0 ? (
              <p>{t('storageAccountPivot_noStorageAccounts')}</p>
            ) : (
              <FormControlWrapper label={t('storageAccountPivot_storageAccount')} layout={Layout.vertical}>
                <Dropdown
                  options={storageAccountOptions}
                  selectedKey={formValues.storageAccount && formValues.storageAccount.id}
                  onChange={(o, e) => {
                    setFormValues({ storageAccount: e && e.data });
                    setKeyList(undefined);
                  }}
                  errorMessage={undefined}
                  {...props}
                />
              </FormControlWrapper>
            )}
            <footer style={paddingTopStyle}>
              <PrimaryButton disabled={!formValues.storageAccount} onClick={formProps.submitForm}>
                {t('ok')}
              </PrimaryButton>
            </footer>
          </form>
        );
      }}
    </Formik>
  );
};

const setStorageAccountConnection = (
  formValues: StorageAccountPivotFormValues,
  keyList: StorageAccountKeys | undefined,
  setNewAppSetting: React.Dispatch<React.SetStateAction<{ key: string; value: string }>>,
  setSelectedItem: React.Dispatch<React.SetStateAction<IDropdownOption | undefined>>,
  setIsDialogVisible: React.Dispatch<React.SetStateAction<boolean>>,
  setKeyList: React.Dispatch<React.SetStateAction<StorageAccountKeys | undefined>>
) => {
  if (formValues.storageAccount && keyList) {
    const appSettingName = `${formValues.storageAccount.name}_STORAGE`;
    const appSettingValue = `DefaultEndpointsProtocol=https;AccountName=${formValues.storageAccount.name};AccountKey=${
      keyList.keys[0].value
    }`;
    setNewAppSetting({ key: appSettingName, value: appSettingValue });
    setSelectedItem({ key: appSettingName, text: appSettingName, data: appSettingValue });
    setKeyList(undefined);
    setIsDialogVisible(false);
  }
};

export default StorageAccountPivot;

{'fraction_non_alphanumeric': 0.13740053050397877, 'fraction_numerical': 0.0014146772767462423, 'mean_word_length': 2.960434173669468, 'pattern_counts': {'":': 0, '<': 61, '<?xml version=': 0, '>': 81, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3441769', 'n_tokens_mistral': 2975, 'n_tokens_neox': 2957, 'n_words': 531}