Remove brackets around resource kinds

web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/RequestCheckout.tsx

@@ -42,10 +42,11 @@ import { Danger } from 'design/Alert';
 
 import Validation, { useRule, Validator } from 'shared/components/Validation';
 import { Attempt } from 'shared/hooks/useAttemptNext';
-import { pluralize } from 'shared/utils/text';
+import { listToSentence, pluralize } from 'shared/utils/text';
 import { Option } from 'shared/components/Select';
 import { FieldCheckbox } from 'shared/components/FieldCheckbox';
 import { mergeRefs } from 'shared/libs/mergeRefs';
+import { TextSelectCopyMulti } from 'shared/components/TextSelectCopy';
 import { RequestableResourceKind } from 'shared/components/AccessRequests/NewRequest/resource';
 
 import { CreateRequest } from '../../Shared/types';
@@ -66,8 +67,6 @@ import { CrossIcon } from './CrossIcon';
 
 import type { TransitionStatus } from 'react-transition-group';
 import type { AccessRequest } from 'shared/services/accessRequests';
-import { P } from 'design/Text/Text';
-import { TextSelectCopyMulti } from 'shared/components/TextSelectCopy';
 
 export const RequestCheckoutWithSlider = forwardRef<
   HTMLDivElement,
@@ -299,9 +298,10 @@ export function RequestCheckout<T extends PendingListItem>({
           {hasUnsupportedKubeRequestModes && (
             <Alert kind="danger">
               <Text mb={2}>
-                You can only request Kubernetes resource kind [
-                {unsupportedKubeRequestModes.join(', ')}] for cluster{' '}
-                <Mark>{affectedKubeClusterName}</Mark>. Requesting those
+                You can only request Kubernetes resource{' '}
+                {pluralize(unsupportedKubeRequestModes.length, 'kind')}{' '}
+                <Mark>{listToSentence(unsupportedKubeRequestModes)}</Mark> for
+                cluster <Mark>{affectedKubeClusterName}</Mark>. Requesting those
                 resource kinds is currently only supported through the{' '}
                 <ExternalLink
                   target="_blank"

web/packages/shared/utils/text.test.ts

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { pluralize, capitalizeFirstLetter } from './text';
+import { pluralize, capitalizeFirstLetter, listToSentence } from './text';
 
 test('pluralize', () => {
   expect(pluralize(0, 'apple')).toBe('apples');
@@ -28,3 +28,39 @@ test('capitalizeFirstLetter', () => {
   expect(capitalizeFirstLetter('hello')).toBe('Hello');
   expect(capitalizeFirstLetter('')).toBe('');
 });
+
+describe('listToSentence()', () => {
+  const testCases = [
+    {
+      name: 'no words',
+      list: [],
+      expected: '',
+    },
+    {
+      name: 'one word',
+      list: ['a'],
+      expected: 'a',
+    },
+    {
+      name: 'two words',
+      list: ['a', 'b'],
+      expected: 'a and b',
+    },
+    {
+      name: 'three words',
+      list: ['a', 'b', 'c'],
+      expected: 'a, b and c',
+    },
+    {
+      name: 'lost of words',
+      list: ['a', 'b', 'c', 'd', 'e', 'f', 'g'],
+      expected: 'a, b, c, d, e, f and g',
+    },
+  ];
+
+  test.each(testCases)('$name', ({ list, expected }) => {
+    const originalList = [...list];
+    expect(listToSentence(list)).toEqual(expected);
+    expect(list).toEqual(originalList);
+  });
+});

web/packages/shared/utils/text.ts

@@ -39,3 +39,28 @@ export function capitalizeFirstLetter(str: string) {
   }
   return str[0].toUpperCase() + str.slice(1);
 }
+
+/**
+ * Takes a list of words and converts it into a sentence.
+ * eg: given list ["apple", "banana", "carrot"], converts
+ * to string "apple, banana and carrot"
+ *
+ * Does not modify original list.
+ */
+export function listToSentence(listOfWords: string[]) {
+  if (!listOfWords || !listOfWords.length) {
+    return '';
+  }
+
+  if (listOfWords.length == 1) {
+    return listOfWords[0];
+  }
+
+  if (listOfWords.length == 2) {
+    return `${listOfWords[0]} and ${listOfWords[1]}`;
+  }
+
+  const copiedList = [...listOfWords];
+  const lastWord = copiedList.pop();
+  return `${copiedList.join(', ')} and ${lastWord}`;
+}