added custom partition field to the create stream form

src/components/Misc/CreatableSelect.tsx

@@ -8,14 +8,15 @@ type Props = {
 	setValue: (val: string) => void;
 	placeholder: string;
 	error: string;
+	style?: Record<string, string | number>
 };
 
 export function CreatableSelect(props: Props) {
 	const combobox = useCombobox({
 		onDropdownClose: () => combobox.resetSelectedOption(),
 	});
 
-	const { data, setData, value, setValue } = props;
+	const { data, setData, value, setValue, style = {}} = props;
 	const [search, setSearch] = useState('');
 
 	const exactOptionMatch = data.some((item) => item === search);
@@ -71,7 +72,8 @@ export function CreatableSelect(props: Props) {
 				}
 
 				combobox.closeDropdown();
-			}}>
+			}}
+			>
 			<Combobox.Target>
 				<InputBase
 					rightSection={<Combobox.Chevron />}
@@ -90,6 +92,7 @@ export function CreatableSelect(props: Props) {
 					placeholder={props.placeholder || 'Search or Type'}
 					rightSectionPointerEvents="none"
 					error={props.error}
+					style={style}
 				/>
 			</Combobox.Target>
 			<Combobox.Dropdown>

src/pages/Home/CreateStreamModal.tsx

@@ -4,8 +4,10 @@ import {
 	Button,
 	CloseIcon,
 	Modal,
+	NumberInput,
 	Select,
 	Stack,
+	TagsInput,
 	Text,
 	TextInput,
 	ThemeIcon,
@@ -98,7 +100,8 @@ const AddFieldButton = ({ onClick }: { onClick: () => void }) => {
 						<IconPlus stroke={2} />
 					</ThemeIcon>
 				}
-				onClick={onClick}>
+				onClick={onClick}
+				style={{ padding: 12, fontSize: '0.8rem' }}>
 				Add Field
 			</Button>
 		</Box>
@@ -122,7 +125,29 @@ const SchemaTypeField = (props: { inputProps: GetInputPropsReturnType }) => {
 				</Stack>
 				<Text className={styles.fieldDescription}>Choose dynamic, evolving schema or fixed, static schema.</Text>
 			</Stack>
-			<Select data={[dynamicType, staticType]} {...props.inputProps} />
+			<Select w={200} data={[dynamicType, staticType]} {...props.inputProps} />
+		</Stack>
+	);
+};
+
+const PartitionLimitField = (props: { inputProps: GetInputPropsReturnType }) => {
+	return (
+		<Stack gap={2} style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+			<Stack gap={1}>
+				<Stack style={{ flexDirection: 'row', alignItems: 'center' }} gap={4}>
+					<Text className={styles.fieldTitle}>Partition Limit</Text>
+					<Tooltip
+						multiline
+						w={220}
+						withArrow
+						transitionProps={{ duration: 200 }}
+						label="Dynamic schema allows new fields to be added to a stream later. Static schema is fixed for the lifetime of the stream.">
+						<IconInfoCircleFilled className={styles.infoTooltipIcon} stroke={1.4} height={18} width={18} />
+					</Tooltip>
+				</Stack>
+				<Text className={styles.fieldDescription}>Default value is set to 30 days.</Text>
+			</Stack>
+			<NumberInput w={200} styles={{section: {"--section-size": 'none', padding: 12}}} {...props.inputProps} rightSection={<Text>Days</Text>}/>
 		</Stack>
 	);
 };
@@ -171,6 +196,50 @@ const PartitionField = (props: {
 				setValue={(value: string) => onFieldChange(value)}
 				placeholder="Select or Add"
 				error={props.error}
+				style={{width: 200}}
+			/>
+		</Stack>
+	);
+};
+
+const CustomPartitionField = (props: {
+	partitionFields: string[];
+	onChangeValue: (key: string, field: string[]) => void;
+	isStaticSchema: boolean;
+	error: string;
+	value: string[];
+}) => {
+	const shouldDisable = _.isEmpty(props.partitionFields);
+
+	return (
+		<Stack gap={2} style={{ justifyContent: 'space-between' }}>
+			<Stack gap={1}>
+				<Stack style={{ flexDirection: 'row', alignItems: 'center' }} gap={4}>
+					<Text className={styles.fieldTitle}>Custom Partition Field</Text>
+					<Tooltip
+						multiline
+						w={220}
+						withArrow
+						transitionProps={{ duration: 200 }}
+						label="This allows querying events based on custom timestamp selected here.">
+						<IconInfoCircleFilled className={styles.infoTooltipIcon} stroke={1.4} height={18} width={18} />
+					</Tooltip>
+				</Stack>
+				<Text className={styles.fieldDescription}>Upto 3 columns</Text>
+			</Stack>
+			<TagsInput
+				placeholder={
+					props.isStaticSchema
+						? shouldDisable
+							? 'Add Columns to the Schema'
+							: 'Select column from the list'
+						: 'Add upto 3 columns'
+				}
+				data={props.partitionFields}
+				mt={6}
+				onChange={(val) => props.onChangeValue('customPartitionFields', val)}
+				maxTags={3}
+				error={props.error}
 			/>
 		</Stack>
 	);
@@ -197,6 +266,8 @@ const useCreateStreamForm = () => {
 			fields: [defaultFieldValue],
 			schemaType: dynamicType,
 			partitionField: defaultPartitionField,
+			partitionLimit: 30,
+			customPartitionFields: [],
 		},
 		validate: {
 			name: (value) => isValidStreamName(value),
@@ -217,6 +288,16 @@ const useCreateStreamForm = () => {
 				return schemaType === staticType && !_.includes(allStringFieldNames, val) ? 'Unknown Field' : null;
 			},
 			schemaType: (val) => (_.includes([dynamicType, staticType], val) ? null : 'Choose either Dynamic or Static'),
+			customPartitionFields: (val, allValues) => {
+				if (_.isEmpty(val) || allValues.schemaType !== staticType) {
+					return null;
+				} else {
+					const allFieldNames = _.map(allValues.fields, (field) => field.name);
+					const invalidColumnNames = _.difference(val, allFieldNames);
+					return !_.isEmpty(invalidColumnNames) ? 'Unknown Field Included' : null;
+				}
+			},
+			partitionLimit: (val) => (!_.isInteger(val) ? 'Must be a number' : null),
 		},
 		validateInputOnChange: true,
 		validateInputOnBlur: true,
@@ -238,6 +319,7 @@ const useCreateStreamForm = () => {
 
 	const onChangeValue = useCallback((key: string, value: any) => {
 		form.setFieldValue(key, value);
+		form.validateField(key);
 	}, []);
 
 	return { form, onAddField, onRemoveField, onChangeValue };
@@ -248,6 +330,12 @@ const CreateStreamForm = (props: { toggleModal: () => void }) => {
 	const stringFields = getStringFieldNames(form.values.fields);
 	const isStaticSchema = form.values.schemaType === staticType;
 	const partitionFields = [defaultPartitionField, ...(isStaticSchema ? stringFields : [])];
+	const customPartitionFields = !isStaticSchema
+		? []
+		: _.chain(form.values.fields)
+				.map((field) => field.name)
+				.compact()
+				.value();
 	const { createLogStreamMutation } = useLogStream();
 	const { getLogStreamListRefetch } = useLogStream();
 	const onSuccessCallback = useCallback(() => {
@@ -257,13 +345,15 @@ const CreateStreamForm = (props: { toggleModal: () => void }) => {
 
 	const onSubmit = useCallback(() => {
 		const { hasErrors } = form.validate();
-		const { schemaType, fields, partitionField } = form.values;
+		const { schemaType, fields, partitionField, customPartitionFields, partitionLimit } = form.values;
 		const isStatic = schemaType === staticType;
 		if (hasErrors || (isStatic && _.isEmpty(fields))) return;
 
 		const headers = {
 			...(partitionField !== defaultPartitionField ? { 'X-P-Time-Partition': partitionField } : {}),
 			...(isStatic ? { 'X-P-Static-Schema-Flag': true } : {}),
+			...(_.isEmpty(customPartitionFields) ? {} : { 'X-P-Custom-Partition': _.join(customPartitionFields, ',') }),
+			...(partitionField === defaultPartitionField || !_.isInteger(partitionLimit) ? {} : { 'X-P-Time-Partition-Limit': `${partitionLimit}d` }),
 		};
 		const schmaFields = isStatic ? fields : {};
 		createLogStreamMutation({
@@ -305,6 +395,16 @@ const CreateStreamForm = (props: { toggleModal: () => void }) => {
 				value={form.values.partitionField}
 				error={_.toString(form.errors.partitionField)}
 			/>
+			{form.values.partitionField !== defaultPartitionField && (
+				<PartitionLimitField inputProps={form.getInputProps('partitionLimit')} />
+			)}
+			<CustomPartitionField
+				partitionFields={customPartitionFields}
+				isStaticSchema={isStaticSchema}
+				onChangeValue={onChangeValue}
+				value={form.values.customPartitionFields}
+				error={_.toString(form.errors.customPartitionFields)}
+			/>
 			<Stack style={{ flexDirection: 'row', justifyContent: 'flex-end' }}>
 				<Box>
 					<Button onClick={onSubmit}>Create</Button>

src/pages/Home/index.tsx

@@ -36,11 +36,11 @@ const EmptyStreamsView: FC = () => {
 const Home: FC = () => {
 	useDocumentTitle('Parseable | Streams');
 	const classes = homeStyles;
-	const { container } = classes;
+	const { container, createStreamButton } = classes;
 	const navigate = useNavigate();
 	const { getStreamMetadata, metaData } = useGetStreamMetadata();
 	const [userSpecificStreams, setAppStore] = useAppStore((store) => store.userSpecificStreams);
-	const [userAccessMap] = useAppStore((store) => store.userAccessMap);	
+	const [userAccessMap] = useAppStore((store) => store.userAccessMap);
 
 	useEffect(() => {
 		if (!Array.isArray(userSpecificStreams) || userSpecificStreams.length === 0) return;
@@ -54,7 +54,7 @@ const Home: FC = () => {
 
 	const displayEmptyPlaceholder = Array.isArray(userSpecificStreams) && userSpecificStreams.length === 0;
 	const openCreateStreamModal = useCallback(() => {
-		setAppStore(store => toggleCreateStreamModal(store))
+		setAppStore((store) => toggleCreateStreamModal(store));
 	}, []);
 
 	return (
@@ -74,7 +74,7 @@ const Home: FC = () => {
 						{userAccessMap.hasCreateStreamAccess && (
 							<Button
 								variant="outline"
-								style={{ border: '1px solid' }}
+								className={createStreamButton}
 								onClick={openCreateStreamModal}
 								leftSection={<IconPlus stroke={2} />}>
 								Create Stream

src/pages/Home/styles/Home.module.css

@@ -25,3 +25,18 @@
     color: #FFFFFF;
 	background: #545BEB;
 }
+
+.createStreamButton {
+    background-color: white;
+    color: #211F1F;
+    border: 1px #e9ecef solid;
+    padding: 0.625rem 0.75rem;
+    margin-right: 0.625rem;
+    border-radius: rem(8px);
+    text-transform: capitalize;
+
+    &:hover {
+        background-color: #E0E0E0;
+        color: black;
+    }
+}